Build a Minimal Arithmetic Calculator in HTML and Javascript Full Project For Beginners

Build a Minimal Arithmetic Calculator in HTML and Javascript Full Project For Beginners

 

Welcome folks today in this blog post we will be building a minimal arithmetic calculator in html and javascript. All the full source code of the application is shown below.

 

 

Get Started

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

index.html

 

<html>
<head>
   <title>Calc</title>

<script language=javascript type="text/javascript">

var plus,minus,divide,multiply

function initialize(){
 plus=document.calc.operator.options[0]
 minus=document.calc.operator.options[1]
 divide=document.calc.operator.options[2]
 multiply=document.calc.operator.options[3]
}

function calculate(){
    a = parseInt(document.calc.val1.value)
    b = parseInt(document.calc.val2.value)
    if (plus.selected)
        document.calc.answer.value = a + b
    if (minus.selected)
        document.calc.answer.value = a - b
    if (divide.selected)
        document.calc.answer.value = a / b
    if (multiply.selected)
        document.calc.answer.value = a * b  
}

</script>

</head>

<body onLoad="initialize()">
<h2>Calc</h2>

Enter a number in the first box and a number in the second box and select the answer button to see the answer.
<br>
Change the operation via the dropdown selection box if desired.
<form name="calc" action="post">
<input type=text name=val1 size=10>

<select name=operator>
<option value=plus>+
<option value=minus>-
<option value=divide>/
<option value=multiply>*
</select>

<input type=text name=val2 size=10>
=
<input type=text name=answer size=10>
<input type=button value=answer onClick="calculate()">
</form>

<br><br>


</body>
</html>

 

See also  Join 10 Javascript Whatsapp Group Links For Web Developers in 2021 | Whatsapp Group Links For Javascript Developers

 

And now if you open the index.html file inside the browser you will see the below output

 

Leave a Reply