Calculator
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
button{
margin: 10px;
width: 100%;
}
</style>
</head>
<body>
<div class="col-lg-4" style="margin: 5% auto">
<div class="card p-3">
<div >
<input class="form-control" type="text" onclick="Num1();" id="num1"><br>
<span id="Sign"></span><input class="form-control" type="text" onclick="Num2();" id="num2"><br>
<label id="result"></label> <br>
</div>
<div class="row">
<div class="col"><button class="btn btn-info" id="Clear">A/C</button></div>
<div class="col"><button class="btn btn-info" onclick="Remove();" id="Clear122">X</button></div>
<div class="col"><button class="btn btn-info" id="sdf">%</button></div>
<div class="col"><button class="btn btn-info" onclick="ModSign();" id="mod">%</button></div>
</div>
<div class="row">
<div class="col"><button class="btn btn-info" onclick="number1()" id="btn1">1</button></div>
<div class="col"><button class="btn btn-info" onclick="number2()" id="btn2">2</button></div>
<div class="col"><button class="btn btn-info" onclick="number3()" id="btn3">3</button></div>
<div class="col"><button class="btn btn-info" onclick="DivSign();" id="div">/</button></div>
</div>
<div class="row">
<div class="col"><button class="btn btn-info" onclick="number4()" id="btn4">4</button></div>
<div class="col"><button class="btn btn-info" onclick="number5()" id="btn5">5</button></div>
<div class="col"><button class="btn btn-info" onclick="number6()" id="btn6">6</button></div>
<div class="col"><button class="btn btn-info" onclick="AddSign();" id="add">+</button></div>
</div>
<div class="row">
<div class="col"><button class="btn btn-info" onclick="number7()" id="btn7">7</button></div>
<div class="col"><button class="btn btn-info" onclick="number8()" id="btn8">8</button></div>
<div class="col"><button class="btn btn-info" onclick="number9()" id="btn9">9</button></div>
<div class="col"><button class="btn btn-info" onclick="SubSign();" id="sub">-</button></div>
</div>
<div class="row">
<div class="col"><button class="btn btn-info" onclick="numberDot()" id="dot">.</button></div>
<div class="col"><button class="btn btn-info" onclick="number0()" id="btn0">0</button></div>
<div class="col"><button class="btn btn-info" onclick="Result();" id="equal">=</button></div>
<div class="col"><button class="btn btn-info" onclick="MulSign();" id="mul">*</button></div>
</div>
</div>
</div>
<script>
var num1=document.getElementById('num1');
var num2=document.getElementById('num2');
var Sign=document.getElementById('Sign');
var result=document.getElementById('result');
var flag="";
document.getElementById('Clear').addEventListener('click',Clear);
//-----------Clear
function Clear() {
num1.value="";
num2.value="";
Sign.innerText="";
result.innerHTML="";
}
//------------Sign Set---
function ModSign() {
Sign.innerText="%";
}
function AddSign() {
Sign.innerText="+";
}
function SubSign() {
Sign.innerText="-";
}
function DivSign() {
Sign.innerText="/";
}
function MulSign() {
Sign.innerText="*";
}
//------Flag Set------------
function Num1() {
flag="num1";
}
function Num2() {
flag="num2";
}
//------------------------------
function number1() {
if(flag=="num1")
{
num1.value+="1";
}else
{
num2.value+="1";
}
}
function number2() {
if(flag=="num1")
{
num1.value+="2";
}else
{
num2.value+="2";
}
}
function number3() {
if(flag=="num1")
{
num1.value+="3";
}else
{
num2.value+="3";
}
}
function number4() {
if(flag=="num1")
{
num1.value+="4";
}else
{
num2.value+="4";
}
}
function number5() {
if(flag=="num1")
{
num1.value+="5";
}else
{
num2.value+="5";
}
}
function number6() {
if(flag=="num1")
{
num1.value+="6";
}else
{
num2.value+="6";
}
}
function number7() {
if(flag=="num1")
{
num1.value+="7";
}else
{
num2.value+="7";
}
}
function number8() {
if(flag=="num1")
{
num1.value+="8";
}else
{
num2.value+="8";
}
}
function number9() {
if(flag=="num1")
{
num1.value+="9";
}else
{
num2.value+="9";
}
}
function number0() {
if(flag=="num1")
{
num1.value+="0";
}else
{
num2.value+="0";
}
}
function numberDot() {
if(flag=="num1")
{
num1.value+=".";
}else
{
num2.value+=".";
}
}
//--------------Result--
function Result() {
switch (Sign.innerText) {
case '%':result.innerHTML=parseFloat(num1.value)%parseFloat(num2.value);
break;
case '+':result.innerHTML=parseFloat(num1.value)+parseFloat(num2.value);
break;
case '-':result.innerHTML=parseFloat(num1.value)-parseFloat(num2.value);
break;
case '/':result.innerHTML=parseFloat(num1.value)/parseFloat(num2.value);
break;
case '*':result.innerHTML=parseFloat(num1.value)*parseFloat(num2.value);
break;
}
}
//-------------Remove last char
function Remove() {
if(flag=="num1")
{
num1.value= num1.value.substring(0, num1.value.length - 1);
}else
{
num2.value= num2.value.substring(0, num2.value.length - 1);
}
}
</script>
</body>
</html>
Comments
Post a Comment