JSFiddle - React, Tailwind, and code Playground

by Giorgio Malvone

HTML

<input id="number1" type="text"> </input>
+
<input id="number2" type="text"> </input>
<input type="button" value="Click Me!" onclick="calculate()"  ></input>
<input id="result" type="text" placeholder="Result" disabled> </input>

<input id="colourButton" type="button" value="Random Colour!" onclick="randomColour()"></input>

CSS

#result{
    display:block;
}

#colourButton{
    margin-top:50px;
}

JavaScript

var box1 = document.getElementById("number1");
var box2 = document.getElementById("number2");
var resultBox = document.getElementById("result");

var colours = ["pink", "lime", "red", "wheat", "orange", "yellow", "purple"];

function calculate() {
    resultBox.value = Number(box1.value) + Number(box2.value);
}

function randomColour() {
    var body = document.body;
    body.style.backgroundColor = colours[Math.floor(Math.random()*5)];
}