Pride Flag Keyboard

• 

  Home page

• 

  Html code

• 

  Javascript code

I am a middle school student from Massachusetts working on my first solo hackathon.

Inspiration

Pride flags help people find other people who are similar to them, and creates a sense of community. I was inspired to create a website that would help people recognize more pride flags so that these communities can grow bigger.

What it does

Pride Flag Keyboard is an interactive website that educates the user about pride flags. When the user plays the colorful keyboard in the order of a pride flag color sequence, then an informational page appears about that flag.

How we built it

To create the Pride Flag Keyboard, I used HTML, CSS, and JavaScript. The index.html contains the button and sound tags. The JavaScript file contains the onclick methods for each button, and the update display function that displays the matching flag information page if you click colors in the sequence of a pride flag. The JavaScript also contains the code for selecting colors to create the flag.

Challenges we ran into

My original idea included an element similar to rhythm games, but I ran out of time. Hopefully I can add that feature in the future.

What we learned

I learned how to code audio in html and JavaScript. I learned how to use iframes to open a new webpage in the same window, and I learned how to use flexbox features so that my website appears visually appealing on any screen size, including mobile devices and tablets.

What's next for Pride Flag Keyboard

I plan on adding more pride flags to the website, and more colors. This way I can educate people further on more than just the popular flags or well known flags. I also plan on adding features to allow people to reach out to and connect with these communities.

Thank you for giving me the opportunity to participate in this hackathon and taking the time to look at my project.

Built With

• css
• html5
• javascript
• replit