Skip to content

Latest commit

 

History

History
136 lines (93 loc) · 2.84 KB

lesson11.md

File metadata and controls

136 lines (93 loc) · 2.84 KB

Basic Frontend

Lesson 11

Quiz: DOM

What is the output? And why?

typeof document;
"object"

Quiz: DOM

How do we change the value of an input at runtime?

<input id="myInput" value="blah">
let inputElement = document.getElementById("myInput");
inputElement.value = "blubb";

How do we change the text of a div at runtime?

<div id="myDiv">Blah</div>
let divElement = document.getElementById("myDiv");
divElement.textContent = "blubb";

How do we add a child li element?

<ul id="myList"></ul>
let listElement = document.getElementById("myList");
let itemElement = document.createElement("li");
itemElement.textContent = "new item";
listElement.appendChild(itemElement);

Converting string to number

What is the result?

let a = 1 + 1;
let b = 1 + "1";
let a = 1 + 1;    // 2
let b = 1 + "1";  // "11"

Converting string to number

We can turn a string to a number using parseInt or parseFloat:

let a = parseInt("42");   // a is number: 42
let b = parseInt("-42");  // b is number: -42
let c = parseInt("1.1");  // c is number: 1
let d = parseFloat("1.1") // d is number: 1.1

Preject

Preject

  • Let's write a number guessing game!
  • Choose a secret number between 1 and 100
  • Add an <input> where the user can enter a number between 1 and 100
  • Add a button "guess"
  • Output to a <div> element whether the guessed number is smaller, larger or equal to the secret number

Bonus

  • Already done? Let's add more features until you run out of time :)
    • Add all previous guesses to a <ol>
    • When the guessed right, output some statistics (e.g. "you guessed the secret number right with 6 tries")
    • Instead of choosing the secret number, let JavaScript generate one using Math.random() (see MDN)
    • Add a "new game" button that starts a new game with a new secret number

More Bonus

  • Seriously? Still time left?
    • Make the maximum number configurable, e.g. to guess numbers from 1 to 1000
    • SUPER HARD: Add a "suggest" button that suggests the optimal next guess based on the previous guesses. Example: User guessed 50, and the secret number is smaller. The next logical best guess would be 25.

And finally

  • Try to get as far as you can
  • Give us feedback what went easy, what was hard
  • When done, paste your HTML and JavaScript to jsbin, click File -> Save Snapshot and send the jsbin.com link to Slack