Sorting Hat

Goals

The goal of this project is to test your knowledge and to have a FUN time stretching yourself on your FIRST independent application that will become a part of your portfolio.

Focus on MVP. Do not spend a ton of time styling initially. Hit functionality first and then spend time on the styling of the project using bootstrap.

• READ THROUGH ALL OF THE INFORMATION BELOW before planning how you will tackle the project.
• Check the Issue Tickets to organize your process. You will have all week in class to work on this in class.
• PLEASE submit questions in help tickets if you need help. We will guide you to the resources that are available to you.
• When done, tell an instructor. Everyone will present how far they got AND their favorite piece of code that they wrote to an instructor.
• MOST OF ALL HAVE FUN!!!!!

Instructions

You are in charge of bringing the Hogwarts sorting hat to life!

• You should also be able to expel a student after they have been sorted, which should remove their card from the student array and move them to Moldy Voldy's Army.

In the end, your app will look something like:

Technical Requirements

• You must use Boostrap to style your page components
• You must use a loop other than a for loop
• Your JS file should be comprised of functions, no actions should happen in your code outside of a function except for your initial startApp() function
• Your HTML and JS should all have proper indentation
• Helpful Form: An error message shows if a user tries to sort a student without filling out the form
• Voldermort's Army: Create a separate container of cards that hold the cards for students that have been expelled. These should be styled differently from Hogwarts students.

DEFINITION OF DONE

Once you have completed all the technical requirments, you should complete the following:

• README Requirements
• RECOMMENDED Loom Video: Sign up for Loom and record a video of you walking through your app

Expel Button Hints

Think of a way you can expel students without just hiding those divs on the page. This would mean when the button is clicked you modify the array of students and pass the new array into your renderToDom() function. Double hint - put a unique id in the student object when you create them.

Optional Bonus

• House Colors: The color of the student's card changes depending on which house they were sorted.
• Card Sorting/Ordering: Sort the student cards by some criteria (i.e. alphabetically by name, by house)