JSFiddle - React, Tailwind, and code Playground

by Malik Naik

HTML

<div class="container">
  <div class="row">
  <input class="name" placeholder="A Student name"></input>
  <input id="grade" class="grade result"></input>
  </div>
  <div class="row">
  <input class="name" placeholder="A Student name"></input>
  <input id="grade" class="grade result"></input>
  </div>
<button class="submit" onClick="checkGrade()">Button</button>
</div>

CSS

.container {
  width:420;
}

input {
  line-height: 30px;
  font-size: 18px;
  color: #333;
  text-transform: uppercase;
  padding: 5px;
  border: 1px solid #333;
}

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; 
}

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 >=0) {
       g1.style.backgroundColor = "red";
     }else {
       g1.style.backgroundColor = "pink";
     }
   }

}