Basic Calculator Task in JS
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
<title>Calculator</title>
<script>
function add()
{
var firstno=parseInt(document.Registrationform.firstno.value);
var secondno=parseInt(document.Registrationform.secondno.value);
var number=firstno+secondno;
document.Registrationform.output.value=number;
}
function minus()
{
var firstno=document.Registrationform.firstno.value;
var secondno=document.Registrationform.secondno.value;
var number=firstno-secondno;
document.Registrationform.output.value=number;
}
function multiply()
{
var firstno=document.Registrationform.firstno.value;
var secondno=document.Registrationform.secondno.value;
var number=firstno*secondno;
document.Registrationform.output.value=number;
}
function divide()
{
var firstno=document.Registrationform.firstno.value;
var secondno=document.Registrationform.secondno.value;
var number=firstno/secondno;
document.Registrationform.output.value=number;
}
function modulus()
{
var firstno=document.Registrationform.firstno.value;
var secondno=document.Registrationform.secondno.value;
var number=firstno%secondno;
document.Registrationform.output.value=number;
}
function reset()
{
document.Registrationform.firstno.value="";
document.Registrationform.secondno.value="";
document.Registrationform.output.value="";
}
</script>
</head>
<body>
<div class="container">
<div class="row">
<h1 class="text-center text-success">Calculator</h1>
<div class="col-md-6 m-auto" >
<form name="Registrationform" action="" method="post">
<div class="form-group mt-5">
<label for="firstno">First number</label>
<input type="text" name="firstno" class="form-control">
</div>
<div class="form-group mt-5">
<label for="secondno">Second number</label>
<input type="text" name="secondno" class="form-control">
</div>
<div class="form-group text-center mt-3" >
<button type="button" class="btn btn-success btn-lg px-5 border-0 rounded-0 " onclick="add();">Plus</button>
</div>
<div class="form-group text-center mt-3" >
<button type="button" class="btn btn-success btn-lg px-5 border-0 rounded-0 " onclick="minus();">Minus</button>
<button type="button" class="btn btn-success btn-lg px-5 border-0 rounded-0 " onclick="multiply();">Multiply</button>
</div>
<div class="form-group text-center mt-3" >
<button type="button" class="btn btn-success btn-lg px-5 border-0 rounded-0 " onclick="divide();">Divide</button>
<button type="button" class="btn btn-success btn-lg px-5 border-0 rounded-0 " onclick="modulus();">Modulus</button>
</div>
<div class="form-group text-center mt-3" >
<button type="button" class="btn btn-success btn-lg px-5 border-0 rounded-0 " onclick="reset();">Reset</button>
</div>
<div class="form-group mt-5">
<input type="text" name="output" class="form-control">
</div>
</form>
</div></div></div>
</body>
</html>
