{

title: 'The Design of Everyday Things',

author: 'Don Norman',

},

{

title: 'The Most Human Human',

author: 'Brian Christian',

},

{

title: 'The Pragmatic Programmer',

author: 'Andrew Hunt',

];

1. Iterate through the array of books.

2. For each book, create a `<p>` element with the book title and author and append it to the page.

3. Use a `<ul>` and `<li>` to display the books.

4. Add an `<img>` to each book that links to a URL of the book cover.

5. Change the style of the book depending on whether you have read it (green) or not (red).

**Exercise 2: About me**

</html>

1. Add a script tag to the bottom of the HTML body.

2. (In the JavaScript) Change the body tag's style so it has a font-family of "Arial, sans-serif".

3. (In the JavaScript) Replace each of the spans (nickname, fav-food, hometown) with your own information.

**Exercise 3: The logo hijack**

**Exercise 4: What's the time?**

Why wear a watch when you can check the time, live in your webpage?

1. Create a basic HTML file

2. Include a script tag and link the JavaScript file

4. Have the function execute when it's loading in the browser

**Exercise 5: The cat walk**

</html>

3. Create a function called catWalk() that moves the cat 10 pixels to the right of where it started, by changing the "left" style property.

5. When the cat reaches the right-hand of the screen, restart them at the left hand side ("0px"). So they should keep walking from left to right across the screen, forever and ever.

In the following tutorial you'll learn how to make a small web application that allows a user to add new issues to a board. Included is practice with [Bootstrap](https://getbootstrap.com/).

Enjoy!

If you need a refresher, take a look at the following [guide](../hand-in-homework-guide.md) to see how it's done.

- [How a web browser functions](https://www.youtube.com/watch?v=z0HN-fG6oT4)

- [How do web browsers work?](https://medium.com/@monica1109/how-does-web-browsers-work-c95ad628a509)

You can use the following online tool in order see how your pages look on multiple browsers:

- [Browsershots](http://browsershots.org)

A good website should look and function the same in any browser.

When you do your styling, especially, it's important to know if a certain browser (and browser version) is even able to understand it. A helpful tool in identifying this is a website called **caniuse.com**:

As we've learned in the previous module, JavaScript is a programming language. It allows you to write logical rules that the computer can execute in order to solve a problem. However, saying that the 'computer' executes it is actually inaccurate. There are two specific softwares that execute JavaScript: **the browser** and **Node.js**. We'll talk about the latter in a different module.

- [How the JavaScript engine works](https://www.youtube.com/watch?v=KM9coMpy5sQ)

- [JavaScript, the Browser, and the DOM](https://www.youtube.com/watch?v=31ViueuIXGE)


- [What exactly is the DOM](https://bitsofco.de/what-exactly-is-the-dom/)

- [JavaScript and the browser](https://eloquentjavascript.net/13_browser.html)

The actual process of transforming HTML, CSS and JavaScript into a user-viewable version of a webpage is called **the Critical Rendering Path**.

- [Understanding the Critical Rendering Path](https://bitsofco.de/understanding-the-critical-rendering-path/)

Look at the following code sample:

const newParagraph = document.createElement('p');

newParagraph.innerText = 'This paragraph will be added to the body!';

newParagraph.style.background = 'red';

These events are important to know about, because based on those we manipulate the DOM. For example, user clicks on an image and as a result it increases in size.

- [What are browser events?](https://www.youtube.com/watch?v=LeKKU3a4AQo)

- [Introduction to browser events](https://javascript.info/introduction-browser-events)

const body = document.querySelector('body');

body.style.background = 'black';

});

(2) JavaScript is aware and looks for this specific user action (The browser is listening for the event, in this case a `click` event)

(3) JavaScript modifies the DOM as a result (A function that makes the body background color black is executed)

The third and final step is called **handling the event**. The term "handler" effectively means "taking care of" the event; the response to the event. The handler itself is nothing more than a function that executes more JavaScript code in order to manipulate a particular part of the page (either the element that experienced the event or a totally different part of the page).