External Exam Download Resources Web Applications Games Recycle Bin

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:

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:

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:

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>