We wanted to make a soundboard just because we think soundboards are cool. We figured that we've all used soundboards before for our own creative videos, but none of us really had experience with making a website, so a website with a soundboard seemed simple and yet challenging enough for us to do in a short amount of time. ​

What it does

This website has a very Christmas-y homepage that has a button that leads to a soundboard. The soundboard has a collection of sound effects that can be listened to and downloaded. There is an animation at the bottom of the page in order to fit the festive nature of the holidays. ​

How we built it

The website was created using HTML, CSS, and JS. Each person in the group had their own visions of the website and we managed to merge all of those with the help of Github. Some of the sounds were found online while some were created at home. A lot of the code that was used to create the website was learned extremely recently from tutorial pages. ​

Challenges we ran into

There was a couple of challenges that we ran into. First, buttons and the falling snow effect. The falling snow was somehow overlayed over the buttons and that took a while in figuring out how to get the snow to fall under the buttons. Second, merging our ideas together was hard. We all had different ideas of what the website should be like, and by the time we wanted to merge, we had tens of files with different ideas on them. Half the battle was definitely organizing and reconfiguring the files. ​

Accomplishments that we're proud of

We're all proud of how we even managed to finish. Before we started, we barely had even touched HTML, CSS, or JS. There was a lot of searching up stuff and testing things out. By the time we hit the end, we were pretty proud of how the website looked and what we created. ​

What we learned

We learned a lot about formatting and classes in HTML and CSS. As I said earlier, we barely had even touched the languages used to create this website. After this, I think we could definitely do something like this again. We learned a lot about adjusting classes in CSS, integrating sounds, using new fonts, and animating things. I personally like the hover methods which allows things to behave differently when the mouse hovers over certain objects. ​

What's next for Holiday Soundboard

This soundboard can easily be expanded to create a soundboard for all themes of sounds. We originally wanted to have an expanded soundboard, but due to time constraints, we stuck with the theme. However, we already implemented a navigation bar at the top of the website, so it's easy to add more sounds in with their own themes and animations. I'm sure that this will be extremely useful for creative people who like to make their own videos.

Built With

Share this project: