JSFiddle - React, Tailwind, and code Playground

by irbaz

HTML

<div class="con">
        <div class="a">
            <br>
            <h3>ODD OR EVEN</h1>
                <br>
            <input type="number" placeholder="Enter the number" id="num">
            <button onclick="check()">CHECK</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 rgb(255, 255, 255);
        box-shadow: 1px 1px 20px rgb(255, 255, 255) ;
        align-items: center;
        text-align: center;
        background-color: white;
        
    }
    input{
        height: 28px;
    }
    button{
        height: 30px;
        width: 20%;
        background-color:black;
        border: 1px solid black;
        color: white;
        cursor: pointer;
    }
    p{
        font-weight: bold;
    }
    a{
        color: black;
        text-decoration: none;
    }

JavaScript

function check(){
            let find=document.getElementById("num").value;
            if(find%2==0){
                document.getElementById("out").innerText=`${find}  is EVEN number`;
            }
            else{
                document.getElementById("out").innerText=`${find}  is ODD number`;
            }
        }