I build the my third project for the Start2Impact online course. It is a News API and Weather API based project in Vanilla JavaScript.
The task was to create a News webpage that fetches the newest stories from the Hacker News API.
One of the main requirements was to integrate a Load More button that would fetch ten pieces of news at a time.
I decided to integrate Weather API data and a date into the project for completeness.
- URL: Live Website URL
As I decided to tackle the most complex part first, fetching the array of IDs from the Hacker News API was my first step.
Then I created a function that fetches a single story given an ID as parameter. The parameter is placed into the fetch URL as a template literal.
At last, in order to fetch ten stories, I created a function with an index parameter. It splits the array of IDs in 50 sub-arrays of 10 IDs using chunk() from Lodash and returns each arrays based on the index provided upon the call.
This function is assigned to a click event listener with a cumulating value as a parameter (currentIndex++). Now, every time the Load More button is clicked, the value of currentIndex++ increases by one, and the event listener displays the corresponding sub-array.
This fetch function calls the displayStories function.
Fetching data from the Weather API follows a similar pattern of actions. Moreover, both calls use Async/Await and Try/Catch for error handling and a displayError function.
The last piece of logic was creating and displaying the Today's Date on the sidebar.
For the designing and styling process I decided on the mobile first approach.
The layout for mobile is straight forward, without any layout choices besides the grid display for the weather. For the desktop I opted for a more traditional sidebar layout made with flex-box.
The entire project was created with Vite.
- Semantic HTML5 markup
- Sass
- Flex-box
- Mobile-first workflow
- JavaScript
- Fetch API
Fells like I went to hell and back to get to these four lines of code, but it was all worth it.
I tried so many other intricate ways but I learned that, at the end of the day, the less pretentious the code is the most efficient it is.
const chunkedIds = _.chunk(ids, 10);
let tenStories = await Promise.all(
chunkedIds[index].map((id) => fetchStory(id))
);The currentIndex++ refers to index in the example below.
fetchTenStories(currentIndex++);- Twitter - Cristina Zlatov
- Linkedin - Cristina Zlatov
Finally I'd like to thank Start2Impact for inspiring me to take on their course in the first place and making me feel comfortable while learning everything from zero.