diff --git a/.prettierrc b/.prettierrc
index 0fc66c4d..87a023cb 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,5 +1,5 @@
 {
-    "semi": false,
-    "tabWidth": 4,
-    "printWidth": 120
+   "semi": false,
+   "tabWidth": 4,
+   "printWidth": 120
 }
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 00000000..a90daae9
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/index.html b/index.html
index c55fb482..a75f13c4 100644
--- a/index.html
+++ b/index.html
@@ -4,16 +4,23 @@
         <meta charset="UTF-8" />
         <title>Awesome MP3 Player</title>
         <link rel="shortcut icon" type="image/x-icon" href="./images/icon.png" />
-        <link rel="stylesheet" href="./style.css">
+        <link rel="stylesheet" href="./style.css" />
         <script src="./scripts/player.js"></script>
         <script src="./scripts/index.js" defer></script>
     </head>
+
+
+    </div>
+
     <body>
-        <div id="songs">
-            <!-- Generated songs go here -->
-        </div>
-        <div id="playlists">
-            <!-- Generated playlists go here -->
-        </div>
+        <div id="player">
+            <h1>Mp3 player(old web)</h1>
+            <div id="lists">
+                <div class="songs" id="songs">
+                    <h1>Songs</h1>
+                </div>
+                <div id="playlists" class="playlists">
+                    <h1>Playlists</h1>
+                </div>
     </body>
 </html>
diff --git a/index.new.html b/index.new.html
index eba39f17..38e8a50d 100644
--- a/index.new.html
+++ b/index.new.html
@@ -4,57 +4,39 @@
         <meta charset="UTF-8" />
         <title>Awesome MP3 Player</title>
         <link rel="shortcut icon" type="image/x-icon" href="./images/icon.png" />
-        <link rel="stylesheet" href="./style.css">
+        <link rel="stylesheet" href="./style.css" />
         <script src="./scripts/player.js"></script>
         <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 class="list">
-                <!-- <div class="song">
-                    <div class="left">
-                        <img class="cover-art" src="./images/cover_art/jinjer_vortex.jpg">
-                        <div class="song-details">
-                            <span class="title">Vortex</span>
-                            <span class="album">Wallflowers</span>
-                            <span class="artist">Jinjer</span>
-                        </div>
-                    </div>
-                    <div class="right">
-                        <div class="song-duration">04:02</div>
-                        <div class="song-actions">
-                            <button class="play-button">Play</button>
-                            <button class="remove-button">Remove</button>
+        <div id="player">
+            <h1 style="color: white; text-decoration: underline">Mp3 player</h1>
+            <div id="lists">
+                <div class="songs" id="songs" style="text-align: center">
+                    <h2>Songs</h2>
+                    <div class="list">
+                        <div id="add-section" style="text-align: center">
+                            <h3>Add a new song</h3>
+                            <div id="inputs">
+                                <input class="input" name="title" placeholder="Title" id="title" />
+                                <input class="input" name="album" placeholder="Album" id="album" />
+                                <input class="input" name="artist" placeholder="Artist" id="artist" />
+                                <input class="input" name="duration" placeholder="Duration (mm:ss)" id="duration" />
+                                <input class="input" name="cover-art" placeholder="Cover art link" id="cover-art" />
+                            </div>
+                            <button id="add-button"><b>Add</b></button>
+                            <button id="reset-button" type="reset" value="reset">
+                                <b>Reset</b>
+                            </button>
                         </div>
                     </div>
-                </div> -->
-            </div>
-        </div>
-        <div id="playlists">
-            <h2>Playlists</h2>
-            <div class="list">
-                <!-- <div class="playlist">
-                    <div class="left">
-                        <span class="name">Metal</span>
-                    </div>
-                    <div class="right">
-                        <span class="playlist-length">4 songs</span>
-                        <span class="playlist-duration">25:36</span>
+                </div>
+                <div id="playlists" class="playlists" style="text-align: center">
+                    <h2>Playlists</h2>
+                    <div class="list">
                     </div>
-                </div> -->
+                </div>
             </div>
         </div>
     </body>
diff --git a/scripts/index.js b/scripts/index.js
index 6842c794..b04a6d2d 100644
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -4,26 +4,51 @@
  *
  * @param {String} songId - the ID of the song to play
  */
+
 function playSong(songId) {
-    // Your code here
+    const divAllSong = document.getElementsByClassName("child") //the div that wrap of the song
+    for (const divSong of divAllSong) {
+        //remove the green mark from all songs
+        divSong.style.borderLeft = "transparent"
+    }
+    const currentSong = document.getElementById(songId)
+    currentSong.style.borderRadius = "10px" //the left green mark when song playing
+    currentSong.style.borderLeft = "20px solid green"
 }
 
