Created
January 8, 2022 23:28
-
-
Save SpaceShot/72b30dd12d275c7bb8cfa290dde6bec3 to your computer and use it in GitHub Desktop.
JavaScript Code - WCTD 2022 sample
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- 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> <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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."; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment