Disco Break

• 

  The disco party! Equipped with lights, disco balls, and music!

Inspiration

Yesterday I just barely finished my programming assignment, I submitted it on Canvas and all I got was 3 seconds of confetti. I was not congratulated for all the hard work I put into that assignment. We wanted to create more to extend what Canvas has when a user submits an assignment so they can feel more appreciated.

What it does

After submitting an assignment, our Chrome extension brings you a disco party with music and lights. The disco celebration will last about 30 seconds, but the user can shut it off early by clicking 'q'.

How we built it

We used JavaScript, HTML, CSS, and Chrome Extensions API to build our Chrome extension. We are using git hub to house all of our files and assets. For the images, we used paint.NET to edit them. In addition, we used Canvas and a test website with a submit button to test our extension.

Challenges we ran into

Several problems we faced were how to make a Chrome extension, as none of us knew how. However, after researching we were able to find the API to create an extension, we still had to research what code to put to make it work. Another issue we experienced was getting audio to work as the example code gave us errors. We found extensions that had their files published so we could have examples of how the audio works in their projects. This helped us code the audio based on our project. The biggest issue we faced and are currently facing is how to make the disco party happen when the submit button is clicked. While we eventually got the button to work, the page refreshed to a submitted page, so we are still trying to find a way to display the party on the new webpage. Currently, the user can turn on the party by pressing 'e' to start and 'q' to stop.

Accomplishments that we're proud of

Making a Chrome extension! None of us knew if we would be able to successfully make one because of our lack of knowledge about them. But we did, which is a great accomplishment for all of us. We were also able to enable audio, which never worked for some of us before so that was truly satisfying when we heard our favorite disco songs playing through our extension.

What we learned

How to use the Chrome Extensions API, how to add audio to an extension, how to make a gif, how to make images transparent, and how to use GitHub for some of us.

What's next for Disco Break

We hope that once we can get the submit button working we can allow users to enable Disco Break for the website of their choice, such as job application. In the future, we also hope to add more graphics such as dancers to truly capture the dancing aspect of disco.

Built With

• chromeextensionsapi
• css
• html
• javascript