JSFiddle - React, Tailwind, and code Playground

by divinemamgai

HTML

<div class="correct_incorrect">
               <input type="hidden" id="correct_answers" value="10" />
               <input type="hidden" id="incorrect_answers" value="100" />
                     10
               /
                     100
          </div>

CSS

div.correct_incorrect
{
 padding: 5px 5px;   
 border: 5px solid #567;
 font-family: arial;
 color: #fff;
 font-size: 12px;
}

JavaScript

$(function () {

                      var correct = $('input.correct_answers').val();
                      var incorrect = $('input.correct_answers').val();
                      
                      $('div.correct_incorrect').css("background",function () {
                          
                          if( correct > incorrect )
                          {
                             return "#796";
                          }
                          else if( correct == incorrect )
                          {
                             return "#567";
                          }
                          else
                          {
                             return "#732";
                          }

                      });
                   });