JavaScript Code - WCTD 2022 sample

index.html

    <!-- Add a simple greeting to your page-->
    <p>
      Name: <input type="text" id="users-name" /><br />
      <button id="pressme" type="button">Click here</button>
    </p>
    <p id="greeting"></p>

    <!-- Add two numbers -->
    <p>
      <input type="number" id="number1" /> +
      <input type="number" id="number2" /><br />
      <button id="addButton" type="button">Add</button>&nbsp;<span
        id="answer"
      ></span>
    </p>

    <!-- Check if number is greater than 5 -->
    <p>
      Try entering a number greater than 5, then click the button below:
      <input type="text" id="attempt" /><br />
      <button id="tryButton" type="button">Try your number</button></br>
      <span id="theResult"></span>
    </p>

wctd2022.js

console.clear();
console.log("Hello world");

let a = 4;
let b = 3;

console.log(a);
console.log(b);

let c = a + b;
console.log(c);

let nameButton = document.getElementById("pressme");
let addButton = document.getElementById("addButton");
let tryButton = document.getElementById("tryButton");

// set the event listener functions for each button
nameButton.addEventListener("click", sayhi);
addButton.addEventListener("click", addNumbers);
tryButton.addEventListener("click", isGreater);

// this is getting called when the greeting button is clicked
function sayhi() {
  let userName = document.getElementById("users-name").value;
  console.log(userName);
  let myGreetingSpot = document.getElementById("greeting");
  myGreetingSpot.innerHTML = "Hello, " + userName + "!";
  myGreetingSpot.style.fontWeight = "bold";
}

// this is getting called when the add button is clicked
function addNumbers() {
  let x = document.getElementById("number1").value;
  let y = document.getElementById("number2").value;

  let answerSpot = document.getElementById("answer");

  answerSpot.innerText = Number(x) + Number(y);
}

// this is getting called when pressing the button to try if a number is greater than 5
function isGreater() {
  let attemptText = document.getElementById("attempt").value;
  let attemptNumber = Number(attemptText);

  let resultSpot = document.getElementById("theResult");

  if (attemptNumber > 5) {
    resultSpot.innerText = "It was greater than 5!  Nice work!";
  } else {
    resultSpot.innerText = "It wasn't greater than 5.  You can try again.";
  }
}