Project 5: Jukebox

A website created to play music through a custom-built jukebox.

Spring 2026

The goal of this project was to create an interactive music website that not works like a real jukebox and has a fun layout. I wanted it to feel fun and easy to use while also pushing myself more in working with JavaScript. For this project, I created “Gleeked Out,” which is a jukebox inspired by Glee where users can pick songs, control playback and interact with it like music player. I also embedded a Spotify playlist at the bottom to further more interaction within the website

I worked on the layout, color palette, styling, typography and all of the functionality behind the music player. I built out features like play, pause, stop, next, previous and shuffle, along with creating buttons for each song that update the player when it is clicked.

I really wanted the site to feel fun, so I focused a lot on the visual design. The background has a soft gradient with different elements that make it feel more interactive. Everything is centered in order to make the jukebox the main focus. I used the font Montserrat to give it clean and modern feel. I also added rounded buttons and shadows so it looks more like something you would actually want to click on.

One of the biggest challenges and parts of this project was building the actual jukebox functionality. I created an array of songs that includes the title, audio file and album art. After that, I used JavaScript to generate buttons for each one. When you click a song, it updates the audio player, the album cover and the “Now Playing” text. That made the project feel way more interactive instead of just being a static page.

Another big component was the controls. I added listeners for play, pause, stop, next, previous and shuffle so users can fully control the music. The shuffle feature was honestly one of the more interesting parts because I had to make sure it didn’t just replay the same song again. That’s when I really started to develop a better understanding behind how everything connects. I also spent time on the styling to make everything feel cohesive. I used gradients, shadows and soft glowing effects to make the site more visually interesting .

Throughout this project, I realized I’m capable of way more than I thought. At the beginning, I wasn’t super confident working with JavaScript like this, especially with multiple buttons and dynamic updates. But once I started figuring it out, it made a lot more sense and I felt more comfortable building something interactive.

One challenge I faced was getting the audio player to update correctly when switching songs. Another challenge was making sure all the controls worked together without breaking anything, especially when using shuffle or switching songs quickly.

In the future, I would want to add more features like animations, smoother transitions between songs, and maybe even a volume control or progress bar. I think those details would make it feel even more like a real music app. Overall, this project helped me understand how design and functionality work together, and it made me feel a lot more confident building interactive websites.