Skip to content

A portfolio for a music streamming platform! The music player was made with pure JavaScript.

License

Notifications You must be signed in to change notification settings

Shellyda/music-player-pureJS

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

25 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Music Streaming Platform Portfolio

Screenshot 2023-12-22 at 01 06 52

Introduction

Greetings! I trust this message finds you well. In response to a recent challenge, I conceptualized and developed a fictional music streaming platform as a portfolio project. Despite time constraints preventing the implementation of all envisioned functionalities, all requirements outlined in the challenge were successfully addressed.

Project Overview

  • Application: Music Player
  • Portfolio Home: Index.html
  • JavaScript Code: Located in the elements folder; CSS code in css/style.player.css.
  • Media Assets: Music and images reside in the files and assets folders, respectively.
  • Navigation: Access the player page via buttons on other portfolio pages or navigate through the menu.
  • Responsiveness: Only the music player screen has responsive behavior.

Usage Instructions

  1. Explore the Player
  2. Portfolio Home
  3. JavaScript code in the elements folder; CSS in css/style.player.css.
  4. Media assets in the files and assets folders.

Note:

  • Interact with the player through buttons on portfolio pages.
  • Navigate seamlessly between pages using the menu.

Image gallery

Music Player screen Responsive look music player
About screen Experiences screen

Crafted with </> and <3, this project is more than code; it's an expression of creativity and passion for music.

No more talking, just press play!

Challenge Objectives

The challenge involved creating a music player with the following features:

  • Play, pause, forward, and rewind buttons
  • Progress bar and tempo control

Prerequisites

To tackle this challenge, familiarity with the following is essential:

  • Arrays and iteration with functions
  • DOM: Events, Listeners, query methods, and element manipulation
  • Object-oriented programming with ES6 classes

Challenge Resources

Gists

Additional Resources

Date: 02/12/20

Organization: CITi UFPE | PTA 2020.2 | JS Challenge


Music Player Logo