News Explorer Project
Build an application that consolidates news items into a single webpage. Implement features for sorting and filtering news to enhance user experience. You will be building this project as part of our JavaScript Course.
Resources: neetoCode with the news data set
Things you need to know: Searching/Filtering/Sorting elements in an array. Flexbox, Grid, Semantic HTML and creating front-end using data.
Task - 01
Clone the neetoCode project from the resources section above.
Use the news data given in the neetoCode project to get started with the project.
Use this data to create a card layout as per the wireframe design given below.
Display a grid of 7 sample news cards on the dashboard.
Task - 02
Make sure that only first seven news articles are visible. All other news articles should be hidden.
Add a Show More button at the bottom of the news cards section.
Add functionality in the Show More button so that upon clicking the button, all other hidden news articles are shown on the page.
Make sure all displayed news articles are sorted with the latest news appearing first.
Task - 03
Implement a debounced search functionality by delaying the function call until a specified wait time has passed without additional calls.
You should also highlight the searched word in the results in a different color of your choice as shown in the adjacent image.
Task - 04
By default, the All tag should be selected, displaying news from all categories.
Clicking on any tag should highlight the tag. The dashboard should update with news from that category.
Highlight tags by making their background black and the font colour white.
Users should be able to simultaneously select multiple tags.
If All is selected, all other tags should become unchecked.
More projects
These are some of the projects you'll build while learning.
