Mood Based Music Recommender banner

Mood Based Music Recommender

1 devlog
5h 47m 4s

Mood Based Music Recommender is a web application that helps users discover and play songs based on their current mood. The app organizes music into different mood categories such as Happy, Sad, Motivated, and Chill. When a user selects a mood, th…

Mood Based Music Recommender is a web application that helps users discover and play songs based on their current mood. The app organizes music into different mood categories such as Happy, Sad, Motivated, and Chill. When a user selects a mood, the application dynamically displays song cards with the song title, artist name, and album image. Users can click on any song card to instantly play the music using the built-in audio player.

The application also includes a search feature that allows users to quickly find songs by name or artist, and a “Surprise Me” option that plays a random song from any mood category. This project is built using HTML, CSS, and JavaScript and demonstrates core front-end development concepts such as DOM manipulation, event handling, dynamic content rendering, and audio playback in the browser.

This project uses AI

I used ChatGPT while building this project to help understand JavaScript concepts, debug issues in my code, and improve the UI design. AI assistance helped me fix problems with the audio player, organize the project structure, and write better CSS for a more interactive interface. The core logic, structure, and implementation of the project were developed and customized by me.

Demo Repository

Loading README...

rajni.khairwar97

Shipped this project!

I built a Mood Based Music Recommender using HTML, CSS, and JavaScript. Users can choose moods like Happy, Sad, Motivated, or Chill and play songs that match their mood. The most challenging part was managing the song data and connecting it with the audio player, but I solved it using JavaScript objects and DOM manipulation. I’m proud that the app now works smoothly with features like search and a random “Surprise Me” button.

rajni.khairwar97

In this project, I built a Mood Based Music Recommender using HTML, CSS, and JavaScript. The app allows users to choose a mood such as Happy, Sad, Motivated, or Chill, and it displays songs that match that mood. I created song cards with images, titles, and artist names, and added an audio player so users can play songs directly from the page.

While building this project, I practiced JavaScript concepts like objects, arrays, DOM manipulation, and event handling. I also worked on improving the user interface with interactive CSS and adding features like search and a random “Surprise Me” song button.

Attachment
Attachment
Attachment
Attachment
Attachment
1

Comments

rajni.khairwar97
rajni.khairwar97 10 days ago

Built a Mood Based Music Recommender where users can choose a mood and play songs that match it. Created using HTML, CSS, and JavaScript with features like search and a random “Surprise Me” song button.