This project is deployed HERE CLICK ME! on my own server.
- This project is front-end only.
- Added docker.
Running this project with the data-no-weights gets rid of the need for a gray state for the bar, but almost everyone ends up in slytherin so I ended up tweaking the data quite a bit, and the code that uses those weights was fun to write.
Below is the original summary for the assignment, I took it from there!
Welcome to Hogwarts, the School of Whitchcraft and Wizardy. One of the tools that is used by students of Hogwarts on their first day entering the school is notoriously known as the Sorting Hat
. Your goal throughout this stretch assignment is to build the Sorting Hat
using ReactJS.
Obviously I'm using React, here with functional components, and Context API for state management/sharing. I'm especially fond of the progress bar component, found online as a static CSS styled "object" which I made dynamic! It may not be obvious at first when using the app, that you need to mouse off of, or touch off of the cards to flip them back to the question side.
I would like to add a touch more color, and some social features.
The progress bar changes color as it fills to reflect the house that you are most alike up to that point based on your answers.