JSFiddle - React, Tailwind, and code Playground

by John Brown

HTML

<title>Excercise 2</title>
<p>Enter a number and click the x2 button to have it doubled</p>
<p id="input">1</p>
<br>
<button id="btnAdd">x2</button>
<br>
<button class="redBtn" id="btnRed">BIG RED BUTTON</button>

CSS

.redBtn {
    background-color: red;
}

JavaScript

(function () {
    
    var doubleButton = function () {
        var inputVal = document.getElementById("input").innerHTML;
        var inputEl = document.getElementById("input");
        var sum = 0;
        var input = Number(inputEl.textContent)
        sum = input + input;
        inputEl.textContent = sum;

    }
    var boom = function () {
        alert("BOOM!!!!! Dont you know you should never press the big red button")
    }
    document.getElementById("btnAdd").addEventListener("click", doubleButton, false);
    document.getElementById("btnRed").addEventListener("click", boom, false);
}());