Project for Frontend Web Development Foundation
For my first project, I set out to build BlocJams, a replica of Spotify, with the guidance of Bloc. The application was a vehicle to learn basic HTML and CSS, as well as front-end programming using vanilla JavaScript and AngularJS. I learned a lot through this process and encountered some interesting challenges.
BlocJams is built with HTML/CSS, JavaScript, and AngularJS
The organization of the project is as follows:
| File | Purpose |
|---|---|
index.html |
Global file of the application |
app.js |
Root module of the application |
AlbumCtrl.js |
Defines controller for the Album View |
CollectionCtrl.js |
Defines controller for the Collection View |
LandingCtrl.js |
Defines controller for the Landing View |
PlayerBarCtrl.js |
Defines controller for the Player Bar |
seekBar.js |
Defines the Seek Bar directive |
timecode.js |
Defines the timecode filter |
Fixtures.js |
Defines the Fixtures service |
SongPlayer.js |
Defines the Song Player service |
album.css |
Defines styles specific to the Album View |
collection.css |
Defines styles specific to the Collection View |
landing.css |
Defines styles specific to the Landing View |
main.css |
Defines styles global to the application |
normalize.css |
Included to ensure that all elements are consistent with current style standards |
player_bar.css |
Defines styles specific to the player bar |
album.html |
Template for the Album View |
collection.html |
Template for the Collection View |
landing.html |
Template for the Landing View |
player_bar.html |
Template for the Player Bar |
seek_bar.html |
Template for the Seek Bar |