Add lesson10 (#10)

ReDI-School · Apr 18, 2024 · ee7c3ba · ee7c3ba
1 parent 18fa51f
commit ee7c3ba
Show file tree

Hide file tree

Showing 5 changed files with 189 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -36,6 +36,7 @@
         <section data-markdown="lesson07.md" data-charset="utf-8"></section>
         <section data-markdown="lesson08.md" data-charset="utf-8"></section>
         <section data-markdown="lesson09.md" data-charset="utf-8"></section>
+        <section data-markdown="lesson10.md" data-charset="utf-8"></section>
         <!-- NEW_SECTION_HERE -->
       </div>
     </div>

diff --git a/lesson10.md b/lesson10.md
@@ -0,0 +1,73 @@
+<!-- .slide: id="lesson10" -->
+
+# Basic Frontend - Spring 2024
+
+Lesson 10, Thursday, 2024-04-18
+
+---
+
+### Recap: getElementById
+
+* What is `getElementById`?
+* When do we use it?
+* What does it return?
+* How do we find out which properties we can set/get?
+
+---
+
+### MAJOR TWIST
+
+`string`, `boolean`, `number`, `undefined` and `null` are primitive data types
+
+`object` is a non-primitive data type
+
+
+However - even primitive data types can have properties in JavaScript. <!-- .element: class="fragment" -->
+
+---
+
+### Example
+
+```js
+let greeting = "Hello";
+let price = 1/3;
+
+greeting.replace('e', 'a'); // returns "Hallo"
+price.toFixed(2)            // returns "0.33"
+```
+
+We can use the `toFixed()` method on numbers to round to get a string with fewer digits after the decimal point.
+
+---
+
+# Project
+
+---
+
+### Option 1
+
+Let's write a number guessing game! Let the computer guess a secret number between 1 and 100:
+
+```js
+let secretNumber = Math.floor(Math.random() * 100) + 1;
+```
+
+Create a game web page where your user can guess any number between 1 and 100. The game must tell the user whether they guessed too high or too low. Once the user guesses the secret number, the game is over.
+
+BONUS: Also print the user's previous guesses
+
+---
+
+### Option 2
+
+Let's write a web shop! Choose **two** products of your liking and let the user select the amount they want to buy. Compute the total cost.
+
+BONUS: Also offer express shipping for a small extra fee.
+
+---
+
+### Sample solutions
+
+[guessing game](preject/numberguess.html)
+
+[web store](preject/webstore.html)
diff --git a/preject/numberguess.html b/preject/numberguess.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Number Guessing</title>
+</head>
+<body>
+<h1>Guess the magic number!</h1>
+
+<input type="number" value=50 min=1 max=100 id="guessInput" autofocus=true>
+<button id="guessButton" onclick="guess()">Guess</button>
+<div id="resultDiv">Guess the magic number!</div>
+<div id="historyDiv">Previous guesses: </div>
+
+<script>
+    // first, get variables pointing to all relevant elements
+    let guessInput = document.getElementById("guessInput");
+    let guessButton = document.getElementById("guessButton");
+    let resultDiv = document.getElementById("resultDiv");
+    let historyDiv = document.getElementById("historyDiv");
+
+    // let the computer choose the magic number
+    let magicNumber = Math.floor(Math.random() * 100) + 1;
+
+    // this runs every time the button is clicked
+    function guess() {
+
+        // first, get the number that our player chose
+        let guessedNumber = guessInput.valueAsNumber;
+
+        // now compare whether it's below, above or equal to our magic number
+        if (guessedNumber === magicNumber) {
+            resultDiv.textContent = "you guessed right!!!";
+            // disable the guess button so the user can't guess any more
+            guessButton.disabled = true;
+        } else if (guessedNumber < magicNumber) {
+            resultDiv.textContent = "your guess is too low";
+        } else {
+            resultDiv.textContent = "your guess is too high";
+        }
+
+        // add the guessed number to the history
+        historyDiv.textContent += guessedNumber + " ";
+
+        // for convenience - move the focus back to the input
+        guessInput.focus();
+    }
+</script>
+
+</body>
+</html>
diff --git a/preject/webstore.html b/preject/webstore.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Webstore</title>
+</head>
+
+<body>
+    <div>
+        <label for="pizzaInput">Pizza (2.99 EUR each):</label>
+        <input id="pizzaInput" type="number" min="0" value="0"
+            oninput="updateTotal()">
+    </div>
+    <div>
+        <label for="bibimbabInput">Bibimbab (8.99 EUR each):</label>
+        <input id="bibimbabInput" type="number" min="0" value="0"
+            oninput="updateTotal()">
+    </div>
+    <div>
+        <label for="expressInput">Express shipping (2 EUR):</label>
+        <input id="expressInput" type="checkbox" onchange="updateTotal()">
+    </div>
+    <div>Total price: <span id="totalPriceSpan">0</span> EUR</div>
+
+    <script>
+        // define the prices for our products
+        let pizzaPrice = 2.99;
+        let bibimbabPrice = 8.99;
+        let expressPrice = 2;
+
+        // get variables pointing to our HTML elements
+        let pizzaInput = document.getElementById("pizzaInput");
+        let bibimbabInput = document.getElementById("bibimbabInput");
+        let expressInput = document.getElementById("expressInput");
+        let totalPriceSpen = document.getElementById("totalPriceSpan");
+
+        // this runs every time the input changes
+        function updateTotal() {
+
+            // first, get the amount the user ordered
+            let pizzaQuantity = pizzaInput.valueAsNumber;
+            let bibimbabQuantity = bibimbabInput.valueAsNumber;
+
+            // compute the total price
+            let totalPrice = 0;
+            totalPrice += pizzaQuantity * pizzaPrice;
+            totalPrice += bibimbabQuantity * bibimbabPrice;
+
+            // add the express price only if express delivery is checked
+            if (expressInput.checked) {
+                totalPrice += expressPrice;
+            }
+
+            // update our web page with the new price
+            totalPriceSpan.textContent = totalPrice.toFixed(2);
+        }
+    </script>
+</body>
+
+</html>
diff --git a/toc.md b/toc.md
@@ -8,6 +8,6 @@
 5. [DOM](#dom)
 
 
-Direct link to lessons: [1](#lesson1) [2](#lesson2) [3](#lesson3) [4](#lesson4) [5](#lesson5) [6](#lesson6) [7](#lesson7) [8](#lesson8) [9](#lesson9)
+Direct link to lessons: [1](#lesson1) [2](#lesson2) [3](#lesson3) [4](#lesson4) [5](#lesson5) [6](#lesson6) [7](#lesson7) [8](#lesson8) [9](#lesson9) [10](#lesson10)
 
 NOTE: when we have too many entries that don't fit on one screen we can use this <!-- .slide: style="font-size:80%" -->