Display content from .json files, filtering & styling

Steem list is a collection of some of the best Steem based websites and applications available on the STEEM blockchain. Steem List has sections dedicated to various different interests to help you quickly navigate around the site and help you find sites that will enhance your experience on the STEEM blockchain.

Within this release I have added the following features to Steem List:

1. Main Page & CSS
2. Ability to pull content from JSON files
3. Filtering of categories

Within this release I created the initial view for the site, the site currently consists of three main areas the top bar which a user can use to navigate quickly to sections using the links provided. The side menu which provides filtering so users can quickly turn off and on the viewing of various different sections of the content as well as the main content area which display the websites and apps themselves.

A screenshot of the initial view of the site can be seen below:

Within this screenshot, you can see the various different categories which have been added and the beginnings of the site content, each sites shown within the site has an image, a site name, a description and a button which will take you to the site.

I then created the ability to filter the various different sections shown on the website, this can be seen here:

By default each of the sections is hidden, but when the checkbox which relates to each section is clicked the section will hide.

In order to build these features I first created the basic layout of the site, I used bootstrap for the basic grid layout and created custom CSS for the remainder of the site. Within the initial release, I created 7 categories which hold a selection of different apps and sites related to the Steem blockchain, each of these categories has an accompanying JSON file which is used to quickly add a new website or app to any of the different categories. A snippet from blogging.json can be seen in this screen capture:

A link to these files can be found here:

https://github.com/tobias-g1/steem-list/tree/master/category-json

In order to display the content, I created a function within generate.js which is able to take the data from within each of the JSON files and generate the HTML required to display each of the websites/apps. The function can be seen here:

I can the function multiple times based using document.ready when the websites are launched.

A link to generate.js that holds this function can be found here: https://github.com/tobias-g1/steem-list/blob/master/js/generate.js

The filtering which can be found in the sidebar was achieved using a simple function which toggles a class based on ID I assigned to each of the sections, this can be seen below:

A link to general.js can be found here:

https://github.com/tobias-g1/steem-list/blob/master/js/general.js

Current limitations of this site currently include:

1. Limited content
2. Mobile ready design, the mobile view current breaks due to how bootstrap adjusts the site. I need to rework the media queries releavant to my design for an optimal experience.

The commits related to the changes can be found here:

Listed from newest to oldest, apologies for the small commits at the start the first fix I entered would have worked but the path error was cached.

https://github.com/tobias-g1/steem-list/commit/d97c5ad1f10cb313aa46bc6332146c871ea9db83

https://github.com/tobias-g1/steem-list/commit/98fb319e2ce5d86c7871ffa3cdfb0dcaf51c70b0

https://github.com/tobias-g1/steem-list/commit/58be88e38f0dc4c61959f932ab97f5b7c84e8a6b

https://github.com/tobias-g1/steem-list/commit/5720ba40a25a6d821858f8baaf977d5767c9026f

https://github.com/tobias-g1/steem-list/commit/052df48989c7abeed64a7f31666c775b2d434577

https://github.com/tobias-g1/steem-list/commit/780f03fbc35a57bc1d019defc3154d343537eb45

https://github.com/tobias-g1/steem-list/commit/4f665398d2a73a70b5be628e31509ed2aebb2b5b

https://github.com/tobias-g1/steem-list/commit/3b88bb84d8e33cb809072d000487ae08dfd7e796

https://github.com/tobias-g1/steem-list/commit/2bd4cdb06747caa2127ec52c2df417f0c97bbfaf

https://github.com/tobias-g1/steem-list/commit/cc6216fe5fa76c7008f05ab08b549fdf223a06fe

https://github.com/tobias-g1/steem-list/commit/8679f2141ce4afab21b5b767935d7653997dfa37

https://github.com/tobias-g1/steem-list/commit/7895026319e987650326a344401be3b463ad14e6

https://github.com/tobias-g1/steem-list/commit/9f8874c2ac7ea6806a85aaf969231a9709fd8b37

---

Posted on Utopian.io - Rewarding Open Source Contributors

---