This is an example for make simple calculator with Jquery. jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript.
Step 1:
Create a folder calculator in htdocs/ directory. And create index.html file inside htdocs/calculator/ directory.
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Webeecafe Calculator</title> <link rel="stylesheet" type="text/css" href="css/main.css"> </head> <body> <div class="calculator_container"> <div class="calculator_card"> <div class="brand"> <h6>Webeecafe Calculator</h6> </div> <div class="calculator_display"> <input type="text" value="" id="display" readonly> </div> <div class="button_container"> <div class="button_row"> <button class="c_but" disabled>C</button> <button class="c_but" disabled>CE</button> <button class="c_but" disabled>BACK</button> <button class="green" id="standby">ON</button> </div> <div class="button_row"> <button class="c_but" disabled>7</button> <button class="c_but" disabled>8</button> <button class="c_but" disabled>9</button> <button class="c_but" disabled>-</button> </div> <div class="button_row"> <button class="c_but" disabled>4</button> <button class="c_but" disabled>5</button> <button class="c_but" disabled>6</button> <button class="c_but" disabled>+</button> </div> <div class="button_row"> <button class="c_but" disabled>1</button> <button class="c_but" disabled>2</button> <button class="c_but" disabled>3</button> <button class="c_but" disabled>*</button> </div> <div class="button_row"> <button class="c_but" disabled>0</button> <button class="c_but" disabled>/</button> <button class="c_but" disabled>.</button> <button class="c_but" disabled>=</button> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script type="text/javascript" src="js/main.js"></script> </body> </html>
Step 2:
Now create two folder css and js inside calculator/ directory.
Inside CSS folder create a new file main.css and paste this styles.
main.css
body{ background: linear-gradient(45deg, #741fe4, #cc21b7); } .calculator_container{ display: flex; height: 100vh; } .calculator_card{ margin: auto; background: #a4a9a4; min-height: 100px; min-width: 100px; border-radius: 10px; box-shadow: 2px 15px 25px #000000; } .brand{ padding: 15px 15px 0 15px; } .brand h6{ margin: 0; font-family: cursive; color: #ff0000b5; font-size: 16px; } .calculator_display{ padding: 15px; } .calculator_display input{ height: 40px; text-align: right; width: 100%; font-size: 20px; border-radius: 10px; border:none; box-shadow: 0px -1px 12px #00000094; font-weight: bold; font-family: cursive; } .calculator_display input:focus{ outline: none; } .button_row{ display: flex; justify-content: space-between; padding: 0 15px 15px 15px; } .c_but{ width: 70px; height: 30px; margin: 5px; font-size: 15px; font-weight: bold; font-family: cursive; } #standby{ width: 70px; height: 30px; margin: 5px; font-size: 15px; font-weight: bold; font-family: cursive; } #standby:focus{ outline: none; } .green{ background: lightgreen; } .red{ background: red; }
Then create main.js file inside js folder and paste this script.
main.js
$(document).ready(function(){ var display_value = ''; var first_value = 0; var operator = ''; var new_value = 0; $('#standby').on('click', function(){ if ($(this).hasClass('green')) { $('.c_but').removeAttr('disabled'); $(this).removeClass('green'); $(this).addClass('red'); $(this).html('OFF'); $('.c_but').css('box-shadow','1px 1px 1px black'); display(0); operator = ''; new_value = 0; }else{ $('.c_but').prop('disabled', true); $(this).removeClass('red'); $(this).addClass('green'); $(this).html('ON'); $('.c_but').css('box-shadow','none'); display(''); } }); //calculation $('.c_but').on('click', function(){ var button_value = $(this).html(); if (button_value === 'C') { display_value = 0; new_value = 0; } else if(button_value === 'CE'){ new_value = 0; } else if(button_value === 'BACK'){ if (new_value.length == 1) { new_value = 0; }else{ new_value = new_value.substring(0, new_value.length-1); } } else if(button_value === '.'){ new_value += '.'; } else if(isNumber(button_value)){ if (new_value == 0) new_value = button_value; else new_value = new_value + button_value; } else if (isOperator(button_value)) { first_value = parseFloat(new_value); operator = button_value; new_value = ''; } else if (button_value === '=') { new_value = operate(first_value,new_value,operator); operator= null; } display(new_value); }); function isNumber(value){ return !isNaN(value); } function isOperator(value){ if (value == '/') { return value; } else if (value == '*') { return value; } else if (value == '+') { return value; } else if (value == '-') { return value; } else { return false; } } function operate(a,b,operator){ a = parseFloat(a); b = parseFloat(b); if (operator == '+') { return a+b; } else if (operator == '-') { return a-b; } else if (operator == '/') { return a/b; } else if (operator == '*') { return a*b; } else { return 0; } } function display(display_value){ var display_value = display_value.toString(); $('#display').val(display_value.substring(0,10)); } });
Now run your page or reload.
View Demo