Inspiration
I was inspired by the #buildingbridges theme. Specifically, I wanted to build bridges between people to foster a positive community by participating in positivity challenges. Especially in the midst of a tumultuous racial environment, creating a kinder world and being compassionate are more important than ever!
What it does
The Bridge Bud web app encourages its users to become their own bridges, completing sets of four randomly generated tasks to construct a virtual bridge. After each task is checked off, a new section of the bridge appears.
After the bridge is complete, users can also check out the Bridge Map. This includes a (currently hardcoded) view of where previous virtual bridges have been constructed. I hope that seeing new bridges accumulate will provide an optimistic outlook that highlights the good deeds that other people are doing.
The Bridge Map also uses markers for US counties having the lowest quality of life. In this way, Bridge Bud users can target areas that need a little extra positivity!
How we built it
I used HTML/CSS, JS & jQuery, and the Google Maps API.
Challenges we ran into
The biggest challenge I ran into was connecting the input checkboxes to the bridge images. The function I originally wrote was purely in JS but didn't seem to work. I overcame this challenge by just using the hide() and show() methods from jQuery.
The bridge images themselves also needed to line up, so this was challenging when dividing the bridge into four parts that seamlessly flowed into each other.
Accomplishments that we're proud of
I'm proud of my overall finished product and how I fit the theme! I'm happy with how I took the concept of "building bridges" both literally and figuratively, and I think the idea of virtual bridges representing good deeds is something that could be scaled into a bigger app in the future.
What we learned
I haven't worked with Google Maps in a really long time, so it was cool to learn how to use Google Cloud again. I also learned more about general web app development using HTML/CSS/JS.
What's next for Bridge Bud
In the future, I want to automate the process of finishing building a virtual bridge and automatically adding a bridge marker on the Bridge Map. (rather than hardcoding it)
Also, I want to make Bridge Bud responsive and more mobile-friendly!
Log in or sign up for Devpost to join the conversation.