JSFiddle - React, Tailwind, and code Playground

by Michael Griffin

HTML

<div class="container">
    <div class="row">
        <input class="name" placeholder="A Student name"></input>
        <input class="grade result"></input>
    </div>
    <div class="row">
        <input class="name" placeholder="A Student name"></input>
        <input class="grade result"></input>
    </div>
    <div class="row">
        <input class="name" placeholder="A Student name"></input>
        <input class="grade result"></input>
    </div>
    <div class="row">
        <input class="name" placeholder="A Student name"></input>
        <input class="grade result"></input>
    </div>
    <div class="row">
        <input class="name" placeholder="A Student name"></input>
        <input class="grade result"></input>
    </div>
    <div class="row">
        <input class="name" placeholder="A Student name"></input>
        <input class="grade result"></input>
    </div>
    <button class="submit" onClick="checkGrade()">Check Grades</button>
</div>
<ul class="legend">
    <li class="D">DISTINCTION</li>
    <li class="M">MERIT</li>
    <li class="P">PASS</li>
    <li class="F">FAIL</li>
</ul>

CSS

.container {
    width:420;
}
input {
    line-height: 30px;
    font-size: 18px;
    color: #333;
    text-transform: uppercase;
    padding: 5px;
    border: 1px solid #333;
    text-align: center;
}
input:focus {
    outline: none;
    box-shadow: 0px 0px 10px 1px #1abc9c;
}
.submit {
    display: block;
    position: relative;
    width: 428px;
    line-height: 30px;
    font-size: 18px;
    color: #333;
    text-transform: uppercase;
    padding: 5px;
    margin: 10px 0;
    border: 0px;
    background-color: #1abc9c;
    -webkit-transition: all 200ms ease-in-out;
}
.submit:hover {
    background-color: #16a085;
    cursor: pointer;
}
.name {
    width: 300px;
}
.result {
    width: 100px;
}
.row {
    padding: 5px 0;
}
.legend {
    width: 320px;
    padding: 5px;
    display: flex;
    align-items: flex-start;
    flex-direction: row;
    margin-left: 50px;
}
ul li {
    list-style: none;
    padding: 10px;
}
.D {
    background-color: green;
    color: #333;
}
.M {
    background-color: yellow;
    color: #333;
}
.P {
    background-color: orange;
    color: #333;
}
.F {
    background-color: red;
    color: #333;
}

JavaScript

window.checkGrade = function () {
    var gd = document.getElementsByClassName('grade');
    for (var i = 0; i < gd.length; i++) {
        var g = document.getElementsByClassName('grade')[i].value;
        var g1 = document.getElementsByClassName('grade')[i];
        if (g >= 80) {
            g1.style.backgroundColor = "green";
        } else if (g >= 60) {
            g1.style.backgroundColor = "yellow";
        } else if (g >= 40) {
            g1.style.backgroundColor = "orange";
        } else if (g >= 1) {
            g1.style.backgroundColor = "red";
        } else {
            g1.style.backgroundColor = "pink";
        }
    }

}