diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 00000000..ba515d0e --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,16 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + + { + "type": "pwa-chrome", + "request": "launch", + "name": "Launch Chrome against localhost", + "url": "http://127.0.0.1:5500/index.html", + "webRoot": "${workspaceFolder}" + } + ] +} \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..6f3a2913 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/README.md b/README.md index d12d8eb8..4065bb08 100644 --- a/README.md +++ b/README.md @@ -53,7 +53,7 @@ You are provided with a template for your project: - an HTML file (`index.html`) - a linked, empty CSS file (`style.css`) - a linked JS script with a sample `player` object (`player.js`) -- a linked JS script with a template for your code (`index.js`) +- 7ya linked JS script with a template for your code (`index.js`) - an `images` folder with the webpage icon and song cover art The HTML defines the basic structure of the page. There are 2 container elements - one for the songs and one for the playlists. You may add more structural elements to the HTML (headings etc.), but the songs and playlists themselves must be generated using JS, based on the `player` object. diff --git a/index.html b/index.html index c55fb482..1481e6ea 100644 --- a/index.html +++ b/index.html @@ -9,11 +9,23 @@ +

Awesome Player!!!

+
+

Add a new song

+
+ + + + + +
+ +
- +
- +
diff --git a/scripts/index.js b/scripts/index.js index 6842c794..9607dd53 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -1,47 +1,288 @@ +// converting duration +const convertDuration = (duration) => { + const minutes = Math.floor(duration / 60); + let seconds = duration % 60; + if (seconds < 10) { + seconds = `0${seconds}`; + } + return `${minutes}:${seconds}`; +} +let runLoop; +// is playSong is runing ? +plrun = false; +const getIdForPlaysong = (id) =>{ + return playSong(Math.abs(id.path[1].id)) +} +function playSong(id) { + // make all song background white + for (song of player.songs){ + document.getElementById(song.id).style.backgroundColor = "white"; + } + if(plrun){ + document.getElementById(id).style.backgroundColor = "white"; + clearTimeout(runLoop); + plrun = false; + } + if (id === player.songs.length+1) { + id = 1; + } + if(plrun === false){ + let changeButton = document.getElementsByClassName("play"); + console.log(changeButton); + changeButton.innerHTML = "⏸"; + + document.getElementById(id).style.backgroundColor = "#af934c"; + + plrun = true; + // after 3 sec or duration of song turn off song + runLoop = setTimeout(() => { + plrun = false; + document.getElementById(id).style.backgroundColor = "white"; + playSong(id+ 1); + + }, 3000); //duration of song here + changeButton.innerHTML = "▶"; + } +} /** - * Plays a song from the player. - * Playing a song means changing the visual indication of the currently playing song. + * Removes a song from the player, and updates the DOM to match. * - * @param {String} songId - the ID of the song to play + * @param {Number} songId - the ID of the song to remove */ -function playSong(songId) { - // Your code here +function removeSong(songId) { + console.log(songId.path[1]); + const song = player.songs[songId.path[1].id] + let numberOfElementToRemove = 1; + player.songs.splice(songId.path[1].id , numberOfElementToRemove); + document.getElementById(songId.path[1].id).remove(); + console.log(player.songs); } - /** - * Creates a song DOM element based on a song object. + * Adds a song to the player, and updates the DOM to match. */ -function createSongElement({ id, title, album, artist, duration, coverArt }) { - const children = [] - const classes = [] - const attrs = { onclick: `playSong(${id})` } - return createElement("div", children, classes, attrs) -} +document.getElementById("add-button").addEventListener("click", function () { + let ele = {}; + let id = player.songs.length + 1; + ele.id = id; + let title = document.querySelectorAll('input[name = title]')[0].value; + ele.title = title; + let album = document.querySelectorAll('input[name = album]')[0].value; + ele.album = album; + let artist = document.querySelectorAll('input[name = artist]')[0].value; + ele.artist = artist; + let duration = document.querySelectorAll('input[name = duration]')[0].value; + ele.duration = duration; + duration = document.querySelectorAll('input[name = duration]')[0].value; + let coverArt = document.querySelectorAll('input[name = cover-art]')[0].value; + ele.coverArt = coverArt; + addSong({ + id, + title, + album, + artist, + duration, + coverArt + }); + // make the input ready for new song + document.querySelectorAll('input[name = artist]')[0].value = ''; + document.querySelectorAll('input[name = duration]')[0].value = ''; + document.querySelectorAll('input[name = cover-art]')[0].value = ''; + document.querySelectorAll('input[name = album]')[0].value = ''; + document.querySelectorAll('input[name = title]')[0].value = ''; +}); +function addSong({ + id, + title, + album, + artist, + duration, + coverArt +}) { + let allSongs = player.songs; + allSongs.push({ + id, + title, + album, + artist, + duration, + coverArt + }); + printaSong(id, title, album, artist, duration, coverArt); +} /** - * Creates a playlist DOM element based on a playlist object. + * Acts on a click event on an element inside the songs list. + * Should handle clicks on play buttons and remove buttons of songs. + * + * @param {MouseEvent} event - the click event */ -function createPlaylistElement({ id, name, songs }) { - const children = [] - const classes = [] - const attrs = {} - return createElement("div", children, classes, attrs) +function handleSongClickEvent(event) { + } /** - * Creates a new DOM element. - * - * Example usage: - * createElement("div", ["just text", createElement(...)], ["nana", "banana"], {id: "bla"}) + * Handles a click event on the button that adds songs. * - * @param {String} tagName - the type of the element - * @param {Array} children - the child elements for the new element. - * Each child can be a DOM element, or a string (if you just want a text element). - * @param {Array} classes - the class list of the new element - * @param {Object} attributes - the attributes for the new element + * @param {MouseEvent} event - the click event */ -function createElement(tagName, children = [], classes = [], attributes = {}) { - // Your code here +function handleAddSongEvent(event) { + // Your code here } +// gives platlist duration +function playlistDuration(id) { + const foundPlaylist = player.playlists.find(currPlaylist => currPlaylist.id === id); + + // Reduce function to sum all the song durations, by finding each of them, and then adding to the sum + return foundPlaylist.songs.reduce((sum, currSong) => + sum + player.songs.find(song => song.id === currSong).duration, 0); +} + +function createSongElement({ + id, + title, + artist, + duration, + coverArt +}) { + const colored = (duration) => { + return duration < 600 ? 'color:green' : 'color:red'; + } + // const classes = []; + const getId = createElement('p', [id]); + const titleSong = createElement('p',[title]); + const artistEl = createElement("p", [artist]); + let newDuration = convertDuration(duration) + const durationEl = createElement("p", [newDuration], ["duration", "short-duration"], { + style: colored(duration) + }, {}); + const coverImageArtUrl = coverArt; + const imgEl = createElement("img", [], ["album-art"], { + src: coverImageArtUrl + }); + const attrs = { + // onclick: `playSong(${id})`, + id, + class: `songs` + }; + + const playButton = createElement('button', ["▶"],['play']); + playButton.addEventListener("click", getIdForPlaysong); + const removeButton = createElement('button', ["❌"], ['remove']); + removeButton.addEventListener("click", removeSong); + // classes.push("songs"); + return createElement("div", [getId, "Title: ",titleSong , "Artist: ", artistEl, "Duration: ", durationEl, imgEl,removeButton, playButton], [], attrs, []); +} + + +function createPlaylistElement({ + id, + name, + songs = [] +}) { + const children = []; + const classes = []; + const attrs = {}; + const idEl = createElement("span", ["" + id], ["id"]); + const playListName = createElement("p", [name]); + const PLsongs = createElement("p", [songs]); + const durationEl = createElement("p", ["" + convertDuration(playlistDuration(id))], ["duration", "short-duration"]); + classes.push("playlist") + children.push(idEl, "Play list Name: ", playListName, 'songs: ', PLsongs, " time: ", durationEl); + + return createElement("div", children, classes, attrs, ); + -// You can write more code below this line +} + +function createElement(tagName, children = [], classes = [], attributes = {}, ) { + const el = document.createElement(tagName); + + // Children + for (const child of children) { + el.append(child); + } + + // Classes + for (const cls of classes) { + el.classList.add(cls); + } + + // Attributes + for (const attr in attributes) { + el.setAttribute(attr, attributes[attr]); + } + + return el; +} +// sorting songs +const sortBySong = () => { + player.songs.sort((a, b) => (a.title > b.title) * 2 - 1); +} +// sorting platlists +const sortByPlayList = () => { + player.playlists.sort((a, b) => (a.title > b.title) * 2 - 1); +} +// printing all songs +const printAllSongs = (id) => { + const songPrint = document.getElementById("songs"); + + for (let song of player.songs) { + const { + title, + album, + artist, + duration = duration, + id, + coverArt + } = song; + const songElemnt = createSongElement({ + id, + title, + album, + artist, + duration, + coverArt + }); + songPrint.appendChild(songElemnt); + } + +} + +// printing all plalysts +const printAllPlaylists = () => { + const playlistPrint = document.getElementById("playlists"); + + for (let playlist of player.playlists) { + const { + id, + name, + songs + } = playlist; + const playlistElem = createPlaylistElement({ + id, + name, + songs + }); + playlistPrint.append(playlistElem); + } +} + +const printaSong = (id, title, album, artist, duration, coverArt) => { + const songPrint = document.getElementById("songs"); + let song = ''; + const songElemnt = createSongElement({ + id, + title, + album, + artist, + duration, + coverArt + }); + console.log(song) + songPrint.appendChild(songElemnt) +} +// calling functions +sortBySong(); +printAllSongs(); +printAllPlaylists(); +document.getElementById("add-button").addEventListener("click", handleAddSongEvent); \ No newline at end of file diff --git a/scripts/player.js b/scripts/player.js index 5a85f825..059a8c43 100644 --- a/scripts/player.js +++ b/scripts/player.js @@ -62,3 +62,5 @@ const player = { { id: 5, name: "Israeli", songs: [4, 5] }, ], } + + diff --git a/style.css b/style.css index f4645fe9..d7b0363c 100644 --- a/style.css +++ b/style.css @@ -1 +1,68 @@ -/* Your code here */ +html, +body { + text-align: center; + margin: 0px; + padding: 0px; +} +h1 { + text-align: center; + font-family: fantasy; + +} + +#songs { + display: flex; + grid-template-columns: 100px 50px 100px; + grid-template-rows: 80px auto 80px; + column-gap: 100px; + row-gap: 15px; + flex-wrap: wrap; + margin: auto; + margin-left: 10%; +} +.songs { + border: 1px solid black; + box-shadow: 10px 10px grey; + width: 272px; + padding: 48px; +} +.playlist { + border: 1px solid black; + width: 380px; + height: 100px; + margin: auto; + display: inline-table; +} +#add-section { + background: whitesmoke; + border: 1px solid; + box-shadow: 10px 10px grey; + width: 497px; + margin: auto; + margin-bottom: 30px; +} +#add-button { + width: 100px; + height: 50px; + font-family: fangsong; +} +#playlists{ + padding: 100px; +} +.playlist > p { + +} +.remove { + display: inline-block; + border: 1px solid black; + position: relative; + float: left; + margin-left: -50px; + margin-top: -306px; +} +img{ + width: 100%; + height: 61%; +} + /* .id { + visibility: hidden; */