JSFiddle - React, Tailwind, and code Playground

by irbaz

HTML

<div class="con">
        <div class="a">
            <br>
            <h4>LARGE NUMBER BETWEEN TWO   NUMBER </h4>
            <br>
            <input type="number" placeholder="Enter First number" id="fir">
            
            <input type="number" placeholder="Enter second number" id="sec">
            <button onclick="big()">OK</button>
            <p>OUTPUT:</p>
            <p id="out"></p>
        </div>
        
    </div>

CSS

body{
        background-color: cadetblue;
    }
    .con{
        margin-left: 22%;
        margin-top: 0%;
    }
    .a{
        height: 170vh;
        width: 80%;
        border: 1px solid white;
        box-shadow: 1px 1px 27px white;
        align-items: center;
        text-align: center;
        background-color: white;
    }
    input{
        height: 28px;
    }
    p{
        font-weight: bold;
    }
    button{
        height: 30px;
        width: 15%;
        background-color: black;
        border: 1px solid black;
        color: white;
    }
    a{
        color: black;
        text-decoration: none;
    }

JavaScript

function big(){
            let one=document.getElementById("fir").value;
            let two=document.getElementById("sec").value;

            if(one>two){
                document.getElementById("out").innerText=`${one} is GREATER than ${two}`;
            }
            else if(one<two){
                document.getElementById("out").innerText=`${one} is LESSER than ${two}`;
            }
            else if(one==two){
                document.getElementById("out").innerText=`${one} are EQUAL ${two}`;
            }

            else{
                document.getElementById("out").innerText="Enter the number";
            }
        }