lesson08.md

Basic Frontend - Fall 2022

Lesson 8, Tuesday, 2022-10-18

---

Recap

Can you explain the following?

let me = {
    name: "Mariana",
    isTeacher: true,
    age: 21
};

How would you access Mariana's age?

let marianaAge = me.age;

---

HTML and JavaScript

HTML Buttons have a onclick attribute that executes JavaScript when the button is clicked:

<button onclick="console.log('I was clicked!')">Click me!</button>

However, writing JavaScript in onclick is rather tedious. Can you think of a better way?

---

HTML and JavaScript

How about calling a function instead?

<button onclick="handleButtonClick()">Click me!</button>

In JavaScript:

function handleButtonClick() { /* TODO */ }

---

Changing the background color

The browser provides a variable document.body.style.backgroundColor.

We can assign a value to document.body.style.backgroundColor to change the background color of our HTML page.

// change the current color:
document.body.style.backgroundColor = "red";
// print the current color to console
console.log("The current color:", document.body.style.backgroundColor);

---

Task

Create a webpage with three buttons, "red", "green", "blue".

When you press the button, set document.body.style.backgroundColor to that color.

BONUS:

• If you press the button again, change the color back to white.
• Solve the task with only one single function and one single if/else statement.

---

Solution

HTML:

<button onclick="changeColor('red')">red</button>

JS:

function changeColor(color) {
    if (document.body.style.backgroundColor === color) {
        document.body.style.backgroundColor = "white";
    } else {
        document.body.style.backgroundColor = color;
    }
}

---

Manipulate HTML Elements from JavaScript

Let's say we have a HTML element:

<div>Total Price: 0 EUR</div>

Wouldn't it be nice if we could dynamically change that from JavaScript?

---

document.getElementById

One way to obtain a variable pointing to a HTML element is document.getElementById():

HTML:

<div id="totalPrice">Total Price: 0 EUR</div>

JavaScript

let priceDiv = document.getElementById("totalPrice");

---

priceDiv is a variable, and its type is object.

How do we know which properties/methods the object has?

We could try the browser's developer tools.

Or we could check MDN:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElement

---

Let's try some properties, see what happens:

let priceDiv = document.getElementById("totalPrice");
// choose from below:
// priceDiv.textContent = "Hi from JavaScript";
// priceDiv.hidden = true;
// priceDiv.style.backgroundColor = "red";
// priceDiv.remove();

---

Task 1

In HTML, create a div element and a button.

When the user clicks the button, set the background color of the div to red.

---

Task 2

In HTML, create a button and a div element.

When the user clicks the button, update the textContent of the div element with the amount of times the user has clicked the button.

Example: "You clicked 12 times"

---

Task 3

We're creating a web shop selling hummus (or chocolate, or eba and egusi soup)!

Create a number input field in HTML that lets the user choose the amount of hummus:

Choose the amount of hummus servings:
<input type="number" id="amount" min="0" value="0" oninput="amountChanged()">

Use the valueAsNumber property of the number input to get the amount that the user selected in your amountChanged function. Output the total price the user has to pay to a div element.

---

Task 4 (Bonus)

Extend your webshop to sell two products (e.g. hummus and chocolate).

Every product has a different price. Update the total price in the div element every time the user changes the amount of hummus and chocolate.

---

Task 5 (Bonus)

There's a special sale - if the user buys products for more than 20 EUR, they get 10% discount.

---

Solution Task 1

HTML:

<button onclick="changeColor()">Click me!</button>
<div id="myDiv">Hello</div>
<script>
    function changeColor() {
        let myDiv = document.getElementById("myDiv");
        myDiv.style.backgroundColor = "red";
    }
</script>

---

Solution Task 2

<button onclick="count()">Click me!</button>
<div id="myDiv">You clicked 0 times</div>
<script>
    let clickCount = 0;
    function count() {
        clickCount += 1;
        let myDiv = document.getElementById("myDiv");
        myDiv.textContent = "You clicked " + clickCount + " times";
    }
</script>

---

Solution Task 3

<input type="number" id="amount" min="0" value="0" oninput="amountChanged()">
<div id="priceDiv">0 EUR</div>
<script>
    let hummusPrice = 5;
    function amountChanged() {
        let amountElement = document.getElementById("amount");
        let priceDiv = document.getElementById("priceDiv");
        let amount = amountElement.valueAsNumber;
        let totalPrice = hummusPrice * amount;
        priceDiv.textContent = totalPrice + " EUR"
    }
</script>