diff --git a/README.md b/README.md
index 3ed9a821..5d345ea7 100644
--- a/README.md
+++ b/README.md
@@ -1,35 +1,26 @@
 # 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
@@ -37,46 +28,15 @@ Each song list item shall display the following details:
 -   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!
diff --git a/index.html b/index.html
index c55fb482..4c122fb8 100644
--- a/index.html
+++ b/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>
diff --git a/index.new.html b/index.new.html
index eba39f17..70d2a67c 100644
--- a/index.new.html
+++ b/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">
diff --git a/scripts/index.js b/scripts/index.js
index 6842c794..e2d574b5 100644
--- a/scripts/index.js
+++ b/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)
+}
\ No newline at end of file
diff --git a/scripts/index.new.js b/scripts/index.new.js
index c3a39c8e..f5d102d5 100644
--- a/scripts/index.new.js
+++ b/scripts/index.new.js
@@ -4,24 +4,46 @@
  *
  * @param {Number} songId - the ID of the song to play
  */
-function playSong(songId) {
-    // Your code here
+function playSong(songId){
+    let selected = document.querySelectorAll('.selected');
+    for(let elem of selected) {
+        elem.classList.remove('selected');
+    }
+    document.getElementById(songId).classList.add('selected');
 }
 
+
 /**
  * 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
+    let index=songIndex(songById(songId))
+    for(let list of player.playlists){
+        if(list.songs.includes(songId)){
+            list.songs.splice((list.songs.indexOf(songId)),1)
+        }
+    }
+    player.songs.splice(index,1)
+    document.getElementById(songId).remove()
+    let listOfPlaylists = document.querySelectorAll(".playlist");
+    for(const playlist of listOfPlaylists){
+        playlist.remove()
+    }
+    generatePlaylists();
 }
 
 /**
  * Adds a song to the player, and updates the DOM to match.
  */
 function addSong({ title, album, artist, duration, coverArt }) {
-    // Your code here
+    addSongToPlayer(title, album, artist, duration, coverArt)
+    let listOfSongs = document.querySelectorAll(".song");
+    for(const song of listOfSongs){
+        song.remove()
+    }
+    generateSongs();
 }
 
 /**
@@ -31,7 +53,16 @@ function addSong({ title, album, artist, duration, coverArt }) {
  * @param {MouseEvent} event - the click event
  */
 function handleSongClickEvent(event) {
-    // Your code here
+    const target=event.target
+    const songId=parseInt(target.closest(".song").id)
+    switch(target.className){
+        case 'play-button':
+            playSong(songId)
+            break;
+        case 'remove-button':
+            removeSong(songId);
+            break;
+    }
 }
 
 /**
@@ -40,16 +71,40 @@ function handleSongClickEvent(event) {
  * @param {MouseEvent} event - the click event
  */
 function handleAddSongEvent(event) {
-    // Your code here
+    const newSong={}
+    const inputesElements=document.querySelectorAll("input")
+    for(const input of inputesElements){
+        let name=input.name
+        if(name.includes("-")){
+            name="coverArt"
+        }
+        let value=input.value
+        newSong[name]=value;
+        input.value="";
+    }
+    addSong(newSong);
 }
 
 /**
  * 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 titleEL=createElement("span",[title],["title"])
+    const albumEL=createElement("span",[album],["album"])
+    const artistEL=createElement("span",[artist],["artist"])
+    const songDetailsEL=createElement("div",[titleEL, albumEL, artistEL],["song-details"])
+    const coverArtURL=coverArt
+    const coverArtEL=createElement("img",[],["cover-art"],{ src : coverArtURL})
+    const leftpartEL=createElement("div",[coverArtEL, songDetailsEL],["left"],)
+    const durationEL=createElement("div",[toCorrectDuration(duration)],["song-duration"])
+    durationEL.style.color=reflectColor(duration);
+    const buttonPlay=createElement("button",["▶️"],["play-button"])
+    const buttonRemove=createElement("button",["🗑️"],["remove-button"])
+    const songActionsEL=createElement("div",[buttonPlay, buttonRemove],["song-actions"])
+    const rightpartEL=createElement("div",[durationEL, songActionsEL],["right"],)
+    const children = [leftpartEL, rightpartEL]
+    const classes = ["song"]
+    const attrs = {cursor:"pointer",id: id }
     const eventListeners = {}
     return createElement("div", children, classes, attrs, eventListeners)
 }
@@ -58,8 +113,14 @@ 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 nameEL=createElement("span",[name],["name"])
+    const leftpartEL=createElement("div",[nameEL],["left"],)
+    const songsEl=createElement("span",[songs.length+" songs"],["playlist-length"])
+    const durationOfPlaylist=toCorrectDuration(playlistDuration(songs))
+    const durationEL=createElement("span",[durationOfPlaylist],["playlist-duration"])
+    const rightpartEL=createElement("div",[songsEl, durationEL],["right"],)
+    const children = [leftpartEL, rightpartEL]
+    const classes = ["playlist"]
     const attrs = {}
     const eventListeners = {}
     return createElement("div", children, classes, attrs, eventListeners)
@@ -79,26 +140,181 @@ 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 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])
+    }
+    //Adding events
+    for(const event in eventListeners){
+        el.addEventListener(event, eventListeners[event])
+    }
+    return  el
+}
+/*
+    Function that taking duration on the seconds and transforme it to format mm:ss
+*/
+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 that adding song to the player array
+*/
+function addSongToPlayer(title, album, artist, duration, coverArt) {
+    let obj={
+      id: newId(player.songs),
+      title: title,
+      album: album,
+      artist: artist,
+      duration: durationToSeconds(duration),
+      coverArt: coverArt
+    }
+    player.songs.push(obj)
+}
+
+/*
+    Function that transform duration in mm:ss format to seconds
+*/
+function durationToSeconds(str){
+    let duration=(parseInt(str.slice(0,2))*60)+parseInt(str.slice((str.length-2),(str.length)));
+    return duration;
+}
+
+/*
+    Function that sum durations of all songs in the playlist and return result
+*/
+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 that searches the next max id in the object
+*/
+function newId(obj){ 
+    let maxId=0;
+    for (let i of obj){
+      if(i.id>maxId) maxId=i.id;
+    }
+    return maxId+1;
+}
+
+
+/*
+    Function that return object of song from player.songs usesed ID of song
+*/
+function songById(id){
+    let songObj=player.songs.find(x=> x.id===id);
+    if (songObj===undefined){
+      throw "Not a Valid ID"
+    }
+    return songObj;
 }
 
+
+/*
+    Function that return index of the song Object in the array of the songs
+*/
+function songIndex(song){
+    let index=player.songs.indexOf(song);
+    return index
+}
+
+
+/*
+    Function that sorts songs by title
+*/
+function sortSongs(songA, songB){
+      return songA.title.localeCompare(songB.title);
+}
+
+
+/*
+    Function that sorts playlists by name
+*/
+function sortPlaylists(playlistA, playlistB){
+    return playlistA.name.localeCompare(playlistB.name);
+}
+
+
+/*
+    Function that change color of duration because long of the song
+*/
+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
+    }
+}
+
+
+
+
 /**
  * Inserts all songs in the player as DOM elements into the songs list.
  */
 function generateSongs() {
-    // Your code here
+    const songsListEl=document.getElementById("songs").querySelector("div")
+    player.songs.sort(sortSongs)
+    for(const song of player.songs){
+        const songEl=createSongElement(song)
+        songsListEl.append(songEl);
+    }
 }
 
 /**
  * Inserts all playlists in the player as DOM elements into the playlists list.
  */
 function generatePlaylists() {
-    // Your code here
+    const playlistsListEl=document.getElementById("playlists").querySelector("div")
+    player.playlists.sort(sortPlaylists)
+    for(const playlist of player.playlists){
+        const playlistEl=createPlaylistElement(playlist)
+        playlistsListEl.append(playlistEl)
+}
 }
 
 // Creating the page structure
 generateSongs()
 generatePlaylists()
