This website is built with vanilla JS and the Web Audio API.
Design Considerations
If there was no contingency in using a bundler, my choice would've been going with a framework like React / Next.js. Since the application's features were minimal, plain JS was enough to fetch, render, allow for sorting and grouping.
The Styling is responsive and the website works well with both large screens and mobiles.
The style design system is hugely inspired from Vercel.
Removing / adding new DOM elements is a costly operation. So in this app, when the user sorts the data, only the innerHTML content is changed in the cards. This helps us to avoid removing and adding new DOM elements.
How does it work?
Data Page (script.js) -
First, the main() fn is called which fetches the data and calls insertPosts() with the fetched data.
insertPosts() creates the necessary DOM elements and inserts it on to the page, applying the required styling.
onclick() and onchange() handlers are set on Sort and GroupBy input elements.
when Sort is clicked, the posts are sorted and replacePosts() is called with the new sorted data. replacePosts() directly inserts the data into the innerHTML and does not remove and add new DOMs (since they're a costly operation).
When groupBy is selected from the dropdown, it filters the posts based on user ID and insertPosts() is called with the new filtered data.
Audio Page (audio.js)
The songs are stored in an object and they are rendered on to the DOM by applying the necessary styles.
When clicked on Play on a song, it fetches the song and plays the song using the Web Audio API.
When the song is being played, onclick listeners are added to call stop(). So when the user click on button, the song stops playing.
When the song has finished playing, stop() is automatically called since the web audio allows us to assign stop() to the onended property in the audio bufferSource.