From 7c48de0ab40d52fc71409536e47547d564cda576 Mon Sep 17 00:00:00 2001
From: Tomeryac <89574827+Tomeryac@users.noreply.github.com>
Date: Sun, 12 Sep 2021 22:34:04 +0300
Subject: [PATCH 1/2] Update index.js
---
scripts/index.js | 131 +++++++++++++++++++++++++++++++++++++++++++----
1 file changed, 121 insertions(+), 10 deletions(-)
diff --git a/scripts/index.js b/scripts/index.js
index 6842c794..a3da4764 100644
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -4,30 +4,80 @@
*
* @param {String} songId - the ID of the song to play
*/
+
+ sort();
+for (let i = 0; i < player.songs.length; i++)
+{
+ const element = player.songs[i];
+ let div = createSongElement(element);
+ div.style.border = "thick solid #0000FF";
+ document.getElementById("songs").appendChild(div);
+}
+for (let i = 0; i < player.playlists.length; i++) {
+ const element = player.playlists[i];
+ let div = createPlaylistElement(element);
+ div.style.border = "thick solid #0000FF";
+ document.getElementById("playlists").appendChild(div);
+}
+function sort(){
+ player.songs.sort(function (a, b) {
+ if (a.title < b.title){
+ return -1; }
+ else if (a.title > b.title){
+ return 1; }
+ return 0;
+ });
+}
+function playS(song)
+{
+ console.log(`Playing ${song.title} from ${song.album} by ${song.artist} | ${convertDuration(song.duration)}.`);
+}
function playSong(songId) {
- // Your code here
+ var wantedSong = player.songs.find(res => res.id == songId); //finds the song with the ID
+ if(wantedSong===null){
+ throw new Error("ID not found"); //if id not exist, throw error
+ }
+ playS(wantedSong);
+ clear();
+ document.getElementById(songId).style.backgroundColor = 'red';
+}
+function clear()
+{
+ for (let i = 1; i <= player.songs.length; i++)
+ {
+ document.getElementById(i).style.backgroundColor = 'white';
+ }
}
-
/**
* Creates a song DOM element based on a song object.
*/
function createSongElement({ id, title, album, artist, duration, coverArt }) {
- const children = []
+
+ const children = [ title, album , artist , duration , coverArt];
const classes = []
- const attrs = { onclick: `playSong(${id})` }
- return createElement("div", children, classes, attrs)
+ const attrs = { onclick: `playSong(${id})`}
+ return createElement("div", children, classes, attrs,id)
}
/**
* Creates a playlist DOM element based on a playlist object.
*/
function createPlaylistElement({ id, name, songs }) {
- const children = []
+ const children = [name , songs.length ,"mintues : " + totaldurtion(songs)%60];
const classes = []
const attrs = {}
- return createElement("div", children, classes, attrs)
+ return createElement1("div", children, classes, attrs,id)
+}
+function totaldurtion(songs = [])
+{
+ let sum = 0 ;
+ for (let i = 0; i < songs.length; i++) {
+ const element = songs[i];
+ var wantedSong = player.songs.find(res => res.id == element);
+ sum += wantedSong.duration;
+ }
+ return sum;
}
-
/**
* Creates a new DOM element.
*
@@ -40,8 +90,69 @@ function createPlaylistElement({ id, name, songs }) {
* @param {Array} classes - the class list of the new element
* @param {Object} attributes - the attributes for the new element
*/
-function createElement(tagName, children = [], classes = [], attributes = {}) {
- // Your code here
+ function createElement1(tagName, children = [], classes = [], attributes = {},id) {
+ let tag = document.createElement(tagName);
+ for (let i = 0; i < children.length; i++) {
+ const element = children[i];
+ let p = document.createElement("p");
+ p.innerHTML = children[i];
+ tag.appendChild(p);
+ }
+ classes.forEach(element => {
+ tag.classlist.add(element);
+ });
+
+ for (const att in attributes) {
+ tag.setAttribute(att, attributes[att]);
+ }
+
+ return tag;
+
+ }
+function createElement(tagName, children = [], classes = [], attributes = {},id) {
+ let tag = document.createElement(tagName);
+ tag.setAttribute("id",id);
+ for (let i = 0; i < children.length; i++)
+ {
+ if(i+1 == children.length)
+ {
+ let img = document.createElement("img");
+ img.setAttribute("src" , children[i]);
+ tag.appendChild(img);
+ }
+ else
+ {
+ let p = document.createElement("p");
+ if(typeof children[i] === 'string')
+ p.innerHTML = children[i];
+ else
+ p.innerHTML = convertDuration(children[i]);
+ tag.appendChild(p);
+
+ }
+
+
+ }
+ classes.forEach(element => {
+ tag.classlist.add(element);
+ });
+
+ for (const att in attributes) {
+ tag.setAttribute(att, attributes[att]);
+ }
+
+ return tag;
+
}
+function convertDuration(duration)
+ {
+ let minutes=Math.floor(duration/60);
+ let seconds=duration%60;
+ if(minutes<10)
+ minutes="0"+minutes;
+ if(seconds<10)
+ seconds="0"+seconds;
+ return minutes+":"+seconds;
+ }
// You can write more code below this line
From 3ebd2685edfb6041fac806508ae6569b74d73ddb Mon Sep 17 00:00:00 2001
From: Tomeryac <89574827+Tomeryac@users.noreply.github.com>
Date: Sat, 18 Sep 2021 21:34:20 +0300
Subject: [PATCH 2/2] Tomer Yacobi final project mp3Dom
---
index.new.html | 4 +-
scripts/index.js | 2 +-
scripts/index.new.js | 325 ++++++++++++++++++++++++++++++++++++++++---
style.css | 72 +++++++++-
4 files changed, 378 insertions(+), 25 deletions(-)
diff --git a/index.new.html b/index.new.html
index eba39f17..a0b842a3 100644
--- a/index.new.html
+++ b/index.new.html
@@ -5,11 +5,13 @@
Awesome MP3 Player
+
Awesome Player!!!
+
Songs
diff --git a/scripts/index.js b/scripts/index.js
index a3da4764..1488117d 100644
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -10,7 +10,7 @@ for (let i = 0; i < player.songs.length; i++)
{
const element = player.songs[i];
let div = createSongElement(element);
- div.style.border = "thick solid #0000FF";
+ div.style.border = "thick solgreid #0000FF";
document.getElementById("songs").appendChild(div);
}
for (let i = 0; i < player.playlists.length; i++) {
diff --git a/scripts/index.new.js b/scripts/index.new.js
index c3a39c8e..21728179 100644
--- a/scripts/index.new.js
+++ b/scripts/index.new.js
@@ -1,11 +1,72 @@
-/**
+/**
* Plays a song from the player.
* Playing a song means changing the visual indication of the currently playing song.
*
* @param {Number} songId - the ID of the song to play
*/
function playSong(songId) {
- // Your code here
+ while (document.getElementById("main").firstChild) {
+ document.getElementById("main").removeChild(document.getElementById("main").lastChild);
+ }
+ let r = document.createElement("div");
+ let songPlayed;
+ player.songs.forEach(song => {
+ if(song.id == songId)
+ songPlayed = song;
+ });
+ const children = [{
+ content:"PLAYING",
+ type:'h1'
+ },{
+ content:songPlayed.title,
+ type:'p'
+ },{
+ content:songPlayed.album,
+ type:'p'
+ },{
+ content:songPlayed.artist,
+ type:'p'
+ },{
+ content:calculateDuration(songPlayed.duration),
+ type:'p'
+ },{
+
+ content:songPlayed.coverArt,
+ type:'img'
+ }]
+ children.forEach(child => {
+ t = document.createElement(child.type);
+ if(child.type == 'img'){
+ t.setAttribute("src", child.content);
+
+ t.setAttribute("width", "100%");
+
+ t.setAttribute("height", "100%");
+ }
+ t.textContent = child.content;
+ r.appendChild(t);
+ });
+ r.classList.add("card");
+ r.classList.add('w-50');
+ document.getElementById("main").appendChild(r);
+
+ setTimeout(function () {
+ for (let i = 0; i < player.songs.length; i++) {
+ const element = player.songs[i];
+
+ if (element.id == songId) {
+ if (i == player.songs.length-1){
+ playSong(player.songs[0].id);
+ }
+ else{
+ playSong(player.songs[i + 1].id);
+ }
+
+ }
+ }
+
+ },songPlayed.duration*1000)
+
}
/**
@@ -14,14 +75,49 @@ function playSong(songId) {
* @param {Number} songId - the ID of the song to remove
*/
function removeSong(songId) {
- // Your code here
+ while (document.getElementById("songs").firstChild) {
+ document.getElementById("songs").removeChild(document.getElementById("songs").lastChild);
+ }
+ for (let i = 0; i < player.songs.length; i++) {
+ const obj = player.songs[i];
+
+ if (obj.id== songId) {
+ player.songs.splice(i, 1);
+ }
+ }
+ while (document.getElementById("playlists").firstChild) {
+ document.getElementById("playlists").removeChild(document.getElementById("playlists").lastChild);
+ }
+for (let j = 0; j < player.playlists.length; j++) {
+ const playlist = player.playlists[j];
+ for (let i = 0; i < playlist.songs.length; i++) {
+ let song = playlist.songs[i];
+ if (song == songId)
+ playlist.songs.splice(i,1);
+ }
+ };
+ generateSongs();
+ generatePlaylists();
}
+
+
+
/**
* Adds a song to the player, and updates the DOM to match.
*/
function addSong({ title, album, artist, duration, coverArt }) {
- // Your code here
+ let id = uniqueId();
+ let newSong = {
+ id:id,
+ title:title,
+ album:album,
+ artist:artist,
+ duration:duration,
+ coverArt:coverArt
+ };
+ player.songs.push(newSong);
+createSongElement(newSong);
}
/**
@@ -30,9 +126,30 @@ function addSong({ title, album, artist, duration, coverArt }) {
*
* @param {MouseEvent} event - the click event
*/
-function handleSongClickEvent(event) {
- // Your code here
+ function uniqueId(){
+ let id =1;
+ player.songs.forEach(song => {
+ if (song.id>id) {
+ id = song.id;
+
+ }
+
+ });
+ return id+1;
}
+function handleSongClickEvent(event) {
+
+ if (event.target.textContent == "play") {
+ playSong(event.target.classList.item(0));
+ }
+ else{
+ removeSong(event.target.classList.item(0));
+ }
+ }
+
+
+
+
/**
* Handles a click event on the button that adds songs.
@@ -40,17 +157,58 @@ function handleSongClickEvent(event) {
* @param {MouseEvent} event - the click event
*/
function handleAddSongEvent(event) {
- // Your code here
+
+
+ addSong( {
+ title:document.getElementsByName("title")[0].value ,
+ album:document.getElementsByName("album")[0].value,
+ artist:document.getElementsByName("artist")[0].value,
+ duration:document.getElementsByName("duration")[0].value,
+ coverArt:document.getElementsByName("cover-art")[0].value
+ });
+
}
/**
* Creates a song DOM element based on a song object.
*/
function createSongElement({ id, title, album, artist, duration, coverArt }) {
- const children = []
- const classes = []
- const attrs = {}
- const eventListeners = {}
+ const children = [{
+ content:coverArt,
+ type:'img',
+ class:'card-img-top'
+ },{
+ content:title,
+ type:'h5',
+ class:'card-title'
+ },{
+ content:album,
+ type:'p',
+ class:'card-text'
+ },{
+ content:artist,
+ type:'p',
+ class:'card-text'
+ },{
+ content:duration,
+ type:'p',
+ class:'card-text'
+ },{
+ content: "play",
+ context:id ,
+ type:'button',
+ class:"btn btn-primary m-3"
+ },
+ {
+ content: "remove",
+ context:id,
+ type:'button',
+ class:"btn btn-primary m-3"
+
+ }]
+ const classes = ['card', 'w-50', 'm-3', 'song'];
+ const attrs = {};
+ const eventListeners = {click:handleSongClickEvent};
return createElement("div", children, classes, attrs, eventListeners)
}
@@ -58,11 +216,20 @@ function createSongElement({ id, title, album, artist, duration, coverArt }) {
* Creates a playlist DOM element based on a playlist object.
*/
function createPlaylistElement({ id, name, songs }) {
- const children = []
- const classes = []
- const attrs = {}
- const eventListeners = {}
- return createElement("div", children, classes, attrs, eventListeners)
+ const children = [{
+ content:name,
+ type:'p'
+ },{
+ content:songs.length,
+ type:'p'
+ },{
+ content:calculateDuration(playlistDuration(id)),
+ type:'p'
+ }];
+ const classes = ['card', 'w-50', 'playlist'];
+ const attrs = {};
+ const eventListeners = {};
+ return createElement("div", children, classes, attrs, eventListeners);
}
/**
@@ -79,21 +246,135 @@ function createPlaylistElement({ id, name, songs }) {
* @param {Object} eventListeners - the event listeners on the element
*/
function createElement(tagName, children = [], classes = [], attributes = {}, eventListeners = {}) {
- // Your code here
-}
+ let mainDiv = document.createElement(tagName);
+ let contentDiv = document.createElement('div');
+ contentDiv.classList.add('card-body');
+ children.forEach(child => {
+ t = document.createElement(child.type);
+ if(child.type == 'img'){
+ t.setAttribute("src", child.content);
+
+ // t.setAttribute("width", "100%");
+
+ // t.setAttribute("height", "100%");
+
+ t.classList.add(child.class);
+
+ mainDiv.appendChild(t);
+ }else if(child.type == 'button'){
+
+ t.textContent = child.content;
+
+ t.classList.add(child.context);
+
+
+ classArr = child.class.split(" ");
+ classArr.forEach(cls => {
+ t.classList.add(cls);
+ });
+
+ t.addEventListener("click",eventListeners["click"]);
+ }
+ else{
+ t.textContent = child.content;
+ t.classList.add(child.class);
+ }
+ if(child.type != 'img'){
+ contentDiv.appendChild(t);
+
+ }
+ mainDiv.appendChild(contentDiv);
+
+ });
+ classes.forEach(cls => {
+ mainDiv.classList.add(cls);
+ });
+
+ for(const property in attributes){
+ mainDiv.setAttribute(property, attributes[property]);
+ }
+ classes.forEach(cls => {
+ if(cls == "song")
+ document.getElementById("songs").appendChild(mainDiv);
+ if(cls == "playlist")
+ document.getElementById("playlists").appendChild(mainDiv);
+ });
+
+}
+function playlistDuration(id) {
+ let arr = getPlaylistAndSongIndex(id, 1);
+ let index = arr[0];
+ let sum = 0;
+ player.songs.forEach(song => {
+ player.playlists[index].songs.forEach(songID => {
+ if(song.id == songID){
+ sum += song.duration;
+ }
+ });
+ });
+ return sum;
+ }
+//a function that converts duration in sec to mm:ss format.
+function calculateDuration(duration){
+
+ mmDuration = Math.floor(duration / 60);
+ if(mmDuration < 10)
+ mmDuration = "0" + mmDuration;
+
+ ssDuration = duration - mmDuration * 60;
+ if(ssDuration < 10)
+ ssDuration = "0" + ssDuration;
+ return mmDuration+":"+ssDuration;
+}
+function getPlaylistAndSongIndex(playlistID, songID){
+ let indexOfSong = -1;
+ let indexOfPlaylist = -1;
+ for (let i = 0; i < player.playlists.length; i++) {
+ const playlist = player.playlists[i];
+ if(playlist.id == playlistID){
+ indexOfPlaylist = i;
+ for (let j = 0; j < playlist.songs.length; j++) {
+ const song = playlist.songs[j];
+ if(song == songID){
+ indexOfSong = j;
+ }
+ }
+ }
+ }
+ if(indexOfPlaylist == -1){
+ throw "playlist index does not exisst";
+ }
+ return [indexOfPlaylist,indexOfSong];
+}
/**
* Inserts all songs in the player as DOM elements into the songs list.
*/
function generateSongs() {
- // Your code here
-}
+ songs = player.songs;
+ songs.sort(function(a, b){
+ if(a.title < b.title) { return -1; }
+ if(a.title > b.title) { return 1; }
+ return 0;
+ })
+ songs.forEach(song => {
+ createSongElement(song);
+ });
+}
/**
* Inserts all playlists in the player as DOM elements into the playlists list.
*/
function generatePlaylists() {
- // Your code here
+ playlists = player.playlists;
+ playlists.sort(function(a, b){
+ if(a.name < b.name) { return -1; }
+ if(a.name > b.name) { return 1; }
+ return 0;
+ })
+ playlists.forEach(playlist => {
+ createPlaylistElement(playlist);
+ });
}
// Creating the page structure
@@ -101,4 +382,4 @@ generateSongs()
generatePlaylists()
// Making the add-song-button actually do something
-document.getElementById("add-button").addEventListener("click", handleAddSongEvent)
+document.getElementById("add-button").addEventListener("click", handleAddSongEvent)
\ No newline at end of file
diff --git a/style.css b/style.css
index f4645fe9..f39575e3 100644
--- a/style.css
+++ b/style.css
@@ -1 +1,71 @@
-/* Your code here */
+
+@import url('https://fonts.googleapis.com/css?family=Roboto');
+body {
+ background:url("https://www.iphonehacks.com/wp-content/uploads/2015/06/apple-music-logo.png")repeat;
+ }
+ p{
+ background:url("https://www.iphonehacks.com/wp-content/uploads/2015/06/apple-music-logo.png")repeat;
+padding: 3px;
+ border:solid 2px black;
+ font-weight: bold;
+ }
+/*
+
+* {
+ margin: 0;
+ padding: 0;
+ font-family: Arial, Helvetica, sans-serif;
+ list-style-type: none;
+ text-decoration: none;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -o-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+img {
+ max-width: 100%;
+}
+
+html, body {
+ height: 100%;
+}
+
+body {
+ background:url("https://www.iphonehacks.com/wp-content/uploads/2015/06/apple-music-logo.png")repeat;
+
+}
+h1 { color: red; font-family: 'Helvetica Neue', sans-serif; font-size: 110px; font-weight: bold; letter-spacing: -1px; line-height: 1; text-align: center; }
+
+
+#main{
+ background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS4eVA1fUpwZGOuiCyyNftJIS5jzSwLmpm7Nw&usqp=CAU")repeat;
+
+}
+.card {
+ position: relative;
+ background: black;
+ max-width: 500px;
+ margin: 20px auto;
+ box-shadow: 0px 0px 30px 2px #000;
+ align-content: center;
+}
+p{
+ color: red;
+ text-align: left;
+ font-weight: normal;
+ text-transform: uppercase;
+ letter-spacing: 0.1em;
+ margin: 5px 30px;
+}
+img{
+ display: block;
+ background:black;
+ color: white;
+ position: relative;
+ text-transform: uppercase;
+ letter-spacing: 0.1em;
+ text-align: center;
+ padding: 10px;
+ transition: 250ms;
+} */
\ No newline at end of file