diff --git a/images/image.jpg b/images/image.jpg
new file mode 100644
index 00000000..7bc58456
Binary files /dev/null and b/images/image.jpg differ
diff --git a/index.html b/index.html
index c55fb482..23ff8bd3 100644
--- a/index.html
+++ b/index.html
@@ -9,8 +9,10 @@
         <script src="./scripts/index.js" defer></script>
     </head>
     <body>
+        <div id="main"></div>
         <div id="songs">
             <!-- Generated songs go here -->
+            <div id="songsTop"></div>
         </div>
         <div id="playlists">
             <!-- Generated playlists go here -->
diff --git a/index.new.html b/index.new.html
index eba39f17..1ea14c47 100644
--- a/index.new.html
+++ b/index.new.html
@@ -5,25 +5,29 @@
         <title>Awesome MP3 Player</title>
         <link rel="shortcut icon" type="image/x-icon" href="./images/icon.png" />
         <link rel="stylesheet" href="./style.css">
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
         <script src="./scripts/player.js"></script>
         <script src="./scripts/index.new.js" defer></script>
     </head>
-    <body>
+    <body style="background-color: bisque;">
         <h1>Awesome Player!!!</h1>
+        <div id="main">
+            <h1>MP3</h1>
+        </div>
         <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">
+                <input class="form-control m-5 w-50" name="title" placeholder="Title">
+                <input class="form-control m-5 w-50" name="album" placeholder="Album">
+                <input class="form-control m-5 w-50" name="artist" placeholder="Artist">
+                <input class="form-control m-5 w-50" name="duration" placeholder="Duration (mm:ss)">
+                <input class="form-control m-5 w-50"name="cover-art" placeholder="Cover art link">
             </div>
-            <button id="add-button">Add</button>
+            <button class="btn m-2 w-10 btn-outline-secondary" id="add-button">ADD</button>
         </div>
         <div id="songs">
             <h2>Songs</h2>
-            <div class="list">
+            <div id = "songsList" class="list">
                 <!-- <div class="song">
                     <div class="left">
                         <img class="cover-art" src="./images/cover_art/jinjer_vortex.jpg">
@@ -45,7 +49,7 @@ <h2>Songs</h2>
         </div>
         <div id="playlists">
             <h2>Playlists</h2>
-            <div class="list">
+            <div id="playlistsList" class="list">
                 <!-- <div class="playlist">
                     <div class="left">
                         <span class="name">Metal</span>
diff --git a/scripts/index.js b/scripts/index.js
index 6842c794..bc324b1a 100644
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -4,26 +4,98 @@
  *
  * @param {String} songId - the ID of the song to play
  */
+//a function that gets a song id and displaying in the browser.
 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: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.innerHTML = child.content;
+        r.appendChild(t);
+    });
+    r.classList.add("card");
+    document.getElementById("main").appendChild(r);
+    console.log(songPlayed);
 }
 
 /**
  * Creates a song DOM element based on a song object.
  */
+//a function that gets a song object and creates a div containing the song's details.
 function createSongElement({ id, title, album, artist, duration, coverArt }) {
-    const children = []
-    const classes = []
+    const children = [{
+        content:title,
+        type:'p'
+    },{
+        content:album,
+        type:'p'
+    },{
+        content:artist,
+        type:'p'
+    },{
+        content:calculateDuration(duration),
+        type:'p'
+    },{
+        content:coverArt,
+        type:'img'
+    }]
+    const classes = ['card', 'song'];
     const attrs = { onclick: `playSong(${id})` }
     return createElement("div", children, classes, attrs)
+    
 }
 
 /**
  * Creates a playlist DOM element based on a playlist object.
  */
+//a function that gets a playlist object and create a div that contains the playlist details.
 function createPlaylistElement({ id, name, songs }) {
-    const children = []
-    const classes = []
+    
+    const children = [{
+        content:name,
+        type:'p'
+    },{
+        content:songs.length,
+        type:'p'
+    },{
+        content:calculateDuration(playlistDuration(id)),
+        type:'p'
+    }]
+    const classes = ['card', 'playlist']
     const attrs = {}
     return createElement("div", children, classes, attrs)
 }
