diff --git a/index.html b/index.html
index c55fb482..aae65b9f 100644
--- a/index.html
+++ b/index.html
@@ -9,9 +9,14 @@
         <script src="./scripts/index.js" defer></script>
     </head>
     <body>
+        
+       
         <div id="songs">
-            <!-- Generated songs go here -->
+           <header> Mp3 Player </header>
+                <!-- Generated songs go here -->
+
         </div>
+        <br>
         <div id="playlists">
             <!-- Generated playlists go here -->
         </div>
diff --git a/index.new.html b/index.new.html
index eba39f17..3a44588b 100644
--- a/index.new.html
+++ b/index.new.html
@@ -9,20 +9,9 @@
         <script src="./scripts/index.new.js" defer></script>
     </head>
     <body>
-        <h1>Awesome Player!!!</h1>
-        <div id="add-section">
-            <h2>Add a new song</h2>
-            <div id="inputs">
-                <input name="title" placeholder="Title">
-                <input name="album" placeholder="Album">
-                <input name="artist" placeholder="Artist">
-                <input name="duration" placeholder="Duration (mm:ss)">
-                <input name="cover-art" placeholder="Cover art link">
-            </div>
-            <button id="add-button">Add</button>
-        </div>
-        <div id="songs">
-            <h2>Songs</h2>
+        <div>
+                <div id="songs">
+            <h2>Mp3 Player</h2>
             <div class="list">
                 <!-- <div class="song">
                     <div class="left">
@@ -57,5 +46,19 @@ <h2>Playlists</h2>
                 </div> -->
             </div>
         </div>
+        <div id="add-section" class="add-song">
+            <h2>Add a new song</h2>
+            <div id="inputs">
+                <input name="title" placeholder="Title" id="title" />
+                                <input name="album" placeholder="Album" id="album" />
+                                <input name="artist" placeholder="Artist" id="artist" />
+                                <input name="duration" placeholder="Duration (mm:ss)" id="duration" />
+                                <input name="cover-art" placeholder="Cover art link" id="cover-art" />
+                
+            </div>
+            <button id="add-button">Add</button>
+        </div>
+
+    </div>
     </body>
 </html>
diff --git a/scripts/index.js b/scripts/index.js
index 6842c794..0868a749 100644
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -4,17 +4,30 @@
  *
  * @param {String} songId - the ID of the song to play
  */
