Inspiration

As high school seniors, our team had to go through intense burnout from online classes. We always thought how much we needed interactive brain breaks to stay motivated. We were inspired by our struggles to create a website that would provide us with the break that we've always needed in our lives. We also wanted to educate others on healthy practices to stay productive while keeping the interactive, chill vibe we wanted for our site. So we decided to create a simple brain break/productivity minigame as well as a productivity section, where a user could keep track of her studying and breaks while listening to some relaxing original music.

What it does

Our mission is to give your brain time to recharge! The Brain Break site includes two tabs: Brain Game and Productivity. The Brain Game is short, interactive game where you can help your brain calm down. In the Productivity tab, you will see two features. One is a to-do list, where you enter and check off items. The second is the Pomodoro Technique: you can start the timer and work for 25 minutes. Then, you will be given a reminder to take a break.

How we built it

We built this project using HTML, CSS, and Javascript, as well as Musescore(for composing original background music), repl.it(for collaboration), GitHub(for storing the finished code), Adobe Fresco(for creating crisp graphics), and Google Fonts.

Challenges we ran into

Going into this hackathon, none of us were too familiar with javascript game development, so it was a challenge utilizing Canvas; however this was a great learning experience. In the game that we developed, we had to overcome obstacles involving being able to move the water can game piece asset using MouseClick and movement. We also had a difficulty positioning images onto the Canvas, as well as using FillText and ClearRect effectively when used as functions called by OnClick. We created a Pomodoro Timer on our productivity page but ran into challenges coding and setting it up, debugging the Javascript, as well as running music on that webpage.

Accomplishments that we're proud of

We managed to create a professional/clean UI Interface through Adobe Fresco and CSS Styling. We also fully coded a prototype javascript game as well as composed all original music for the site! Finally, we incorporated various functionalities for an educational purpose to boost productivity.

What we learned

Swetha: I learned during this hackathon how to use Canvas to create a simple game using Javascript. I also learned how to connect the music I wrote to a button event listener, so it can play in the background when needed.

Sneha: I learned more CSS and formatting as well as some design rules.

Shruti: I learned how to use javascript to move game pieces around with drag and drop.

Nihita: I learned how to use Javascript to create a pomodoro technique timer that the user can customize based on their preferences.

What's next for The Brain Break Site!

In future iterations of the project, we aim to...

  • Add more techniques to the Brain Break Game for how to calm down, as well as how to NOT calm down(like the homework example) in order to enforce healthy self-care and productivity habits.
  • Add levels to the game as well as additional backgrounds/stages
  • Add more minigames in general to the website that enforce healthy habits in fun, engaging ways
  • Enhance the productivity section so that we can store our to-do list items on a database(possibly with a login) so more long term tasks can be checked off the site later
  • Expand on other proven study techniques and provide resources about them
Share this project:

Updates