Skip to content

Program to calculate the number of forces

HTML:

<div class="container">
        <h2>Program to calculate the number of forces</h2>
        <label>BASE</label><br>
        <input type="text" id="base" /><br>
        <small>Enter the base value.</small><br><br>
        <label>FORCE</label><br>
        <input type="text" id="force" /><br>
        <small>Enter the force value.</small><br><br>
        <label>RESULT</label><br>
        <input type="text" id="result" disabled /><br><br>
        <button type="button" id="buton">CALCULATE</button>
        <div id="mes"></div>
    </div>

CSS:

        body{
            padding:0;
            margin:0;
            font-family:Arial;
            background:#262626;
        }
        .container{
            width:500px;
            height:350px;
            background-color:#d7d7d7;
            border-radius:10px;
            padding:20px;
            position:absolute;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
        }
        input[type="text"]{
            width:460px;
            padding:4px;
        }
        button[type="button"]{
            cursor:pointer;
            padding:10px;
            font-family:sans-serif;
            font-weight:bold;
            background:#0062c6;
            color:#fff;
            border:none;
            border-radius:7px;
            transition:.5s;
        }
        button[type="button"]:hover{
            background:#262626;
            color:#fff;
        }
        #mes{
            margin-top:8px;
            font-family:Arial;
            font-size:16px;
        }

JS:

 var calculate = document.getElementById("buton");
        calculate.onclick = function () {
            var baseNumber = Number(document.getElementById("base").value);
            var forceNumber = Number(document.getElementById("force").value);
            var Result = document.getElementById("result");
            var message = document.getElementById("mes");
            mes.innerHTML = "";
            var is = 1;
            while (forceNumber!=0) {
                is *= baseNumber;
                --forceNumber;
            }
            Result.value = is;
            try{
                if (baseNumber == "") throw "Do not leave the base space blank.";
                if (isNaN(baseNumber)) throw "Enter a number in the base field.";
                if (baseNumber < 0) throw "0 < base number , please.";
                if (isNaN(forceNumber)) throw "Enter a number in the force field.";
                if (forceNumber < 0) throw "0 < force number , please."
            } catch (err) {
                message.innerHTML = err;
            } finally {
                document.getElementById("base").value = "";
                document.getElementById("force").value = "";
            }
        }

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: