-
-
screenshot of home page
-
panda logo
-
1/3 album cover
-
2/3 album cover
-
3/3 album cover
-
background
Inspiration
Our inspiration for this project stems from our love for music and what we have learned so far in our Computer Science Classes.
What it does
"My New Jam" is a Music generator that takes user input then produces the best possible song and artist recommendation from 162 possible combinations. These combinations contain all of the possible answers users can input within the 4 questions. Along with finding music that best suits you, you will also be provided with a modern playlist of your desired genre. We created a specific playlist for each genre.
How we built it
Aesthetics For aesthetics, we worked on a lot of formatting for the structure of the HTML, and polishing through our CSS file. In the HTML files throughout our website, we had to make sure each page for questions was consistent with the next one that followed. Throughout our CSS file, we constantly were adjusting the aspect ratios of each page of our section, along with changing the sentence structure of certain lines through different formatting structures such as changing the listing and positioning for certain objects.
HTML HTML was used as the framework for everything, from organizing the questions using forms to animating the "What's my Jam" button. We created an HTML file for each page (title, questions, results), and linked them together.
JavaScript & Database For this project JavaScript played a major role in how the results are produced. After researching JavaScript, we were able to work and learn the language. We started by creating variables to store the music database and user input. Then we built arrays and objects to hold each song's details. After that we created filtering functions that check the qualities of each song. Lastly, we connected the JavaScript to HTML using event listeners.
Challenges we ran into
Formatting Challenges A big challenge that we faced was formatting issues across operating systems. One of our team members operated on a macOS system while the other two used windows. Due to these two different OS’ working together, the output of our website came out in two different versions, causing more things needed to be added to the css file.
Connecting JavaScript to HTML A big challenge we ran into when developing this project was connecting our JavaScript to the HTML file. Once each thing work on its own we thought connecting the two would be simple, but we ran into many problems. We relied on inspecting elements and checking the console for specific errors. Another resource that we used was AI. We strictly used AI for checking for errors and translating them into simpler language. In the end we were able to find functions that we forgot to define and the biggest change was expanding the data base so that there are possibilities for EVERY combination.
Accomplishments that we're proud of
- Creating a meaningful Idea
- Learning JavaScript
- Learning Web Development
- Handmade Logo + Assets
- Zero AI for design
- Overcoming every Challenge
- Completing the Project
What we learned
- Team Bonding
- Time Management
- JavaScript
- HTML
- Compiling
- CSS
- Using GitHub ## What's next for My New Jam In the future we plan on adding even MORE combinations, questions, and songs to our music database so that the process truly produces the BEST option. A big future feature that we plan on adding is "Where's my Jam" where users can find local events in their area that suit their taste. Providing new features to make music exploration more exciting and using music to connect people all around the world is our goal!