@@ -37,11 +109,112 @@ function createPlaylistElement({ id, name, 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 {Array} classes - the class list of the new element 
  * @param {Object} attributes - the attributes for the new element
  */
+//a function that gets a tag name create it and add child tags, classes, attributes to the tag.
 function createElement(tagName, children = [], classes = [], attributes = {}) {
-    // Your code here
-}
+    let r = document.createElement(tagName);
+    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.innerHTML = child.content;
+        r.appendChild(t);
+    });
+    classes.forEach(cls => {
+        r.classList.add(cls);
+    });
+    
+    for(const property in attributes){
+        r.setAttribute(property, attributes[property]);
+    }
+    classes.forEach(cls => {
+        if(cls == "song")
+            document.getElementById("songs").appendChild(r);
+        if(cls == "playlist")
+            document.getElementById("playlists").appendChild(r);
+    });
+    
+}
+//a function that gets a playlist id and returns the playlist duration.
+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 gets a playlist id, and a song id and returns the index of the corresponding objects in the player's array.
+  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];
+  
+  }
+  //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;
+  }
 // You can write more code below this line
+//a function that sort the array of songs and create an element for each of them separately.
+function displaySongsList(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);
+    });
+    
+}
+//a function that sort the array of playlists and create an element for each of them separately.
+
+function displayPlaylistsList(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);
+    });
+}
+displaySongsList(player.songs);
+displayPlaylistsList(player.playlists);
\ No newline at end of file
diff --git a/scripts/index.new.js b/scripts/index.new.js
index c3a39c8e..6dc1b78b 100644
--- a/scripts/index.new.js
+++ b/scripts/index.new.js
@@ -5,7 +5,77 @@
  * @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.innerHTML = child.content;
+        r.appendChild(t);
+    });
+    r.classList.add("card");
+    r.addEventListener('click', function (){
+        while (document.getElementById("main").firstChild) {
+            document.getElementById("main").removeChild(document.getElementById("main").lastChild);
+        }
+        let heading = document.createElement('h1');
+        heading.textContent = 'MP3';
+        
+        document.getElementById("main").appendChild(heading);
+
+    });
+    
+    document.getElementById("main").appendChild(r);
+    console.log(songPlayed);
+    
+    window.setTimeout(function ()  {
+        let index, i = 0
+        player.songs.forEach(song => {
+            if(song.id == songId)
+                index = i;
+            i++;
+        });
+        if(index != player.songs.length -1)
+            playSong(player.songs[index + 1].id);
+        else
+            playSong(player.songs[0].id);
+    
+    }, songPlayed.duration * 1000);
+
 }
 
 /**
@@ -14,14 +84,63 @@ function playSong(songId) {
  * @param {Number} songId - the ID of the song to remove
  */
 function removeSong(songId) {
-    // Your code here
+    let index = 0;
+    let i = 0;
+    player.songs.forEach(song => {
+        if(song.id == songId)   
+            index = i;
+        i++;
+    });
+    player.songs.splice(index,1);
+    i = 0;
+    player.playlists.forEach(playlist => {
+        i = 0;
+        playlist.songs.forEach(song => {
+            if(song == songId)
+                playlist.songs.splice(i, 1);
+            i++;
+        });
+        
+    });
+    while (document.getElementById("songs").firstChild) {
+        document.getElementById("songs").removeChild(document.getElementById("songs").lastChild);
+    }
+    
+    while (document.getElementById("playlists").firstChild) {
+        document.getElementById("playlists").removeChild(document.getElementById("playlists").lastChild);
+    }
+    while (document.getElementById("main").firstChild) {
+        document.getElementById("main").removeChild(document.getElementById("main").lastChild);
+    }
+    let heading = document.createElement('h1');
+    heading.textContent = 'MP3';
+    
+    document.getElementById("main").appendChild(heading);
+    
+    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 t = duration.split(":");
+    let minutes = t[0]*60;
+    let seconds = t[1]*1
+    let durationInSec = minutes + seconds;
+    console.log(durationInSec);
+    let newSong = {
+        id:genrateSongID(),
+        title:title,
+        album:album,
+        artist:artist,
+        duration:durationInSec,
+        coverArt:coverArt
+    };
+    player.songs.push(newSong);
+    createSongElement(newSong);
+    
 }
 
 /**
@@ -31,7 +150,15 @@ function addSong({ title, album, artist, duration, coverArt }) {
  * @param {MouseEvent} event - the click event
  */
 function handleSongClickEvent(event) {
-    // Your code here
+    element = event.target;
+    if(event.target.id.includes('play')){
+        
+        playSong(event.target.id[0]);
+    }
+    if(event.target.id.includes('remove')){
+        removeSong(event.target.id[0]);
+    }
+    
 }
 
 /**
@@ -40,17 +167,70 @@ function handleSongClickEvent(event) {
  * @param {MouseEvent} event - the click event
  */
 function handleAddSongEvent(event) {
-    // Your code here
+    let arr = document.getElementsByTagName('INPUT');
+    
+    addSong({
+        title:arr[0].value,
+        album:arr[1].value,
+        artist:arr[2].value,
+        duration:arr[3].value,
+        coverArt:arr[4].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:title,
+        type:'p'
+    },{
+        content:album,
+        type:'p'
+    },{
+        content:artist,
+        type:'p'
+    },{
+        content:calculateDuration(duration),
+        type:'p'
+    },{
+        content:"https://upload.wikimedia.org/wikipedia/commons/f/fe/Android_Emoji_25b6.svg",
+        type:'button',
+        event:'play',
+        id:id
+    },{
+        content:"https://upload.wikimedia.org/wikipedia/commons/4/4c/OOjs_UI_icon_trash_apex.svg",
+        type:'button',
+        event:'remove',
+        id:id
+    },{
+        content:coverArt,
+        type:'img'
+    }]
+
+    const classes = ['card', 'song']; 
+    let TDuration = duration;
+    let numRed, numGreen, rootNum = 255,precentage, minDuration, calculate = true;
+    TDuration = TDuration - 120;
+    if(duration < 120){
+        numGreen = rootNum;
+        numRed = 0;
+        calculate = false;
+    }
+    if(duration > 420){
+        numRed = rootNum;
+        numGreen = 0;
+        calculate = false;
+    }
+    if(calculate){
+        precentage = TDuration / 300;
+        numRed = rootNum * precentage;
+        numGreen = rootNum *(1-precentage);
+    }    
+    
+    const attrs = {style:`background-color:rgb(${(numRed)},${numGreen},0)`};
+    const eventListeners = {click: handleSongClickEvent};
     return createElement("div", children, classes, attrs, eventListeners)
 }
 
