JavaScript Challenges #0 warmup

Question 1: Create the following file in VS Code, save it, and launch it in your favourite browser:

easy.html

<style>
  body { background-color: aqua; }
</style>
<img src="https://digisoln.com/print.png">
<h1 id="words"> hello </h1>
<button onclick="talk()"> talk </button>
<script>
  function talk(){
      document.getElementById("words").innerHTML = "goodbye"
  }
</script>

Question 2: With the HTML file you just created in Question 1, make the following changes:

• Change the background-color from aqua to salmon
• Change the image from a printer to your favourite animal or food (you can use any safe image from the net)
• Instead of saying "goodbye" when i click the button, make it say "mate" instead (when i click the button)
• Change the text displayed on the button that i click on, so that instead of "talk", the button label reads "click me"
• Make sure that after making all these changes, the page still works correctly (i.e., the text changes when i click the button).

Question 3: Create the following file in VS Code, save it, and launch it in your favourite browser:

play.html

<p id="counter"> 0 </p>
<button onclick="play()"> click me </button>
<script>
    var count = 0;

    function play(){
        count = count + 1;
        document.getElementById("counter").innerHTML = count;
    }
</script>

Question 4: With the HTML file you just created in Question 3, make the following changes:

• Add a background-color (look at the first question for how to do this)
• Add an image of a calculator from the internet
• Modify the game so that it counts up 2 at a time instead of 1
• Can you make the counter text bigger? Hint: change the p tags to h1
• Make sure that after making all these changes, the page still works correctly

Question 5: Create the following file in VS Code, save it, and launch it in your favourite browser:

calculator.html

<input type="text" id="num1"><br>
<input type="text" id="num2"><br>
<button onclick="add()"> add </button>
<h1 id="result">?</h1>

<script>
function add(){
    num1 = parseInt(document.getElementById("num1").value);
    num2 = parseInt(document.getElementById("num2").value);
    total = num1 + num2;
    document.getElementById("result").innerHTML = total;
}
</script>

Question 6: With the HTML file you just created in Question 5, make the following changes:

• Use the calculator to add up two numbers - 13 and 31 - what is the answer?
• What happens if you change the + symbol in the script to -, / or * ?
• Using the -, / and * operators, can you modify this calculator so it also has a minus, times and divide button
• This could be a little hard, so here is the start of the answer, a minus button, so you just have to add a times button and divide button:

calculator with minus button as well.html

<input type="text" id="num1"><br>
<input type="text" id="num2"><br>
<button onclick="add()"> add </button>
<button onclick="minus()"> minus </button>
<h1 id="result">?</h1>

<script>
function add(){
    num1 = parseInt(document.getElementById("num1").value);
    num2 = parseInt(document.getElementById("num2").value);
    total = num1 + num2;
    document.getElementById("result").innerHTML = total;
}

function minus(){
    num1 = parseInt(document.getElementById("num1").value);
    num2 = parseInt(document.getElementById("num2").value);
    total = num1 - num2;
    document.getElementById("result").innerHTML = total;
}
</script>