JSFiddle - React, Tailwind, and code Playground

by Vitorino fernandes

HTML

<p>Select your first colour:</p>
<input type="radio" id="red" name="primary" value="0">Red
<br>
<input type="radio" id="yellow" name="primary" value="1">Yellow
<br>
<input type="radio" id="blue" name="primary" value="2">Blue
<br>
<p>Select your second colour:</p>
<input type="radio" id="green" name="other" value="0">Green
<br>
<input type="radio" id="white" name="other" value="1">White
<br>
<input type="radio" id="purple" name="other" value="2">Purple
<br>
<input type="button" id="mixColours" value="Mix!">
<br />
<span id="colourResult"> </span>

<br />
<br />

JavaScript

var $ = function (id) {
    return document.getElementById(id);
};

var red = $("red");
var yellow = $("yellow");
var blue = $("blue");
var green = $("green");
var white = $("white");
var purple = $("purple");

var mixColours = function mixColours() {

    if (red.checked && green.checked) {
        $("colourResult").innerHTML = "You made Yellow!";
    } else if (red.checked && white.checked) {
        $("colourResult").innerHTML = "You made Pink!";
    } else if (red.checked && purple.checked) {
        $("colourResult").innerHTML = "You made Mauve!";
    }

    if (yellow.checked && green.checked) {
        $("colourResult").innerHTML = "You made Yellow!";
    } else if (yellow.checked && white.checked) {
        $("colourResult").innerHTML = "You made Light Yellow!";
    }

};

window.onload = function () {
    $("mixColours").onclick = mixColours;
};