JSFiddle - React, Tailwind, and code Playground

by karin

HTML

<div class="container">
    <p id="demo"></p>
    <input id="myNo" type="text" />
    <button id="myButton" onclick="takeValue()">Click me</button>
</div>

CSS

.container {
    width:400px;
    background:#ddd;
}
.container p {
    margin:2em;
    background:#ebebeb;
    word-wrap:break-word;
}
.high {
    color:#FC0327;
}
.low {
    color:#9CFA7D;
}

JavaScript

function takeValue() {
    n = 1;
    document.getElementById("demo").innerHTML = "";


    do {

        document.getElementById("demo").innerHTML += myNo.value;
        n++;
    }
    while (n < myNo.value)
   
}

function changeClass() {
    if (myNo.value < 5) {
        var element = document.getElementById("demo");
        element.classList.add("high");
    }
    else if(myNo.value > 5){
        var element = document.getElementById("demo");
        element.classList.add("low");
    }
}

    document.getElementById("myButton").addEventListener('click', changeClass);
window.onload = function () {
    
}