Simple Music Player UI

This is a minimal and simple music player UI design made with HTML, CSS, and JavaScript.

This project was created to practice my frontend dev skills.

Functionality

• Favorite song button
• Repeat / Shuffle buttons
• Play / Pause button and audio (slider does not currently update in real time with the song)
• Drag the slider (will not affect the song)

How to toggle a color change on an SVG

Here's a tutorial on how to the color of an SVG on click.

CSS

Create a .active ruleset to set the path's fill to the toggled color.

JavaScript

Have a function that gets the div element by id and toggles an 'active' class.

HTML

Surround the SVG with a div with an id and an onclick with the JavaScript function. The div is also used for easier spacing out of elements.

Built With

• HTML5
• CSS3
• JavaScript

Code

Live Demo

Music Player

Feedback

Any type of feedback is welcome.

Check out some of my other projects below

The end,
annie.exe

---