Create one number comparison application in JavaScript

Published by admin on

javascript number comparison application

Learn Javascript if-else by creating a simple comparator application :

In this tutorial, we will learn how to use the if-else statement in JavaScript. We will create one simple number comparator application. The user will have to enter two numbers on two input fields. It will have one button to find out the maximum number. If the user will click on the button, it will show us the maximum number that was entered.

 

Full program :

We will create one HTML file and add some styling to this file using inline CSS. For simplicity, we will also add the javascript code in the same HTML file.

Create one file called index.html and then fill the file with the below code :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Sample JS</title>
    <style>
        .inner-body {
            background-color: #7B1FA2;
            width: fit-content;
            border-radius: 0.4rem;
            padding: 2rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        input {
            border: none;
            border-radius: 0.4rem;
            margin: 10px 10px 10px 10px;
            text-align: center;
            line-height: 1.8rem;
            font-family: sans-serif;
        }

        button:hover {
            background-color: #F48FB1;
            cursor: pointer;
            cursor: hand;
        }

        button {
            align-content: center;
            font-family: sans-serif;
            padding-right: 1.5rem;
            height: 1.8rem;
            padding-left: 1.5rem;
            background: #F06292;
            border: none;
            border-radius: 0.4rem;
            color: white;
        }

        .result {
            color: white;
            padding-left: 0.8rem;
            font-family: sans-serif;
            font-size: 1.9rem;
            margin-right: 10px;
            margin-left: 10px;
        }
    </style>
</head>

<body>
    <script>
        function buttonClicked() {
            var firstNo = document.getElementById("firstNo").value;
            var secondNo = document.getElementById("secondNo").value;

            if (firstNo > secondNo) {
                document.getElementById("resultText").innerText = firstNo;
            } else {
                document.getElementById("resultText").innerText = secondNo;
            }
        }
    </script>
    <div class="inner-body">
        <div class="row">
            <input id="firstNo" type="text" placeholder="First number"></input>
        </div>
        <div class="row">
            <input id="secondNo" type="text" placeholder="Second number"></input>
        </div>
        <br/>
        <button onclick="buttonClicked()">Find Max</button>
        <text id="resultText" class="result">0</text>
    </div>
</body>

</html>

 

Output :

If you open the index.html file in a browser, it will look like below :
js find the maximum numberTry to enter two numbers in the input fields and click on the button. It will print the maximum number.

 

Explanation :

To learn about how it works, let’s break the above index.html file. It has css, js and html code in it.

– The code inside the <style></style> block is the CSS part.

– Javascript is written inside <script></script> block.

– Html is written inside <body></body>. We have put the main part in a <div> block with class name inner-body

 

Html :

<div class="inner-body">
    <div class="row">
        <input id="firstNo" type="text" placeholder="First number"></input>
    </div>
    <div class="row">
        <input id="secondNo" type="text" placeholder="Second number"></input>
    </div>
    <br/>
    <button onclick="buttonClicked()">Find Max</button>
    <text id="resultText" class="result">0</text>
</div>

 

javascript :

function buttonClicked() {
    var firstNo = document.getElementById("firstNo").value;
    var secondNo = document.getElementById("secondNo").value;

    if (firstNo > secondNo) {
        document.getElementById("resultText").innerText = firstNo;
    } else {
        document.getElementById("resultText").innerText = secondNo;
    }
}

As you can see in the javascript part :

buttonClicked method is invoked if the user clicks on the button.

– It takes the text in the firstNo element and put it in a variable firstNo.

– Similarly, it takes the text in the secondNo element and put it in secondNo variable.

– Using an if-else condition, it checks if the first number is greater or less than the second number.

– It modifies the text element with id resultText with the larger number value.

 

Conclusion :

In this example, we have put everything including HTML, CSS, and javascript code in one HTML file. This is not a good practice. Try to put the CSS and javascript part in two separate files for the above program and try to run it.
We hope that you have found something useful in this program. If you have any queries, don’t hesitate to drop one comment below.

Categories: javascript

Leave a Reply

Your email address will not be published. Required fields are marked *