+const divOfAllSongs = document.getElementById("songs")
+divOfAllSongs.addEventListener("click", (e) => {
+    playSong(e.target.id)
+})
+
 /**
  * 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 children = [
+        createElement("img", [], ["border-Img"], { src: coverArt }),
+        createElement("span", "Title | " + title, [], {}),
+        createElement("span", "Album | " + album, [], {}),
+        createElement("span", "Artist | " + artist, [], {}),
+        createElement("span", durationFormat(duration), ["duration"], {}),
+    ]
+    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 = {}
     return createElement("div", children, classes, attrs)
 }
@@ -34,14 +59,76 @@ 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
+    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
+}
+
+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]))
+}
diff --git a/scripts/index.new.js b/scripts/index.new.js
index c3a39c8e..9a852075 100644
--- a/scripts/index.new.js
+++ b/scripts/index.new.js
@@ -1,68 +1,43 @@
-/**
- * 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
-}
-
-/**
- * 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
-}
-
-/**
- * Adds a song to the player, and updates the DOM to match.
- */
-function addSong({ title, album, artist, duration, coverArt }) {
-    // Your code here
-}
-
-/**
- * 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 handleSongClickEvent(event) {
-    // Your code here
-}
-
-/**
- * Handles a click event on the button that adds songs.
- *
- * @param {MouseEvent} event - the click event
- */
-function handleAddSongEvent(event) {
-    // Your code here
+    const divAllSong = document.getElementsByClassName("child")
+    for (const divSong of divAllSong) {
+        //remove the red marks from all songs
+        divSong.style.borderLeft = "transparent"
+        divSong.style.color = "rgb(0 0 0 / 73%)"
+    }
+    const currentSong = document.getElementById(songId)
+    currentSong.style.borderRadius = "10px" //the red marks when song playing
+    currentSong.style.borderLeft = "20px solid white"
+    currentSong.style.color = "white"
 }
 
-/**
- * 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 | " + title, [], {}),
+        createElement("span", " Album | " + album, [], {}),
+        createElement("span", " Artist | " + artist, [], {}),
+        createElement("span", " " + durationFormat(duration), ["duration"], {}),
+        createElement("button", ["❌"], ["remove-song-button"], {}),
+        createElement("button", ["▶️"], ["play-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)
 }
 
 /**
@@ -78,27 +53,159 @@ function createPlaylistElement({ id, name, songs }) {
  * @param {Object} attributes - the attributes for the new element
  * @param {Object} eventListeners - the event listeners on the element
  */