-function playSong(songId) {
-    // Your code here
+
+ function playSong(songId) {
+    for (let song of player.songs) {
+        document.getElementById("song" + song.id).classList.remove("playing")
+        if (song.id === songId) {
+            document.getElementById("song" + song.id).classList.add("playing")
+        }
+    }
 }
 
 /**
  * Creates a song DOM element based on a song object.
  */
 function createSongElement({ id, title, album, artist, duration, coverArt }) {
-    const children = []
+    const children = [
+        createElement("img", [], [], { src: coverArt }),
+        createElement("span", title +" | ", [], {}),
+        createElement("span", album+" | ", [], {}),
+        createElement("span", artist+" | ", [], {}),
+        createElement("span", durationFormat(duration), ["duration"], {}, ),
+        
+    ]
     const classes = []
-    const attrs = { onclick: `playSong(${id})` }
+    const attrs = { onclick: `playSong(${id})`, id: "song" + id }
     return createElement("div", children, classes, attrs)
 }
 
@@ -22,7 +35,11 @@ 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 children = [
+        createElement("span", name+" | ", [], {}),
+        createElement("span", [songs.length], [], {}),
+        createElement("span", playlistDuration(id), ["duration"], {}),
+    ]
     const classes = []
     const attrs = {}
     return createElement("div", children, classes, attrs)
@@ -34,14 +51,75 @@ function createPlaylistElement({ id, name, songs }) {
  * Example usage:
  * createElement("div", ["just text", createElement(...)], ["nana", "banana"], {id: "bla"})
  *
- * @param {String} tagName - the type of the element
- * @param {Array} children - the child elements for the new element.
+ * @param {String} tagName - the type of the element: for example- p,h1,div...
+ * @param {Array} children - the child elements for the new element: for example- assume ew have <ul> his children <li>
  *                           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
  */
 function createElement(tagName, children = [], classes = [], attributes = {}) {
-    // Your code here
+    const element = document.createElement(tagName)
+    for (let child of children) {
+        element.append(child)
+    }
+    for (let name of classes) {
+        element.classList.add(name)
+    }
+    for (let attribute in attributes) {
+        element.setAttribute(attribute, attributes[attribute])
+    }
+    return element
 }
 
 // You can write more code below this line
+
+function durationFormat(duration) {
+    //converting from seconds to mm:ss format
+    let minutes = Math.floor(duration / 60)
+    let seconds = duration % 60
+    if (minutes < 10 && seconds < 10) return "0" + minutes + ":" + "0" + seconds
+    else if (minutes < 10) return "0" + minutes + ":" + seconds
+    else if (seconds < 10) return minutes + ":" + "0" + seconds
+    else return minutes + ":" + seconds
+}
+
+function playlistDuration(id) {
+    let correctPlaylist = findPlaylistById(id) //correctPlaylist contain the wanted playlist
+    let saveSongId = 0,
+        sum = 0
+    for (let i = 0; i < correctPlaylist.songs.length; i++) {
+        //run on the songs array inside this playlist
+        saveSongId = correctPlaylist.songs[i]
+        for (let j = 0; j < player.songs.length; j++) {
+            //run on the songs array
+            if (player.songs[j].id === saveSongId) sum += player.songs[j].duration
+        }
+    }
+    return durationFormat(sum)
+}
+
+function findPlaylistById(id) {
+    //Get a playlist id and return the wanted playlist by his id
+    let correctPlaylist
+    for (let i = 0; i < player.playlists.length; i++) {
+        //run on playlists array
+        if (id === player.playlists[i].id) correctPlaylist = player.playlists[i]
+    }
+    return correctPlaylist
+}
+
+const elemHtml = document.getElementById("songs")
+const elemHtml1 = document.getElementById("playlists")
+
+player.playlists.sort((playlistA, playlistB) => playlistA.name.localeCompare(playlistB.name))
+player.songs.sort((songA, songB) => songA.title.localeCompare(songB.title))
+
+for (let i = 0; i < player.songs.length; i++) {
+    //songs
+    elemHtml.append(createSongElement(player.songs[i]))
+}
+
+for (let i = 0; i < player.playlists.length; i++) {
+    //playlists
+    elemHtml1.append(createPlaylistElement(player.playlists[i]))
+}
\ No newline at end of file
diff --git a/scripts/index.new.js b/scripts/index.new.js
index c3a39c8e..4e95ce2e 100644
--- a/scripts/index.new.js
+++ b/scripts/index.new.js
@@ -4,24 +4,66 @@
  *
  * @param {Number} songId - the ID of the song to play
  */
-function playSong(songId) {
-    // Your code here
+ function playSong(songId) {
+    let divAllSong = document.getElementsByClassName("child") //the div that wrap of the songs
+    for (let divSong of divAllSong) {
+
+        divSong.style.color = "black"
+    }
+    const currentSong = document.getElementById(songId) //the left green mark when song playing
+
+    currentSong.style.color = "white"
 }
+//adding the event listener to the songs list
+let divOfAllSongs = document.getElementById("songs")
+divOfAllSongs.addEventListener("click", (e) => {
+    if (e.target.className === "play-song-button") {
+        playSong(e.target.parentElement.id)
+    } else if (e.target.className === "remove-song-button") {
+        removeSongFromPlayer(e.target.parentElement.id)
+        const divSong = e.target.parentElement
+        divOfAllSongs.removeChild(divSong)
+    }
+})
 
 /**
  * Removes a song from the player, and updates the DOM to match.
  *
  * @param {Number} songId - the ID of the song to remove
  */
-function removeSong(songId) {
-    // Your code here
-}
+// function removeSong(songId) {
+//     // Your code here
+// }
 
 /**
  * Adds a song to the player, and updates the DOM to match.
  */
-function addSong({ title, album, artist, duration, coverArt }) {
-    // Your code here
+// function addSong({ title, album, artist, duration, coverArt }) {
+//     // Your code here
+// }
+//adding a song
+const addButton = document.getElementById("add-button")
+addButton.addEventListener("click", addSong)
+function addSong(e) {
+    e.preventDefault()
+    const divAllSongs = document.getElementById("songs")
+    const idVal = generateId()
+    const titleVal = document.getElementById("title").value
+    const albumVal = document.getElementById("album").value
+    const artistVal = document.getElementById("artist").value
+    const durationVal = covertFormatToNumber(document.getElementById("duration").value)
+    const coverArtVal = document.getElementById("cover-art").value
+    let songa = {
+        id: idVal,
+        title: titleVal,
+        album: albumVal,
+        artist: artistVal,
+        duration: durationVal,
+        coverArt: coverArtVal,
+    }
+    player.songs.push(songa)
+    let song = createSongElement(songa)
+    divAllSongs.append(song)
 }
 
 /**
@@ -47,22 +89,32 @@ function handleAddSongEvent(event) {
  * 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 = {}
-    return createElement("div", children, classes, attrs, eventListeners)
+    const children = [
+        createElement("img", [], ["border-Img"], { src: coverArt }),
+        createElement("span",  " " + title +" | ", [], {}),
+        createElement("span",  album + " | ", [], {}),
+        createElement("span",  artist + "  ", [], {}),
+        createElement("span",  durationFormat(duration), ["duration"], {}),
+        createElement("button", ["▶️"], ["play-song-button"], {}),
+        createElement("button", ["❌"], ["remove-song-button"], {}),
+    ]
+    const classes = ["child"]
+    const attrs = { id: "song" + id, title: "title" + title }
+    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 = []
+    const children = [
+        createElement("span",  name + " | ", [], {}),
+        createElement("span",  [songs.length]+ " songs  ", [], {}),
+        createElement("span",  playlistDuration(id), ["duration"], {}),
+    ]
+    const classes = ["child"]
     const attrs = {}
-    const eventListeners = {}
-    return createElement("div", children, classes, attrs, eventListeners)
+    return createElement("div", children, classes, attrs)
 }
 
 /**
@@ -79,9 +131,82 @@ function createPlaylistElement({ id, name, songs }) {
  * @param {Object} eventListeners - the event listeners on the element
  */
 function createElement(tagName, children = [], classes = [], attributes = {}, eventListeners = {}) {
-    // Your code here
+    const element = document.createElement(tagName)
+    for (let child of children) {
+        element.append(child)
+    }
+    for (let name of classes) {
+        element.classList.add(name)
+    }
+    for (let attribute in attributes) {
+        element.setAttribute(attribute, attributes[attribute])
+    }
+    return element
+}
+
+///////////////////////////////////--- All my help functions(start) ---//////////////////////////////////////////////////////////
+function removeSongFromPlayer(songId) {
+    for (let playlist of player.playlists) {
+        for (let i = 0; i <= playlist.songs.length; i++) {
+            if (playlist.songs[i] == songId) {
+                playlist.songs.splice(i, 1)
+            }
+        }
+    }
 }
 
+function covertFormatToNumber(duration) {
+    const minutes = Number(duration.split(":")[0]) * 60
+    const seconds = Number(duration.split(":")[1])
+    return minutes + seconds
+}
+
+function durationFormat(duration) {
+    //converting from seconds to mm:ss format
+    const minutes = Math.floor(duration / 60)
+    const seconds = duration % 60
+    if (minutes < 10 && seconds < 10) return "0" + minutes + ":" + "0" + seconds
+    else if (minutes < 10) return "0" + minutes + ":" + seconds
+    else if (seconds < 10) return minutes + ":" + "0" + seconds
+    else return minutes + ":" + seconds
+}
+
+function playlistDuration(id) {
+    const correctPlaylist = findPlaylistById(id) //correctPlaylist contain the wanted playlist
+    let saveSongId = 0,
+        sum = 0
+    for (let i = 0; i < correctPlaylist.songs.length; i++) {
+        //run on the songs array inside this playlist
+        saveSongId = correctPlaylist.songs[i]
+        for (let j = 0; j < player.songs.length; j++) {
+            //run on the songs array
+            if (player.songs[j].id === saveSongId) sum += player.songs[j].duration
+        }
+    }
+    return durationFormat(sum)
+}
+
+function findPlaylistById(id) {
+    //Get a playlist id and return the wanted playlist by his id
+    let correctPlaylist
+    for (let i = 0; i < player.playlists.length; i++) {
+        //run on playlists array
+        if (id === player.playlists[i].id) correctPlaylist = player.playlists[i]
+    }
+    return correctPlaylist
+}
+
+function generateId() {
+    //the function return the biggest ID from thw array
+    let max = player.songs[0].id
+    for (let i = 0; i < player.songs.length; i++) {
+        //run on songs or playlists array
+        if (max < player.songs[i].id) max = player.songs[i].id
+    }
+    return max + 1
+}
+///////////////////////////////////--- All my help functions(end) ---//////////////////////////////////////////////////////////
+
 /**
  * Inserts all songs in the player as DOM elements into the songs list.
  */
@@ -101,4 +226,20 @@ generateSongs()
 generatePlaylists()
 
 // Making the add-song-button actually do something
-document.getElementById("add-button").addEventListener("click", handleAddSongEvent)
+// document.getElementById("add-button").addEventListener("click", handleAddSongEvent)//I did it in line 45
+
+const songsElement = document.getElementById("songs")
+const playlistsElement = document.getElementById("playlists")
+
+player.playlists.sort((playlistA, playlistB) => playlistA.name.localeCompare(playlistB.name)) //sort the songs
+player.songs.sort((songA, songB) => songA.title.localeCompare(songB.title)) //sort the playlists
+
+for (let i = 0; i < player.songs.length; i++) {
+    // run on songs array
+    songsElement.append(createSongElement(player.songs[i]))
+}
+
+for (let i = 0; i < player.playlists.length; i++) {
+    // run on playlists array
+    playlistsElement.append(createPlaylistElement(player.playlists[i]))
+}
\ 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..7ab7bf9f 100644
--- a/style.css
+++ b/style.css
@@ -1 +1,62 @@
 /* Your code here */
+
+.playing {
+    color: rgb(15, 187, 178);
+}
+
+body {
+    background-color: rgba(49, 160, 141, 0.938);
+    font-weight: bold;
+    font-size: 20px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: center;
+    flex-wrap: wrap-reverse;
+}
+
+img {
+    width: 80px;
+    height: 80px;
+    border-radius: 5%;
+    border: solid whitesmoke;
+    
+}
+
+#list {
+    display: flex;
+    justify-content: start;
+    flex-direction: column;
+    align-items: center;
+    line-height: 1.5rem;
+}
+
+.duration {
+    float: right;
+}
+
+div {
+
+    border-color:white;
+    border-style: double;
+    border-width: 1px;
+    
+}
+
+header {
+    font-size: 60px;
+    text-align: center;
+}
+
+.play-song-button{
+    float: right;
+}
+
+.remove-song-button{
+    float: right;
+}
+h2 {
+
+    font-family: 60px;
+    text-align: center;
+}
