Skip to content

Latest commit

 

History

History

music-player

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
public
public
 
 
src
src
 
 
README.md
README.md
 
 
TODO.md
TODO.md
 
 
index.html
index.html
 
 
jsconfig.json
jsconfig.json
 
 
package.json
package.json
 
 
vite.config.js
vite.config.js
 
 

README.md

Music Player

Deploy status

Deploy challenges

Overview

music-player screenshot

This challenge is an excellent opportunity to enhance your JavaScript skills by creating a simple music player app that tests your data management capabilities using JavaScript.

User Stories

  • Create a music player app that matches the given design.
  • Use HTML to create the basic structure.
  • Add image, title, author, progress bar, player button,... according to the design.
  • Use vanilla JavaScript to add interactivity.
  • Users should be able to play and stop the current song.
  • Users should be able to go to next and previous songs.
  • Users should be able to change play time with the progress bar.
  • The page should be responsive on different screen sizes.
  • Deploy the solution and submit Repository URL and Demo URL.

Built With

Extra Features

  • Auto play the next song when the current song ends.

What I learned

  • Create a music player with HTML, CSS, and JavaScript.
  • HTMLAudioElement API
  • Custom styles for <input type="range">

How To Use

To clone and run this application, you'll need Git, Node.js and pnpm installed on your computer. From your command line:

# Clone this repository
git clone https://github.com/Hdoc1509/dev-challenges

# install all required dependencies
cd dev-challenges
pnpm install --filter "@hdoc/dev-challenges" --filter music-player...

# Run music-player in dev-mode
cd vanilla/music-player/
pnpm run dev --open