JSFiddle - React, Tailwind, and code Playground

by weageoo

HTML

<input type="number" placeholder="Enter the number of days" min="0" max="40">
<div id="desk"></div>

CSS

input[type=number] {
    width: 250px;
}
#desk {
    height: 100px;
}

JavaScript

function makeColor(numberOfDays) {
    var ndMin = 0, ndMax = 40, ndMid = ndMin + (ndMax - ndMin) / 2, coef = 2*100/(ndMax-ndMin);
    
    if (numberOfDays < ndMin || numberOfDays > ndMax) {
        throw "Invalid argument 'numberOfDays'";
    }
    
    if (numberOfDays <= ndMid) {
        return "rgb(" + numberOfDays*coef + "%,100%,0%)";
    }
    
    return "rgb(100%," + (ndMax-numberOfDays)*coef + "%,0%)";
}

$("input[type=number]").change(function() {
    $("#desk").css("background-color", makeColor($(this).val()));
});