Date: Feb 2021

Harry Potter Sorting Hat

Overview:

The Hogwarts Sorting Hat introduce itself and start the sorting process by clicking on a button. A form will appear to input student's name to sort in a random Hogwarts house. On sorting a student, the form should clear and a card with the student and random house will be printed to the DOM and a button on the card to expel a student after they have been sorted.

Houses are: (Gryffindor, Hufflepuff, Ravenclaw, Slytherin and Voldemort's Army)

Relevant Links

SCREENSHOTS: Student Cards Form Intro

User Story

  • When a user navigates to the page
  • A sorting hat tells a story and prompted to click a begin button
  • Then a user types in a name in the form and clicks sort button
  • When a new student is added a card will appear with that students name and a random Hogwarts house
  • When user wants to delete card
  • Then expel button onclick will delete card from DOM and database

Contributors

Credits

The wonderful world of online artist for the inspirations and art for this project.