Take a moment and play with the interactive house drawing below then answer the following three questions.

All HTML code consists of elements. The diagram below shows the structure of an HTML element.

Example 1 is of a single HTML p element, which is normally (as in this example) used to contain a paragraph of text.

HTML elements can be nested within each other, creating child and parent relationships. In example 2, we have a p element nested within a div element. You could also refer to the child element as the content of the parent element. You might do this to group text content with other content. Note that elements are allowed to be empty (i.e., for the closing tag to come immediately after the opening tag).

Both example 1 and example 2 show how we set element attributes. HTML attributes change the behavior of that element and different elements support different combinations of attributes (class and style are examples of global attributes supported by all element types). For example, the video element has an optional autoplay attribute that indicates whether the video should immediately play. Some of those elements have special attributes that change the way they behave. But for this lesson you will only need:

• The div element, a generic container for many purposes.
• The style attribute, which changes the look of the element (soon we'll switch to doing this in CSS).
• The class attribute, which allows us to refer to manipulate and access an element from CSS and JavaScript. Think of the class attribute as a label that allows you to refer to it from other places.

For this next step, you will go ahead and build out the main structure for the house. We will refer to each element according to its class attribute (since they will all be div elements and so that won't be a useful way to refer to them).

The roof, interior, and foundation elements should be immediate children of the house element. And there should be three room elements that are each direct children of the interior element. They are also described below. To finish this step, create all your elements in the HTML code area to the right.

Before we move on from HTML over to CSS, let's take a look at how we can style our HTML elements. At the start, we said that styling is done with CSS. But the lines are actually a little blurry. We can use the style attribute to add inline styles to our elements.

For this step, please add a style attribute to each of the room elements in the HTML. The value should be the same for all of them:

width: 100px; height: 50px; background-color: yellow;"

You might find yourself with overly long lines of code. Note that, in HTML you can insert a line break anywhere a space would normally go.

You might think that styling elements in HTML looks inelegant, especially with how we have to keep repeating the same style attributes. And that's why we use CSS. CSS allows you to declare a rule once and then apply it to a large number of elements. A CSS rule looks like the following.

• Selectors indicate what elements will be affected by this rule. You can use multiple selectors to avoid repeating the same rule if it applies to multiple types of elements.
• Property declarations indicate what styles should be applied to those elements.

CSS provides flexibility in how a developer can select elements for styling. You can select by class by prefixing it with a "." and you can select by tag name by using the tag name alone. You can also combine them together to create rules spanning tag name and class. Here are some examples.

There are also many CSS properties. The example shows two (background-color and width).

For this next step, you should replace the styling from the last step with a CSS rule (which means you should no longer have style attributes set in your HTML). Add a CSS rule that selects elements with class room (i.e., .room) and sets the width, height, and background-color properties to the same values as last time. Don't forget to refer to the required syntax above (especially the curly braces and semicolons).

We now need to finish styling the remaining elements. Please create CSS rules to apply the styling as laid out in this table. Note that you should probably group some of these to avoid writing them several times. For example, you may want to define the width of house, foundation, and roof using a single rule.

You probably have picked up on what the width, height, and background-color properties do and how the selectors were defined (the . prefix chooses by class). But some of these probably deserve some explanation.

The :hover pseudo-class is a common tool for communicating interactivity to a user. And the flex layout is a common way to define the layout of elements along an axis. There are many ways to lay out HTML elements and we will explore them more in the future.

We now move on to JavaScript. As we said at the start, JavaScript consists of variables and operations on those variables. Variables store information and functionality that we can access later.

We'll start by declaring two kinds of variables: strings and numbers. Strings allow us to store textual information. Numbers allow us to count and perform calculations. Here is the syntax for a string.

And here is the syntax for a number. Note that they are very similar! Note that we use the keyword var to declare the variable. However, if you wish to change a variable later on, you simply re-assign it using the equal sign and you do not use var again. You can think of the var keyword as meaning "I am declaring a new thing into existence" and the equal sign as saying "and this thing's value is ___". Naturally, once it exists you are free to change its value without declaring it again.

Okay, your turn. Please do the following:

• Declare a string variable called roomColor and give it a value of "yellow".
• Declare a number variable called roomWidth and give it a value of 50.

Another type of variable is a function. Functions represent sets of instructions. Of course, most things in JavaScript are instruction (e.g., declare this variable, modify that variable). But functions allow us to package instrucions up so that they can be used multiple times without having to write the same code repeatedly. Here is the syntax for a function.

If we ever want to execute the instructions in this function, we would call it by referring to the variable name and then giving it arguments using parentheses. For example, executing myFunction(3, 4) should return the value 12. Note that the return statement at the end of the function is what determines what the function hands back to you (we would refer to you as the caller because you called the function). Functions don't have to return anything. When they don't, they are sometimes called void functions.

Okay, now it's your turn, we'll declare a function that increases the value of roomWidth by 1.

• Declare a function called increaseRoomWidth that that takes no arguments (so you'll just open and then immediately close the parentheses).
• Within the function body, re-assign the value of roomWidth to be equal to roomWidth + 1. Remember that you do not need to re-declare the variable (i.e., do not use the var keyword).

Another type of variable is an object. In the same way that functions group instructions together, objects group information together. For example, you might want a single variable that indicates the first name, last name, and age of a user. It would be unwieldy to define three variables for each user and then keep track of them all. Objects helps us avoid this.

After defining an object, we can refer to its properties using dot notation with the keys. For the above example, we would expect myVariable.myOtherProperty to return 42.

Okay, now it's your turn, please do the following.

• Declare a variable named roomSettings that has two properties:
  • color with a value of "yellow"
  • width with a value of 50
• Update the function body of increaseRoomWidth to increase the value of roomSettings.width by 1, in addition to also increasing th value of roomWidth by 1. Normally, when we make a change like this (to use a single variable with two properties instead of two separate variables), we would remove the old functionality. However, we won't do that in this case because the automated check functionality in this tutorial needs the previous steps to still "pass" their test.

So far, we have worked with HTML, CSS, and JavaScript separately. Let's implement the last part of this tutorial, where a user can click on a room and have "the lights go out." We can do this using event handlers. Event handlers are JavaScript functions that are called when an event. Examples of events include (but are not limited to):

• A user clicking on an HTML element.
• A user hovering over an HTML element.
• A user moving the mouse over the page
• A user hitting a key on the keyboard

There are several ways to attach an event handler to an element. But one of the easiest is using on<event> attributes.

Please do the following to create your first event handler.

• Declare a JavaScript function called turnOutlights which accepts a single argument, called "event".
• Within the turnOutlights function body, re-assign the value of event.target.style.backgroundColor to be equal to "black".
• Connect this handler to the HTML room elements by setting the onclick element of each room to "turnOutlights(event)"