Update your readme with all the items you learned from planning.

-Create 5 buttons in HTML for houses and all filtering.
-create filter function in JS.
-make sure each filter calls cardsOnDom.
-Test functionality.

• Create header in HTML.
• Add form input for student name.
• Add Bootstrap class to form.

Optional Bonus

• House Colors: The color of the student's card changes depending on which house they were sorted.
• Card Ordering: Sort the student cards by some criteria (i.e. alphabetically by name, by house)
• 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.

Deploy to Netlify and add deploy link to readme

• add expel button to cardsOnDom.
• use bootstrap to make button red.
• create new div in HTML called "expel-container"
• create expel function.
• expel function removes student from student array and moves them to expelled array.
  -render both students and expelled.

• Create a function that, on submit of form, randomly sorts students into one of four houses.
• have function call renderToDom.

• Review provided image for DOM structure and define key-value pairs.
• Remember to include unique ID for each student.
• Create data array in JS.
• Decide if data is stored in main.js or imported from data file.

Create a loom video of not more than 2 minutes showing your video. Add link to Loom video to your readme.

Create additional tickets and plan your project

1. Create project files HTML, CSS, and JS.
2. Include Boilerplate code and link files.
3. Test link with HTTP server.
4. Push to repo and checkout new branch.

• Build renderToDom function
• Decide which Bootstrap cards to use.
• Build cardsOnDom function and paste in Bootstrap code snippet.
• Change object target tin snippet to match data set.
• Call renderToDom to test your code in live server!

• Create the startApp function.
• Remove test call of cardsOnDom.
• Call startApp function.
• Test your project in live server.

Technical Requirements

• You MUST plan your project and create issue tickets and a project board fro your project
• You MAY use the renderToDom() function that we worked on in class, but you also need to be able to explain it if you use it
• You have to create a data structure for your project. Review all the elements that need to be on the DOM and create the structure accordingly
• 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 init() function
• Your code MUST be YOUR code. Do not copy and paste code into your project. Type every bit of it out
• 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
• You should apply responsive design to your page (aka your app should be designed to work on small screens)

Add Button Hints

When a new student is added an object should be created and that object should be pushed into an array of students that then prints to the dom.

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 print to dom function. Double hint - put a unique id in the student object when you create them.

Use house colors or crests on the student cards to show each students house.