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 :
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 block is the CSS part.
-
Javascript is written inside block.
-
Html is written inside
. We have put the main part in ablock 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.
