There are more than two genders!

Come and explore some of the many genders!

Comment

Inspiration

Most people aren't aware of the vast amounts of genders out there. We wanted to build this website to help spread awareness and information about some of the different genders.

What it does

This website functions by presenting an informational screen at the start, the user can click an "explore" button to get rid of this. They are then presented with a similar screen that features the word "Genders", and has a spin button. Upon clicking the spin button, the website will shuffle through a dictionary of genders and choose a random one. After landing on the chosen one, it will wait a few seconds, then transition to the gender information. The user can click a red "X" in the corner to repeat the process.

How we built it

We built this project using HTML, CSS, and JS.

Challenges we ran into

Some of the challenges we ran into while building this website was when we were figuring out how to switch the text on the screen from the rolled gender, to the gender definition. We were able to overcome this challenge using javascript and the innerHTML function. That way, we could simply replace the HTML inside the container, versus having a whole new container for the HTML.

Accomplishments that we're proud of

With this being our first hackathon, and website created together, we are really proud of this website. Coming into this project, we were only experienced in HTML/CSS, and we were looking to expand our JavaScript knowledge. We were able to accomplish this and even created a JS spinner fully from scratch!

What we learned

Through the creation of the project, we learned how to successfully implement JavaScript into our project, and in this project this was through a spinner. We also learned how to switch the HTML in a container using the innerHTML function in JavaScript.

What's next for There are more than two genders!

Next, given more time, we would want to create a gallery to the user could select the gender they wanted to learn more about, instead of it being solely random.

Built With

Share this project:

Updates