xbirb

• 

  landing page

• 

  birb in its full glory

• 

  all menus open

• 

  confetti streams

Inspiration

With the shift to online and virtual learning, my motivation and drive has taken a sharp downturn, and many of my friends have expressed similar feelings. I took inspiration from the virtual pet apps that I played as a kid and combined it with a minimalistic to-do list to create a fun website that encourages you to complete tasks while being rewarded.

What it does

xbirb is a virtual pet website that motivates you to finish tasks! On the website, users can first input all the tasks they need to complete in a certain timeframe of their choice into the to-do list. Whenever a task is checked off, 5 coins are awarded to the user - these coins can be used to purchase a variety of food to feed to birb, which will raise birb's hunger by different increments. Pressing the 'gift' button can also release confetti, which will raise birb's happiness levels.

How we built it

This project is built entirely using HTML, CSS, and JavaScript. While coding, I found the hard way that many of the ideas that I had (money counters, show/hiding boxes, sound effects) had to rely on JavaScript, which was very interesting to code in. The design is simplistic and composed of soft, relaxing colors and copious negative space, so users are also relaxed when using the website. To complete the effect, I added various click sound effects for opening/closing menus, buying items, and confetti!

Challenges we ran into

This is the second hackathon I've attended and the first that I've attended alone, so it was a lot harder than my last one. I had way too many ambitious goals and not enough time, so I didn't put as many cool features as I would have liked. Implementing this project also required a lot of JavaScript, which I'm not very familiar with, but this really motivated me to expand my technical skills and learn from various tutorials and videos, enabling me to create a project that I am proud of.

Accomplishments that we're proud of

I'm proud of being able to produce an end product by myself! Having attended a previous hackathon in a team, I was curious to see if I could finish a hackathon project by myself since this hackathon was relatively longer. I'm also extremely proud of having coded some features using JavaScript, a language that I wasn't that proficient in at first (I've definitely improved a lot since the beginning of the hackathon). Features like the coin counter, hunger/happiness bar, confetti cannons, sound effects, and show/hide buttons all relied on JavaScript to make them interactive. It was really fun to code this project!

What we learned

I definitely went out of my comfort zone for this project, and I learned that pushing myself can and will pay off. At first, I was hesitant to create such an interactive website but, with the help of workshops and instructional tutorials, I was able to create a project that I enjoyed coding and using. I also learned that coding alone is not nearly as fun as with friends, so I think this will be the first and last time I attend a hackathon by myself. 😅

What's next for xbirb

There are many more features that I wanted to implement but didn't have enough time or knowledge for, like a more varied store, animated birb, and a self-care list - because downtime is important too, and people shouldn't spend all their waking hours working or studying! Some other possible features include reordering the to-do list and creating visual progress bars. I'd also like to maybe enable users to sign in with their Google account so they can save their progress across devices, and maybe develop a mobile version of this for convenience! I think there's a lot of potential in this project that I haven't accessed yet, but I'll definitely expand it after the hackathon!

Built With

• css3
• github
• html5
• javascript
• jquery