dylankmoore/individual-project-sorting-hat

Sorting Hat

The name of this project is the Sorting Hat. The overview of this project was to essentially create a list of students & the Hogwarts houses that they are assigned to, give the user the ability to expel students to Voldemort's Army, and then also bring them back to the good side of the students. The user will also be able to randomly sort themselves into one of the Hogwarts houses.

Netlify link: https://sorting-hat-project-dkm.netlify.app/

Loom video link: https://www.loom.com/share/0bbe5e19f9ff410dbfcad4814571b350

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!

This is what the finished app should have:

• To start off with, you will use a bootstrap card to have your sorting hat introduce itself and start the sorting process (by clicking on a button). The form should not be on the DOM until the button click happens.

• A bootstrap form will then appear to fill in the student's name and a button to sort. This should then assign the student to a random house (Gryffindor, Hufflepuff, Ravenclaw, or Slytherin).

• On sorting a student, the form should clear and a bootstrap card with the student's name and a random house assignment should print below the form.

• 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 plan your project and highly suggest using issue tickets. There are a few that have been provided for you to use already. Continue to add to these so you know what work you need to complete.
• 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 startApp() 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
• 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.
• Add filter buttons to filter the non-expelled students by house

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)

individual-project-sorting-hat's Issues

First bootstrap card for sorting hat

Create a bootstrap card to have a sorting hat introduce itself & start the sorting process by clicking a button.

Create bootstrap form

Have a bootstrap form appear after clicking a button that fills in the student's name & a button to sort them in a random house.

Update your readme

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

create HTML

-Create data structure with elements to be applied to DOM
-Apply bootstrap for the page components

create JS with functions

Create javascript that is composed of the necessary functions for page

-including having the sorting hat initialize the sorting process with a button
-have a form appear after clicking button that allows user to type in student name & button for sorting in random houses
-after sorting, the form will clear & a bootstrap card w/ student's name & their random house printing below form
-be able to expel a student after being sorted which will move their card from student array into Moldy Voldy's Army

Error message

Create an error message that appears if a user tries to sort a student without filling out the form.

Optional Bonus

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.

Create styling for the page

After getting basic functions and elements for the page rendered and working, create basic CSS to style page

Create a Loom Walkthrough Video of your app

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

Create button inside form

Create a button in the bootstrap form that will assign the student to the random house

Create HTML

Set up HTML to correspond with javacript functions

Use a loop

Be sure to include a loop OTHER than the for loop in the code

Expel students feature

Add a feature to expel students after being sorted, which will remove their card from the student array & move them to Moldy Voldy's Army.

Second bootstrap card w/ random house assignment

After sorting a student, the form will then clear & a new bootstrap card will appear below the form that has the student's name & random house assignment printed

Technical Requirements

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.

Create additional tickets and plan your project

Create additional tickets and plan your project

Deploy Project

Deploy to Netlify and add deploy link to readme

Create data structure

Create data structure with elements to be rendered to DOM.