News Explorer
L2Making a News Explorer app will help us understand how to structure, search, filter and sort a collection of data.
Resources: neetoCode with the news data set
Goals:Searching/Filtering/Sorting elements in an array. Flexbox, Grid, Semantic HTML and creating front-end using data.
Step 1 - Clone the neetoCode given as resources above and use the news data set given in it to get started with 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.
( 2 Hrs )
1out of5
Step 2 - Show More
- Make sure that only 7 news articles are visible at any given time.
- Upon clicking the "Show More" button, reveal all available news articles for the user to browse through.
( 30 mins )
2out of5
Step 3 - Search functionality
- Implement a debounced search functionality.
- A debounced search is a technique used to improve the performance of search functionality by delaying the execution of the
search operation until a specified amount of time has passed since the last user input.
- By delaying the search operation until the user has finished typing or has paused for a specified duration,
we can prevent unnecessary filtering and rendering of data
- You should also highlight the searched word in the results in a different color of you choice as show in the wireframe.
( 2 Hrs )
3out of5
Step 4 - Filter functionality. Clicking on any tag should trigger the following actions:
- By default, the "All" tag is selected, displaying news from all categories.
- Upon selecting a tag, it should be highlighted, and the dashboard updates with news from that category.
- Users can select multiple tags simultaneously.
- If "All" is selected, all other tags should be unchecked.
( 2 Hrs )
4out of5
Step 5 - Sorting functionality.
- Make sure all displayed news articles are sorted with the latest news appearing first.
( 1 Hr )
5out of5
More projects