blocJams is a BLOC student project that allows the developer to organize songs into a collection of albums, and to play each song in the album.
Modules 1 and 2 of BLOC focus on building a core foundation of the following skill sets:
- Version control using Git and Github, and Git bash.
The BlocJams project makes use of all of the coding, IDE, and version control skills listed above.
BlocJams minimally requires the following components and pieces of functionality:
- A landing page.
- A collections page that lists the albums.
- A songs page where individual songs of the album are listed and can be played.
- Song navigation code.
- Volume control.
- An audio library to play the songs.
- Usability on a variety of devices ranging from laptops to iPhones
- Storage of song and album information.
- The landing page is configured to pop up an animation of selling points via jQuery. The trigger that pops it up is the distance the user has scrolled down.
- A collections page that lists the albums is displayed using a div grid.
- Song navigation is based on the song number. The interface allows navigation through a navigation bar or by directly clicking on a song row. The code to handle navigation is the most complex piece of the application, with code specific for the onclick, onHover, offHover, mousedown, mousemove, and mouseup events.
- Volume control is coordinated with a thumb bar using the updateSeekPercentage function.
- Songs are played using the Buzzfeed library.
- Viewports and media ranges allow the app to be usable on a variety of devices.
Screenshot 1. Landing page
Screenshot 2. Collections page
Screenshot 3. Album/song page