Inspiration
I had watched the Harry Potter Movies over the winter break and I was thinking to myself of how cool it would be to experience the whole sorting hat ceremony and getting sorted into a house and seeing and common room and everything. I thought it would be cool to create this website as a way for people to be able to virtually experience this since we don't live in the wizarding world! That's why I created this website. It is a way for people to not only know which house they would most likely be in but also for people to just experience the whole journey.
What it does
What this website does is it brings you to a sorting hat ceremony to be sorted in the house you would belong in through some questions. It would make its result based on your preferences and sort you into a house that way. You would then go back to your homepage to select the house and see the common room and almost as if you are actually there. It is a way to experience the whole ceremony and feel that excitement and joy as you are getting sorted in the house!
How I built it
I built this website through HTML, CSS, and Javascript. I used HTML to put all my content and what I want on the website. It is like the backbones of the website so that it has everything. I used CSS to make the website aesthetic and fitting to the Harry Potter theme. I did this by adding different colors, patterns, pictures, and other designs. That way, it would feel like a real Sorting Hat ceremony. Last but not least, I used javascript to create the whole quiz. I used event listeners in order for the website to recognize which option was selected and to make the results out of that. I needed to use the event listeners and if/then statements to declare which results would be there depending on what the person chose. For instance, I used the if/then statements where if there were 2 or more Hufflepuff answers(based on the ordering of the options) the person would be placed in Hufflepuff. If there were more Ravenclaws, it would bring them to Ravenclaw. If per se they selected one of each then they would get a statement saying that any house would be beyond happy to have them and for them to go to the house they want to go to!
Challenges I ran into
Some challenges I ran into were adding the if/then statements correctly. If one was off, the whole quiz would not work and that was a struggle. I had to use correct statements of what would happen with different numbers included. This also accounts for the number of questions there would be. The maths would have to be equal so the results make sense.
Accomplishments that I'm proud of
I'm proud of how the quiz turned out. Although it was one of the hardest, it also left me the most accomplished feeling. Being able to create the quiz correctly and make sure it does what it is supposed was fun to overcome. It works as any regular quiz does and is also as a fun game as it's a Sorting Hat Ceremony. It is like experiencing taking a real wizardly world quiz and getting your results. It was really fun to create and seeing it work out perfectly, in the end, was nice.
What I learned
I learned how to use new bits of coding to create something spectacular. I learned that your coding knowledge can create something amazing and something you are proud of no matter how much or little you know. I was able to learn new things like the way like the importance of event listeners and if/then statements. I was able to work through the struggles and learn something new along the way.
What's next for Hogwart's Sorting Hat!
In the future, I plan to include more things to be done and used. So far I have a common room with a password and would next like to include things like "famous wizards from this house", some fun and quick games to play and some other quizzes to see how well you know the house. I also want to include animations showing you around the common room or giving a tour.
Log in or sign up for Devpost to join the conversation.