Started from the bottom now we're here. As you dive deep into this React journey, remember how every step counts. This is your dedicated music studio, where the beats of artists like Rod Wave, Brent, Drake, and SZA harmonize with your code. While they set the stage, remember, you're the composer here. Remix, reimagine, and let your creativity flow!
- First, access the project through the GitHub Classroom link: https://classroom.github.com/a/zDWA93xB.
- Move to your 'labs' directory.
- Use the command
git clone [GitHub Classroom Link]to clone the repository. (Replace [GitHub Classroom Link] with the actual link). - Once cloned, transition into the project directory with
cd [project-name]. (Replace [project-name] with the name of the lab). - Open the project in Visual Studio Code by typing
code .. - Within VSCode, launch the integrated terminal.
- In the terminal, execute
npm installto fetch necessary dependencies. - Finally, start the development server by running
npm start.
Happy coding! 🚀
1. 📜 My Chart-Toppers
Objective: Illuminate your playlist with iconic tracks.
Tasks:
- In the
componentsalcove, mold thePlaylist.js. - Chronicle legendary tracks from Rod Wave, Brent, Drake, and SZA.
- Employ
.map()to spotlight each masterpiece in a list symphony.
Hint: Ensure each musical note, aka item, carries its own signature key prop.
End Result: A chart resembling:
- Rod Wave: Street Runner
- Brent: Dead Man Walking
- Drake: Laugh Now Cry Later
- SZA: Good Days
2. 🔔 Melody Request
Objective: Design an apparatus to echo song desires.
Tasks:
- Engineer the
SongRequestBell.js. - Upon pressing the bell, let it resonate an alert echoing a song's yearning.
Hint: The onClick event is your maestro here.
End Result: A beckoning button tagged "Request a Song", which when enticed, proclaims: "Song request acknowledged!"
3. 🎧 Echoing Tunes
Objective: Chronicle the encore of your favorite songs.
Tasks:
- Blueprint the
TrackPlays.js. - Conjure a button emblematic of a track, where every engagement amplifies the encore count.
Hint: The useState spell is paramount here.
End Result: A button serenading "Play Rod Wave: Tombstone". With each embrace, the button reverberates: "Encored X times!"
🎵 Genre Jukebox
Objective: A jukebox to unveil music maestros across genres.
Tasks:
- In the
componentschamber, craftGenreJukebox.js. - Curate buttons, each a tribute to genres: Rap, R&B, Pop, Country, and Afrobeats.
- On a button's embrace, let it reveal a genre's luminary.
Hint: Employ React's essence, the state, to dynamically spotlight an artist as per the genre's call.
End Result: "Rap" might resonate "Kendrick Lamar", "R&B" could echo "Usher", "Pop" might harmonize "Ariana Grande", "Country" might croon "Luke Bryan", and "Afrobeats" will likely celebrate "Tems".
📻 Maestro's Frequency
Objective: An avenue for aficionados to sync with their cherished artist's wavelength.
Tasks:
- In the
componentsfold, draftRadioSelector.js. - Within
RadioSelector, curate radio dial options for maestros: Rod Wave, Brent, Drake, and SZA. - Below the dials, place a "Tune In" button.
- Engaging the "Tune In" should broadcast the dialed artist's symphony.
Hint: Dive into the intricacies of radio dials in HTML to capture a listener's choice.
End Result: A choice of radio frequencies, each a tribute to an artist. Say, upon tuning into "Drake" and pressing "Tune In", the ether should resonate: "Now serenading: Drake Radio".
As you conclude this musical code journey, remember: Bing bong, meow meow for all the dogs 🐾. And for the next steps, head over to this repository. Let's continue the climb!