https://github.com/shellyda/music-player-purejs
A portfolio for a music streamming platform! The music player was made with pure JavaScript.
https://github.com/shellyda/music-player-purejs
css3 es6-javascript html-css-javascript html5 javascript js music-player pure-javascript slick-slider
Last synced: about 2 months ago
JSON representation
A portfolio for a music streamming platform! The music player was made with pure JavaScript.
- Host: GitHub
- URL: https://github.com/shellyda/music-player-purejs
- Owner: Shellyda
- License: mit
- Created: 2020-12-02T17:58:02.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2023-12-22T04:15:12.000Z (over 2 years ago)
- Last Synced: 2025-05-14T18:11:34.092Z (about 1 year ago)
- Topics: css3, es6-javascript, html-css-javascript, html5, javascript, js, music-player, pure-javascript, slick-slider
- Language: JavaScript
- Homepage: https://shellyda.github.io/music-player-pureJS/
- Size: 28.7 MB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Music Streaming Platform Portfolio
## 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](https://shellyda.github.io/music-player-pureJS/player.html)
- **Portfolio Home:** [Index.html](https://shellyda.github.io/music-player-pureJS/)
- **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](https://shellyda.github.io/Music-Player-js/player.html)
2. [Portfolio Home](https://shellyda.github.io/Music-Player-js/)
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!*
- [Portfolio Link](https://shellyda.github.io/music-player-pureJS/)
## 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
- [Mockup](https://www.figma.com/file/UWCyOMrpFhyrVDiYHDS3By/desafio-js?node-id=0%3A1)
- [Basic Example](https://citi-player.netlify.com/)
# Gists
- [Constants and Variables](https://gist.github.com/jrmmendes/51c5e833860fdc942d7f3e5f1fb17d3a#file-const-var-let-md)
- [DOM and Queries with JS](https://gist.github.com/jrmmendes/51c5e833860fdc942d7f3e5f1fb17d3a#file-document-object-model-md)
- [Events](https://gist.github.com/jrmmendes/51c5e833860fdc942d7f3e5f1fb17d3a#file-events-md)
# Additional Resources
- [MDN Web Docs](https://developer.mozilla.org/pt-BR)
- [Notion](https://www.notion.so/Js-2-a66831b9b73c4ecd8f4c4d3e8ce41f51)
**Date:** 02/12/20
**Organization:** CITi UFPE | PTA 2020.2 | JS Challenge
----