+//Adding Event Delegation to parent element
+songs.addEventListener("click", handleSongClickEvent)
+
+ 
 
 // Making the add-song-button actually do something
 document.getElementById("add-button").addEventListener("click", handleAddSongEvent)
diff --git a/style.css b/style.css
index f4645fe9..c554cc84 100644
--- a/style.css
+++ b/style.css
@@ -1 +1,146 @@
-/* Your code here */
+* {
+    box-sizing: border-box;
+    
+  }
+
+body{
+    background: linear-gradient(90deg, rgb(71, 66, 230) 0%, rgba(5,188,230,1) 30%, rgba(0,255,115,1) 100%);
+  }
+
+h1{
+    font-family: Lucida Handwriting;
+    font-size: 60px;
+    font-weight: 900;
+    text-align: center;
+    margin-top: 60px;
+    margin-bottom: 25px;
+}
+
+div.song{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 450px;
+    margin: 15px; 
+    font-family: "Gill Sans", sans-serif, cursive;
+    font-size: 16px;
+    font-weight: 500;
+    border: 3px solid;
+    border-radius: 20px;
+    background-color: whitesmoke;
+}
+
+div.playlist{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    text-align: center;
+    font-size: 20px;
+    font-weight: 600;
+    font-family: "Gill Sans", sans-serif, cursive;
+    border: 3px solid;
+    border-radius: 25px;
+    width: 50%;
+    margin: 15px 25%;
+    padding: 0px 20px;
+    background-color: whitesmoke;
+}
+
+img{
+    max-height: 80px;
+    margin: 10px;
+}
+
+span{
+    margin: 2px;
+}
+
+input{
+    border-radius: 10px;
+    font-size: 16px;
+    padding: 5px;
+    border: 3px solid;
+    border-color: black;
+    margin: 10px;
+}
+
+.list{
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    justify-content: space-evenly;
+}
+
+.heading{
+    font-family: Lucida Handwriting;
+    font-size: 45px;
+    font-weight: 900;
+    text-align: center;
+    margin-top: 60px;
+    margin-bottom: 25px;
+}
+
+.title{
+    font-weight: bold;
+    font-size: 20px;
+}
+
+.artist{
+    font-style: italic;
+}
+
+.selected{
+    background-color: rgb(65, 236, 65) !important;
+}
+
+.left{
+    display: flex;
+    align-items: center;
+}
+
+.song-details{
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.right{
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    margin: 5px 10px;
+}
+
+.right>div{
+    font-size: 20px;
+    margin: 3px;
+}
+
+.remove-button{
+    background-color: red;
+    margin-left: 5px;
+}
+
+#add-button{
+    margin-top: 20px;
+    margin-left: 47%;
+    height: 40px;
+    width: 90px;
+    font-size: 24px;
+    font-weight: 600;
+    background-color: rgb(15, 204, 15);
+    padding: 2px 10px;
+    border-radius: 5px;
+}
+
+#inputs{
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    
+}
+
+#playlists{
+    margin-bottom: 100px;
+}
+