Scribd
Upload
3K views5 pages

Calculator

Uploaded by

rachananavath5
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3K views5 pages

Calculator

Uploaded by

rachananavath5
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html calculator|minor project 2</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-
icons@1.11.1/font/bootstrap-icons.css">
<style>
.calc-btn{
width:60px;
height: 60px;
}
.calc-display{
background-color: gray;
color: white;
height: 100px;
width: 310px;
border-radius: 5px;

}
.inputString{
margin-top: 5px;
height: 20px;
display: block;
font-size: 20px;
}

.expressionString{
margin-top: 5px;
height: 20px;
display: block;
font-size: 20px;
}

.valueString{
margin-top: 5px;
height: 20px;
display: block;
font-size: 20px;
}
</style>
</head>
<body>
<div class="container p-5">
<div class="d-flex justify-content-center">
<div class="col-sm-12 col-md-4 col-lg-4">
<div class="card ">
<div class="d-flex justify-content-center p-3">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 calc-
display">
<div id="number_div" class="inputstring">0</div>
<div id="expression" class="expression"></div>
<div id="value_div" class="valuestring"></div>
</div>
<input type="hidden" id="savedExpression">
</div>
</div>
<div class="d-flex justify-content-center p-3">
<div class="row">
<div class="col-sm-3 col-md-3 col-lg-3 col-xl-3">
<button type="button" class="btn btn light calc-btn" data-
event_key="NumLock"><small>Num Lock</small></button>
</div>
<div class="col-sm-3 col-md-3 col-lg-3 col-xl-3">
<button type="button" class="btn btn light calc-
btn" data-event_key="Delete">Cl</button>
</div>
<div class="col-sm-3 col-md-3 col-lg-3 col-xl-3">
<button type="button" class="btn btn light calc-
btn" data-event_key="Delete">Del</button>
</div>
<div class="col-sm-3 col-md-3 col-lg-3 col-xl-3">
<button type="button" class="btn btn light calc-
btn" data-event_key="/">/</button>
</div>
</div>
</div>
<div class="d-flex justify-content-center p-3">
<div class="row">
<div class="col-sm-3 col-md-3 col-lg-3 col-xl-3">
<button type="button" class="btn btn light calc-
btn" data-event_key="7">7</button>
</div>
<div class="col-sm-3 col-md-3 col-lg-3 col-xl-3">
<button type="button" class="btn btn light calc-
btn" data-event_key="8">8</button>
</div>
<div class="col-sm-3 col-md-3 col-lg-3 col-xl-3">
<button type="button" class="btn btn light calc-
btn" data-event_key="9">9</button>
</div>
<div class="col-sm-3 col-md-3 col-lg-3 col-xl-3">
<button type="button" class="btn btn light calc-
btn" data-event_key="*">*</button>
</div>
</div>
</div>
<div class="d-flex justify-content-center p-3">
<div class="row">
<div class="col-sm-3 col-md-3 col-lg-3 col-xl-3">
<button type="button" class="btn btn light calc-
btn" data-event_key="4">4</button>
</div>
<div class="col-sm-3 col-md-3 col-lg-3 col-xl-3">
<button type="button" class="btn btn light calc-
btn" data-event_key="5">5</button>
</div>
<div class="col-sm-3 col-md-3 col-lg-3 col-xl-3">
<button type="button" class="btn btn light calc-
btn" data-event_key="6">6</button>
</div>
<div class="col-sm-3 col-md-3 col-lg-3 col-xl-3">
<button type="button" class="btn btn light calc-
btn" data-event_key="-">-</button>
</div>
</div>
</div>
<div class="d-flex justify-content-center p-3">
<div class="row">
<div class="col-sm-3 col-md-3 col-lg-3 col-xl-3">
<button type="button" class="btn btn light calc-
btn" data-event_key="1">1</button>
</div>
<div class="col-sm-3 col-md-3 col-lg-3 col-xl-3">
<button type="button" class="btn btn light calc-
btn" data-event_key="2">2</button>
</div>
<div class="col-sm-3 col-md-3 col-lg-3 col-xl-3">
<button type="button" class="btn btn light calc-btn" data-
event_key="3">3</button>
</div>
<div class="col-sm-3 col-md-3 col-lg-3 col-xl-3">
<button type="button" class="btn btn light calc-
btn" data-event_key="+">+</button>
</div>
</div>
</div>
<div class="d-flex justify-content-center p-3">
<div class="row">
<div class="col-sm-6 col-md-6 col-lg-6 col-xl-6">
<button type="button" class="btn btn light calc-btn"
style="width: 150px;">0</button>
</div>
<div class="col-sm-3 col-md-3 col-lg-3 col-xl-3">
<button type="button" class="btn btn light calc-
btn">.</button>
</div>
<div class="col-sm-3 col-md-3 col-lg-3 col-xl-3">
<button type="button" class="btn btn light calc-
btn">=</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
crossorigin="anonymous"></script>
<script src="vendor/bootstrap/js/bootstrap.js"></script>
<script>
$(document).on('keypress', function(e){
$('button[data-event_key="'+e.key+'"]').addClass('active')
if((e.keyCode >=48 && e.keyCode <= 57) || (e.keyCode >=96 && e.keyCode <=
105)){
appendNumber(e.key)
}else{
if(e.key=='+' || e.key =='-' ||e.key=='/' || e.key=='*'){
generateExpression(e.key)
}else if(key == '='){
evaluateExpression()
}else if( key== 'Delete'){
clearCalc();
}
}

console.log(e.key);
})

$(document).on('keyup', function(e){
$('button[data-event_key="'+e.key+'"]').removeClass('active')
console.log(e.key);
})

$('.calc-btn').on('click',function(e){
var key = $(this).data('event_key')
if(key!='+' && key!='-' && key!='=' key!='.' && key!='*' && key!='/' &&
key!='Delete' && key!='NumLock' ){
appendNumber(key)
}else{
if(key=='+' || key =='-' || key=='/' || key=='*'){
generateExpression(key)
}else if(key == '='){
evaluateExpression()
}else if( key== 'Delete'){
clearCalc();
}
}
console.log(key)
})

function appendNumber(number){
var existingNumber =$("#number_div").html();
console.log(existingNumber);
var currentString = number;
var outputString = '';
if(existingNumber!='' && existingNumber!=undefined && existingNumber!= null){
if(existingNumber== '0'){
outputString = number
}else{
outputString = existingNumber+=currentString
}

}else{
outputString = currentString;

}
$("#number_div").html(outputString);
}
function generateExpression(operator){
var existingNumber = $("#number_div").html();
var currentOperator = operator;
var expression = '';
var savedExpression = $("#savedExpression").val();
if(savedExpression==''|| savedExpression==undefined|| savedExpression==null){
expression = parseInt(existingNumber) + operator
}else{
expression = savedExpression +existingNumber +operator;
}
$("#number_div").html("")
$("#savedExpression").val(expression)
$("expression").html(expression)
}
function evaluateExpression(){
var result =' ';
var expression =$("#savedExpression").val();
var existingNumber = $("#number_div").html();
if(existingNumber! = ''|| existingNumber!= null|| existingNumber!=undefined){
expression = expression +parseInt(existingNumber);
$("expression").html(expression)
}
result =eval(expression);
$("#savedExpression").val(" ")
$("#number_div").html(result)
$("#value_div").html(result)
}
function clearCalc(){
$("#number_div").html("")
$("#savedExpression").val(" ")
$("expression").html(" ")
$("#value_div").html(" ")

}
</script>
</body>
</html>

You might also like