Improving functions and adding other needed element

README.md

@@ -1,82 +1,42 @@
 # MP3 DOM
 
-The users of your MP3 player complained about it being inconvenient for regular (non-programmer) people. Time to build a GUI!
+This is my MP3 player that I did for this work I used Javascript, HTML and CSS. this is my weekend task of the course of FullStak developer. In this work I have some songs in my player but also it has function to add songs what you want. So in my project is three sections: Adding songs, Songs and Playlist. I trying to write comments in my test that will help to understand my logic and what I do in the code.
 
-Your task is to create a webpage that conveniently displays the songs and playlists in a player object. The player object will have the same structure as in your previous assignment.
 
-## General Instructions
+## Requirements!
 
-1. Fork this repo into your account.
-2. Clone the forked repo to your computer.
-3. Create a new git branch for your work.
-4. Complete the requirements.
-5. Submit your work.
-6. May the odds be ever in your favor!
+This is requirements that I had.
 
-## New Requirements!
 - There is now a section for adding new songs to the player. Make it work!
 - Add a play button to every song. Clicking it will play that song.
 - Add a remove button to every song. Clicking it will remove the song from the playlist.
 - There should be only one event listener on the entire songs list, that handles all play and remove events of songs.
-- You are given new template files to use: `index.new.html` and `index.new.js`.
-
-## Webpage Requirements
-
-Your webpage should contain 2 lists:
-
+-   The color of the durations of songs should reflect their length. A duration of less than 2 min will show green, and will be gradually redder until it is completely red for durations that are above 7 min.
+-   When a song is removed, all playlists in the page will also be updated.
+-   When adding a new song, the songs list will remain sorted by title.
 -   A list of the `songs` in the player, sorted by their titles
 -   A list of the `playlists` in the player, sorted by their names
 
+
 ### Songs
 
-Each song list item shall display the following details:
+Each song list item display the following details:
 
 -   song `title`
 -   `album` name
 -   `artist` name
 -   an image with the album's cover art (`coverArt`)
 -   song `duration` (in `mm:ss` format, of course)
 
-One song can be played at a time. There should be some indication of the currently playing song (the specific indication is up to you). Clicking on a song will change the indication of the currently playing song. We have already provided code that handles the click event for you.
+One song can be played at a time. There is indication of the currently playing song.
+
 
 ### Playlists
 
-Every playlist list item should display the following information:
+Every playlist list item display the following information:
 
 -   playlist `name`
 -   the number of songs in the playlist
 -   the total duration of the playlist
 
