Big Idea

Working with your partner, create a function that depends on conditionals.

Task $1$: Create an index.html for your lab

As always, create the proper folders and an index, css$,$ and JavaScript files for this lab. And make sure you also put a link from your art$101$ homepage to

this lab

Create an index.html with three organized sections: Challenge, Problems, and Results

Use heading, div, and paragraph tags to organize your page

As usual, link a JavaScript file from the section of your HTML like this:

Add a CSS stylesheet in your css folder and link from index.html

Add a link to your JavaScript file in your index page.

Create an input form field and label it "Please enter your name for sorting"

Create a button Task $2$: Create a JavaScript file

Create a new javascript file in your code editor in your lab's js folder

Put a comment block $$ at the top of your program

Create a function sortingHat$()$

that takes a string as an argument: function sortingHat$($str$)$

counts the letters in str and assigns it to a variable length

uses modulus $(\%$ operator$)$ to get the remainder with $4$: mod $=$ length $\%4$;

mod will now be a value between $0$ and $3$

create a conditional that will return Gryffindor, Ravenclaw, Slytherin, and Hufflepuff depending on whether the value of mod is $0,1,2,$ or $3$

Create an click listener attached to #button

that gets the value of #input and assigns it to a variable name

runs sortingHat$($name$)$ and stores the result in a variable house

appends a new styled paragraph to #output that says "The Sorting Hat has sorted you into $"+$ house

Remember:

Use the JavaScript console to see if anything went wrong

Experiment with new commands in the JavaScript console to see how they work

Add comments to your function to say what it does

Make it neat using lots of whitespace.

Style in programming matters, so use indentations and spaces where necessary.

Remember to put a semicolon at the end of every line.

Take a screenshot of your JavaScript file in your code editor.Remember to put a semicolon at the end of every line.

Take a screenshot of your JavaScript file in your code editor.