-function createElement(tagName, children = [], classes = [], attributes = {}, eventListeners = {}) {
-    // Your code here
+function createElement(tagName, children = [], classes = [], attributes = {}) {
+    const element = document.createElement(tagName)
+    for (let child of children) {
+        //adds the text or the element as a child his the parent element
+        element.append(child)
+    }
+    for (let name of classes) {
+        //adds the classes to the element
+        element.classList.add(name)
+    }
+    for (let attribute in attributes) {
+        //adds the attributes to the element
+        element.setAttribute(attribute, attributes[attribute])
+    }
+    return element
 }
 
-/**
- * Inserts all songs in the player as DOM elements into the songs list.
- */
-function generateSongs() {
-    // Your code here
+// adding the event listener to the songs list
+const divOfAllSongs = songs
+divOfAllSongs.addEventListener("click", (e) => {
+    //listening to the click event in order to remove/play button
+    if (e.target.className === "play-song-button") {
+        //if the play button pressed
+        playSong(e.target.parentElement.id)
+    } else if (e.target.className === "remove-song-button") {
+        //if the remove button pressed
+        removeSongFromPlayer(e.target.parentElement.id) //remove the song from the player
+        const divSong = e.target.parentElement
+        divOfAllSongs.removeChild(divSong) //remove the song from the webpage
+    }
+})
+
+//adding a song
+const addButton = document.getElementById("add-button")
+addButton.addEventListener("click", (e) => {
+    //listening to the click event in order to add a song button
+    e.preventDefault()
+    const divAllSongs = songs
+    const id = generateId() //get new unique ID for the new song
+    const title = title.value
+    const album = album.value
+    const artist = artist.value
+    const duration = duration.value
+    const coverArt = document.getElementById("cover-art").value
+    const newSongObj = {
+        //get all values from the user and put them together in object
+        id,
+        title,
+        album,
+        artist,
+        duration,
+        coverArt,
+    }
+
+    const song = createSongElement(newSongObj) //creates a song element
+    player.songs.push(newSongObj) //adds the new song to the player
+    divAllSongs.append(song) //add the song to the webpage
+    window.scrollTo(0, document.body.scrollHeight) //scroll automatically to the bottom of the page in order to see the new song
+})
+
+const resetButton = document.getElementById("reset-button")
+resetButton.addEventListener("click", (e) => {
+    //listening to the click event in order to reset all the inputs
+    e.preventDefault()
+    const inputs = document.getElementsByClassName("input")
+    for (const input of inputs) {
+        //runs on all inputs
+        input.value = "" //reset the inputs
+    }
+})
+
+///////////////////////////////////--- All my help functions(start) ---//////////////////////////////////////////////////////////
+function removeSongFromPlayer(songId) {
+    //remove the song from the player
+    for (let i = 0; i < player.playlists; i++) {
+        for (let j = 0; j < playlist.songs.length; i++) {
+            if (playlist.songs[j] == songId) {
+                playlist.songs.splice(j, 1)
+            }
+        }
+    }
 }
 
-/**
- * Inserts all playlists in the player as DOM elements into the playlists list.
- */
-function generatePlaylists() {
-    // Your code here
+function covertFormatToNumber(duration) {
+    //convert from mm:ss to actual number
+    const minutes = Number(duration.split(":")[0]) * 60
+    const seconds = Number(duration.split(":")[1])
+    return minutes + seconds
 }
 
-// Creating the page structure
-generateSongs()
-generatePlaylists()
+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) ---//////////////////////////////////////////////////////////
+
+//the function adds the elements to the web page
+function renderMp3ToDom() {
+    const songsElement = songs
+    const playlistsElement = playlists
+
+    //sorts the songs and the playlists arrays
+    player.playlists.sort((playlistA, playlistB) => playlistA.name.localeCompare(playlistB.name))
+    player.songs.sort((songA, songB) => songA.title.localeCompare(songB.title))
+
+    //add the songs and the playlists elements to the page
+    for (let i = 0; i < player.songs.length; i++) {
+        songsElement.append(createSongElement(player.songs[i]))
+    }
+    for (let i = 0; i < player.playlists.length; i++) {
+        playlistsElement.append(createPlaylistElement(player.playlists[i]))
+    }
+}
 
-// Making the add-song-button actually do something
-document.getElementById("add-button").addEventListener("click", handleAddSongEvent)
+//calling the function
+renderMp3ToDom()
diff --git a/style.css b/style.css
index f4645fe9..8f128fe9 100644
--- a/style.css
+++ b/style.css
@@ -1 +1,139 @@
-/* Your code here */
+@import url("https://fonts.googleapis.com/css2?family=Sriracha&display=swap");
+body {
+    margin: 0;
+    font-family: "Sriracha", sans-serif;
+    font-weight: bold;
+    /* background: linear-gradient(to right, rgb(38, 13, 151), rgba(255, 255, 255, 0.692), rgb(40, 11, 148)); */
+    background: linear-gradient(to right, rgba(48, 46, 46, 0.95), rgba(138, 8, 8, 0.9));
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: center;
+    flex-wrap: wrap-reverse;
+}
+
+img {
+    width: 100px;
+    height: 100px;
+    border-radius: 5%;
+}
+
+#player {
+    display: flex;
+    justify-content: start;
+    flex-direction: column;
+    align-items: center;
+    line-height: 1.5rem;
+}
+
+h2 {
+    font-family: Georgia, "Times New Roman", Times, serif;
+    font-weight: bold;
+    color: gold;
+}
+
+.songs,
+.playlists {
+    width: 91ch;
+    animation: typing 2s steps(22), blink 0.5s step-end alternate;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+div {
+    text-align: left;
+    box-shadow: 0px 0px 100px 0px;
+
+    border: 2px solid rgb(151, 151, 137);
+    padding: 10px;
+    border-radius: 19px;
+}
+.input {
+    border-radius: 19px;
+    border: 3px solid rgb(196, 196, 38);
+}
+
+@keyframes typing {
+    from {
+        width: 0;
+    }
+}
+
+@keyframes blink {
+    50% {
+        border-color: transparent;
+    }
+}
+
+@-moz-keyframes blink {
+    0% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.5;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+@-webkit-keyframes blink {
+    0% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.5;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+@-ms-keyframes blink {
+    0% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.5;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+@keyframes blink {
+    0% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.5;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+.border-Img {
+    border: 10px solid gold;
+}
+
+.play-song-button,
+.remove-song-button {
+    float: right;
+}
+
+button {
+    border: none;
+    background-color: inherit;
+    padding: 14px 28px;
+    font-size: 16px;
+    border-radius: 24px;
+    cursor: pointer;
+    display: inline-block;
+}
+
+button:hover {
+    background: rgba(238, 238, 238, 0.336);
+    color: #b11226;
+}
+
+#lists {
+    color: rgb(0 0 0 / 73%);
+}