-## Bonus Requirements
-
--   After a song begins to play, it automatically switches to the next one when the song duration has passed.
--   The color of the durations of songs should reflect their length. A duration of less than 2 min will show green, and will be gradually redder until it is completely red for durations that are above 7 min.
--   When a song is removed, all playlists in the page will also be updated.
--   When adding a new song, the songs list will remain sorted by title.
--   Anything else you can think of...
-
-## Technical Instructions
-
-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`)
--   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.
-
-## Submission
-
-1. On GitHub, open a pull request from your branch to the main branch.
-2. **Do not merge the pull request!**
-3. Add the user `Cyber4sPopo` as collaborator to your repo.
-4. Submit a link to the pull request in Google Classroom.
-
-## Additional Remarks
 
--   **Avoid duplication!** Use JS functions and CSS classes wisely.
--   Maintain high coding standards. Keep your code readable, indented properly, commented and indicative.
--   Maintain a proper git workflow. Commit often, push often, write informative commit messages.
--   You are free to style your webpage however you like. Make it BEAUTIFUL!

index.html

@@ -9,9 +9,11 @@
         <script src="./scripts/index.js" defer></script>
     </head>
     <body>
+        <h1 class="heading" id="mainHeading">Songs</h1>
         <div id="songs">
             <!-- Generated songs go here -->
         </div>
+        <h1 class="heading">Playlists</h1>
         <div id="playlists">
             <!-- Generated playlists go here -->
         </div>

index.new.html

@@ -9,9 +9,9 @@
         <script src="./scripts/index.new.js" defer></script>
     </head>
     <body>
-        <h1>Awesome Player!!!</h1>
+        <h1>Awesome Player!</h1>
         <div id="add-section">
-            <h2>Add a new song</h2>
+            <h2 class="heading">Add a new song</h2>
             <div id="inputs">
                 <input name="title" placeholder="Title">
                 <input name="album" placeholder="Album">
@@ -22,7 +22,7 @@ <h2>Add a new song</h2>
             <button id="add-button">Add</button>
         </div>
         <div id="songs">
-            <h2>Songs</h2>
+            <h2 class="heading" id="mainHeading">Songs</h2>
             <div class="list">
                 <!-- <div class="song">
                     <div class="left">
@@ -44,7 +44,7 @@ <h2>Songs</h2>
             </div>
         </div>
         <div id="playlists">
-            <h2>Playlists</h2>
+            <h2 class="heading">Playlists</h2>
             <div class="list">
                 <!-- <div class="playlist">
                     <div class="left">

scripts/index.js

@@ -5,25 +5,41 @@
  * @param {String} songId - the ID of the song to play
  */
 function playSong(songId) {
-    // Your code here
+    for (let song of player.songs){
+    document.getElementById(song.id).style.background="GreenYellow";
+        if(song.id===songId){
+            document.getElementById(song.id).style.background="LimeGreen";
+        }
+    }
 }
-
 /**
  * Creates a song DOM element based on a song object.
  */
 function createSongElement({ id, title, album, artist, duration, coverArt }) {
-    const children = []
-    const classes = []
-    const attrs = { onclick: `playSong(${id})` }
+    const titleEL=createElement("p",[title],["titleOfSong"])
+    const albumEL=createElement("p",[album])
+    const artistEL=createElement("p",["Artist: "+artist],["artist"])
+    const durationEL=createElement("p",[toCorrectDuration(duration)],["durationOfSongs"])
+    durationEL.style.color=reflectColor(duration);
+    const coverArtURL=coverArt
+    const coverArtEL=createElement("img",[],["coverArtOfSong"],{ src : coverArtURL})
+    const textElement=createElement("div",[titleEL, albumEL, artistEL, durationEL],[])
+    const children = [coverArtEL, textElement]
+    const classes = ["song"]
+    const attrs = { onclick: `playSong(${id})`,cursor:"pointer",id: id }
     return createElement("div", children, classes, attrs)
 }
 
 /**
  * Creates a playlist DOM element based on a playlist object.
  */
-function createPlaylistElement({ id, name, songs }) {
-    const children = []
-    const classes = []
+ function createPlaylistElement({ id, name, songs }) {
+    const nameEL=createElement("p",[name],["NameOfPlaylist"])
+    const songsEl=createElement("p",["Number of songs in playlist: "+songs.length])
+    const durationOfPlaylist=toCorrectDuration(playlistDuration(songs))
+    const durationEL=createElement("p",[durationOfPlaylist],["durationOfSongs"])
+    const children = [nameEL, songsEl, durationEL]
+    const classes = ["playlist"]
     const attrs = {}
     return createElement("div", children, classes, attrs)
 }
@@ -40,8 +56,91 @@ 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
+    let el = document.createElement(tagName)
+    //Adding children
+    for(const child of children){
+        el.append(child);
+    }
+    //Adding classes
+    for(const cls of classes){
+        el.classList.add(cls);
+    }
+    //Adding attributes
+    for(const attr in attributes){
+        el.setAttribute(attr, attributes[attr])
+    }
+    return  el
+}
+
+
+function toCorrectDuration(seconds){ //transform duration for people
+    let mm;
+    if(Math.floor(seconds/60)<10){
+        mm=`0${Math.floor(seconds/60)}`;
+    }
+    else mm=`${Math.floor(seconds/60)}`;
+    let ss;
+    if(Math.floor(seconds%60)<10){
+         ss=`0${Math.floor(seconds%60)}`;
+    }
+    else ss=`${Math.floor(seconds%60)}`;
+    return mm+":"+ss;
+  }
+
+function playlistDuration(arrSongsId) {
+    let sumDuration=0;
+    for(let i=0;i<arrSongsId.length; i++){
+        sumDuration+=player.songs[songIndex(songById(arrSongsId[i]))].duration;
+    }
+    return sumDuration;
+}
+
+function songById(id){
+    let songObj=player.songs.find(x=> x.id===id);
+    if (songObj===undefined){
+      throw "Not a Valid ID"
+    }
+    return songObj;
 }
 
-// You can write more code below this line
+function songIndex(song){
+    let index=player.songs.indexOf(song);
+    return index
+}
+
+function sortArray(songA, songB){
+      return songA.title.localeCompare(songB.title);
+}
+
+function reflectColor(duration){
+    if(duration<=120){
+        return "lime"
+    }
+    else if(duration>=420){
+        return "red"
+    }
+    else{
+        let r=0;
+        let g=255;
+        let b=0;
+        let durationDifference=duration-120;
+        r+=Math.floor(durationDifference*0.85)
+        g-=Math.floor(durationDifference*0.85)
+        let rgbColor = `rgb(${r},${g},${b})`
+        return rgbColor
+    }
+}
+
+const songsListEl=document.getElementById("songs")
+player.songs.sort(sortArray)
+for(const song of player.songs){
+    const songEl=createSongElement(song)
+    songsListEl.append(songEl);
+}
+const playlistsListEl=document.getElementById("playlists")
+for(const playlist of player.playlists){
+    const playlistEl=createPlaylistElement(playlist)
+    playlistsListEl.append(playlistEl)
+}