JSFiddle - React, Tailwind, and code Playground

by irbaz

HTML

<div class="cont">

        <div class="sum">
            <br>
            <h4>SUM OF NUMBERS:</h4>
                
                <br>
            <input type="number" placeholder="Enter the number"id="add">
            <button onclick="sum()">CHECK</button>
            <p>RESULT:</p>
            <p id="re"></p>
        </div>
        </div>

CSS

body{
        background-color: cadetblue;
    }
    .cont{
        height: 170vh;
        width: 80%;
        border: 1px solid white;
        background-color: white;
        margin-left: 12%;
        color: white;
        margin-top: 0%;
        box-shadow: 1px 1px 28px white;
    }
    h1{
        text-align: center;
        color: black;
    }
    h4{
        color: black;
    }
    button{
        height: 30px;
        width: 20%;
        background-color: black;
        border: 2px solid black;
        color: white;
    }
    input{
        height: 28px;
    }

    .sum{
        text-align: center;
    }
    
    .number{
        text-align: center;
    }
    p{
        color: black;
        font-weight: bold;
    }
    a{
        color: black;
        text-decoration: none;
    }

JavaScript

function sum(){
    let i;
    let sum=0;
    let n=document.getElementById("add").value;
    
    for(i=1;i<=n;i++){
            sum=i+sum;
        }
        
        document.getElementById('re').innerText=`SUM OF ${n}  IS  =${sum}`

   }