pullReq

README.md

@@ -1,82 +1,18 @@
-# MP3 DOM
+Name - Dayan Badalbaev.
+Welcome to my MP3 player!
+
+explanatin about what's going on in this repo.
+I started to work on this project at the beggining of the first assinment of DOM.
+I wanted to continue it in my own way, this is why its not following the given tamplate.
+Also I splited the function between the js files including my logic, while im designing my style as a programmer.
+Functions that work with the Player object are in `player.js` with the object.
+Function that works with the DOM and the event listeners and so on are in `index.js`.
+Hope you will appreciate my way and decisions as a programer.
+
+The site supports-
+ - Show all the songs.
+ - Show all the playlists.
+ - Add a new song.
+ - remove a song.
+ - play a song (with a color ficher).
 
-The users of your MP3 player complained about it being inconvenient for regular (non-programmer) people. Time to build a GUI!
-
-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
-
-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!
-
-## 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:
-
--   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:
-
--   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.
-
-### Playlists
-
-Every playlist list item should 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,11 +9,36 @@
         <script src="./scripts/index.js" defer></script>
     </head>
     <body>
-        <div id="songs">
-            <!-- Generated songs go here -->
-        </div>
-        <div id="playlists">
-            <!-- Generated playlists go here -->
+        <div class="wrapper">
+            <div class="navbardiv">
+                <nav id= "navbar">
+                    <ul>
+                        <li>
+                            <a class="nav-link" onclick="songsHandler()">songs</a><br>
+                            <ul>
+                                <li><a class="nav-link" onclick ="addSongHandler()">add song</a></li>
+                            </ul>
+                        </li>
+                        <li>
+                            <a class="nav-link" onclick="playlistsHandler()">playlists</a>
+                            <ul>
+                                <li><a class="nav-link" onclick ="addSongToPlaylist()">add song to playlist</a></li>
+                            </ul>
+                        </li>
+                    </ul>
+                </nav>
+                <div id="playNow" style="position: absolute; bottom: 0px; width:100%; text-align: center;">
+                    <header>Playing Now</header>
+                </div>
+            </div>
+            <div id = "main-content">
+                <div id="songs" class = "main-content">
+
+                </div>
+                <div id="playlists" class = "main-content">
+                    <!-- Generated playlists go here -->
+                </div>
+            </div>
         </div>
     </body>
 </html>

index.new.html

@@ -24,7 +24,7 @@ <h2>Add a new song</h2>
         <div id="songs">
             <h2>Songs</h2>
             <div class="list">
-                <!-- <div class="song">
+                <div class="song">
                     <div class="left">
                         <img class="cover-art" src="./images/cover_art/jinjer_vortex.jpg">
                         <div class="song-details">
@@ -40,21 +40,21 @@ <h2>Songs</h2>
                             <button class="remove-button">Remove</button>
                         </div>
                     </div>
-                </div> -->
+                </div> 
             </div>
         </div>
         <div id="playlists">
             <h2>Playlists</h2>
             <div class="list">
-                <!-- <div class="playlist">
+                <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> -->
+                </div> 
             </div>
         </div>
     </body>