JQuery Calculator

Developer
Zac Clemans
Size
3,124 Kb
Views
6,072
  1. JQuery Calculator Previews
  2. JQuery Calculator HTML Codes
  3. JQuery Calculator CSS Codes
  4. JQuery Calculator JS Codes

How do I make an jquery calculator?

A responsive calculator built for freeCodeCamp using vanilla CSS (no Bootstrap) and jQuery. Inspired by Android styling.. What is a jquery calculator? How do you make a jquery calculator? This script and codes were developed by Zac Clemans on 14 January 2023, Saturday.

JQuery Calculator Previews
IQ Test

JQuery Calculator - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>jQuery Calculator</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <head> <title>Javascript Calculator</title> <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<div id="calc-body"> <div id="calc-disp"> <span class="bottom-align">0</span> </div> <div class="btn-row"> <div class="btn-clear"> C </div> </div> <div class="btn-row"> <div class="btn-num" id="btn-7" data-value="7"> 7 </div> <div class="btn-num" id="btn-8" data-value="8"> 8 </div> <div class="btn-num" id="btn-9" data-value="9"> 9 </div> <div class="btn-op" id="btn-div" data-value='div'> / </div> </div> <div class="btn-row"> <div class="btn-num" id="btn-4" data-value="4"> 4 </div> <div class="btn-num" id="btn-5" data-value="5"> 5 </div> <div class="btn-num" id="btn-6" data-value="6"> 6 </div> <div class="btn-op" id="btn-mult" data-value='mult'> * </div> </div> <div class="btn-row"> <div class="btn-num" id="btn-1" data-value="1"> 1 </div> <div class="btn-num" id="btn-2" data-value="2"> 2 </div> <div class="btn-num" id="btn-3" data-value="3"> 3 </div> <div class="btn-op" id="btn-minus" data-value='minus'> - </div> </div> <div class="btn-row"> <div class="btn-num" id="btn-decimal" data-value="."> . </div> <div class="btn-num" id="btn-0" data-value="0"> 0 </div> <div class="btn-op" id="btn-equal" data-value='equal'> = </div> <div class="btn-op" id="btn-plus" data-value='plus'> + </div> </div>
</div> <script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

JQuery Calculator - Script Codes CSS Codes

#calc-body { position: relative; top: 30px; width: 500px; height: 775px; margin: 0 auto; /*border: 2px solid rgb(41, 41, 41);*/
}
#calc-disp { display: block; width: 94%; height: 125px; text-align: right; line-height: 125px; padding-left: 3%; padding-right: 3%; background: rgba(0, 0, 0, 1); color: rgba(255, 255, 255, 1); font-weight: bold; font-size: 3em; overflow: auto;
}
.bottom-align { display: inline-block; vertical-align: bottom; line-height: normal; margin-bottom: 20px;
}
.btn-row { display: block; width: 100%;
}
.btn-num,
.btn-op { display: inline-block; width: 25.1%; line-height: 125px; margin-right: -5px; text-align: center; font-size: 2em;
}
.btn-num { background: rgba(49, 49, 49, 1); color: rgba(255, 255, 255, 1);
}
.btn-op { background: rgba(41, 41, 41, 1); color: rgba(175, 175, 175, 1);
}
.btn-clear { display: inline-block; width: 100%; line-height: 125px; text-align: center; font-size: 2em; background-color: rgba(241, 66, 50, 0.9);
}
@media screen and (max-width: 600px) { #calc-body { position: relative; top: 0; width: 100%; margin: 0 auto; /*border: 2px solid rgb(41, 41, 41);*/ }
}

JQuery Calculator - Script Codes JS Codes

var numBtn = $('.btn-num');
var opBtn = $('.btn-op');
var clearBtn = $('.btn-clear');
var display = $('#calc-disp .bottom-align');
var displayNum = 0;
var storedNum = 0;
var newDisp = true;
var currentOperator = '';
var previousOperator = '';
$(document).ready(function(){ numBtn.hover(function(){ $(this).css('background', 'rgba(49, 49, 49, 0.5)'); }, function(){ $(this).css('background', 'rgba(49, 49, 49, 1)'); }); opBtn.hover(function(){ $(this).css('background', 'rgba(41, 41, 41, 0.5)'); }, function(){ $(this).css('background', 'rgba(41, 41, 41, 1)'); }); clearBtn.hover(function(){ $(this).css('background', 'rgba(241, 66, 50, 0.7)'); }, function(){ $(this).css('background', 'rgba(241, 66, 50, 0.9)'); }); numBtn.click(function(){ input = $(this).attr('data-value'); // If a zero is the only thing in the display, clear it out if (display.html() === '0') { display.empty(); } // If an operator was pressed before, start a new line of numbers if (newDisp) { display.empty(); newDisp = false; } /* If the input chosen is a decimal point, check to see if there is already one present. If not include it. If the input isn't a decimal point, append to display without checking. */ if (input === '.') { if (display.html().indexOf('.') === -1) { display.append(input) } } else { display.append(input); } }); opBtn.click(function(){ newDisp = true; displayNum = parseFloat(display.html()); currentOperator = $(this).attr('data-value'); if (previousOperator === '') { storedNum = displayNum; previousOperator = currentOperator; } else { switch(previousOperator) { case 'div': display.html(storedNum / displayNum); displayNum = parseFloat(display.html()); break; case 'mult': display.html(storedNum * displayNum); displayNum = parseFloat(display.html()); break; case 'minus': display.html(storedNum - displayNum); displayNum = parseFloat(display.html()); break; case 'plus': display.html(storedNum + displayNum); displayNum = parseFloat(display.html()); break; } if (currentOperator === 'equal') { previousOperator = ''; } else { previousOperator = currentOperator; } storedNum = displayNum; } /*if (display.html() === '') { } opPressed = true; storedNum = displayNum;*/ }); clearBtn.click(function(){ displayNum = 0; storedNum = 0; currentOperator = ''; previousOperator = ''; display.empty().html('0'); newDisp = true; });
});
JQuery Calculator - Script Codes
JQuery Calculator - Script Codes
Home Page Home
Developer Zac Clemans
Username thalpha
Uploaded January 14, 2023
Rating 3
Size 3,124 Kb
Views 6,072
Do you need developer help for JQuery Calculator?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Zac Clemans (thalpha) Script Codes
Name
Camper News
Game of Life
Markdown Previewer
D3 Map Project
Personal Portfolio
Pomodoro Timer
Tic-Tac-Toe
FCC Camper Leaderboard Redux Refactor
FCC Camper Leaderboard
D3 Heatmap Project
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!