Project Feedback

[randrade13]

Adding feedback I shared from last week here for bookkeeping:

https://github.com/zaraduruji/Music-Playlist-Explorer Feedback:

• Good job splitting up logic into separate files
• Good job using const for non-changing variables
• Good job of refactor shuffle logic to make use of matrix swap logic: https://fburl.com/1z22lhkq Some Suggestions:
• Can move element creation logic to own helper function, i.e. https://fburl.com/8zzv37om
  • Don’t need to make helper for creation of every element, just where appropriate (for example, element creation is a lot lines or the element needs to be reused/created in several locations, etc)
  • This can make code easier to read by making functions less verbose function createSongItem(song) { const songItem = document.createElement("li"); songItem.innerHTML = `

        <div>
        <p>${song.title}</p>
        <p>${song.artist}</p>
        </div>
    `;
    return songItem;

    } function displayPlaylist(playlist) { featuredCover.src = playlist.playlist_art; featuredTitle.textContent = playlist.playlist_name; featuredSongs.innerHTML = ''; playlist.songs.forEach(song => { featuredSongs.appendChild(createSongItem(song)); }); }

• Could try using the mixing in some use of the map function! Example: https://fburl.com/e466ffst: document.addEventListener("DOMContentLoaded", function() { const [featuredCover, featuredTitle, featuredSongs] = ["featured-cover", "featured-title", "featured-songs"].map(id => document.getElementById(id)); … }

[AkshayGoelTech]

Looking great so far! Here is some early feedback:

1. Great job creating different files for different types of data (css, html, js etc). I'd recommend you take it a step further by creating folders inside your repo to hold these files now as you add more html/js/css files. Example: Make a images folder that holds additionsymbol.jpg pinkbackground.jpg etc. Make a css folder to hold all your css files. Note, you'll need to update the paths in your html code to include the new paths! Feel free to reach out to me if you need help here
2. When you're naming files, it's generally advisable to split different words using an underscore. So you'd rename the photo files to: addition_symbol.jpg and pink_background.jpg
3. Inside index.html, I would move the two script tags that are importing your js outside of the body tag
4. I absolutely LOVE how you have modularized your code into helper functions in script.js. Keep that up! (getRandomPlaylist is just beautiful)
5. I'd love for you to update your readme with screenshots of the current state of the project and instructions on how to run it. Right now it's as simple as open index.html, but one day in the upcoming weeks I imagine you'll connect a server that will need more instructions. Better to get started now!