@@ -58,11 +238,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', 'playlist'];
+    const attrs = {};
+    const eventListeners = {};
+    return createElement("div", children, classes, attrs, eventListeners);
 }
 
 /**
@@ -79,21 +268,133 @@ 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 r = document.createElement(tagName);
+    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%");
+
+
+        }else if(child.type.includes('button')){
+            t.style.background=`url(${child.content}) no-repeat`;   
+            t.style.width = '25px';
+            t.style.height = '25px';
+            
+            t.id = child.id;
+            t.id += child.event;
+
+            t.addEventListener('click', eventListeners['click']);
+            
+        }else{
+            t.textContent = child.content;
+        }
+        r.appendChild(t);
+    });
+    classes.forEach(cls => {
+        r.classList.add(cls);
+    });
+    
+    for(const property in attributes){
+        r.setAttribute(property, attributes[property]);
+    }
+    classes.forEach(cls => {
+        if(cls == "song")
+            document.getElementById("songs").appendChild(r);
+        if(cls == "playlist")
+            document.getElementById("playlists").appendChild(r);
+    });
+    
+}
+// a function that gets a playlist's id and returns the playlist total duration.
+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;
+}
+//a function that gets a playlist id and a song id and return their indexes
+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];
+}
+//genrate a new unique id
+function genrateSongID(){
+    id = 1;
+    player.songs.forEach(song => {
+      player.songs.forEach(s => {
+        if(song.id == id)
+          id++;
+      });
+    });
+    return id;
+  }
 /**
  * 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
diff --git a/style.css b/style.css
index f4645fe9..cf63b122 100644
--- a/style.css
+++ b/style.css
@@ -1 +1,81 @@
 /* Your code here */
+@import url('https://fonts.googleapis.com/css?family=Roboto');
+
+
+* {
+   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: grey no-repeat center;
+}
+h1 { color: #111; font-family: 'Helvetica Neue', sans-serif; font-size: 110px; font-weight: bold; letter-spacing: -1px; line-height: 1; text-align: center; }
+
+
+#main{
+    background-color: greenyellow;
+    
+   background-image: linear-gradient(to right, red 40%,  blue 60%);
+     
+   background-size: 300% 100%;
+    transition: background-position .5s;
+    background-position: 0;
+    
+    border: none;
+    padding: 1em;
+} 
+#main:hover{
+    background-position: 100%;
+ }
+.card {
+   position: relative;
+   background: grey;
+   max-width: 500px;
+   margin: 20px auto;
+   box-shadow: 0px 0px 30px 2px #000;
+   align-content: center;
+}
+p{
+    color: black;
+    text-align: left;
+    font-weight: normal;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    margin: 5px 30px;
+}
+button{
+   color: black;
+   text-align: left;
+   font-weight: normal;
+   text-transform: uppercase;
+   letter-spacing: 0.1em;
+   margin: 5px 30px;
+   border: none;
+}
+img{
+    display: block;
+    background:red;
+    color: white;
+    position: relative;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    text-align: center;
+    padding: 10px;
+    transition: 250ms;
+}
\ No newline at end of file
