How to Make a Calculator Using HTML CSS JavaScript – Step-by-Step Guide
Calculators are an essential tool used in various fields, from simple arithmetic calculations to complex scientific computations. Building a calculator from scratch using HTML, CSS, and JavaScript not only enhances your coding skills but also deepens your understanding of how these technologies work together. This guide will walk you through creating a basic calculator that can perform addition, subtraction, multiplication, and division.
- HTML Structure:
- The HTML includes a
divwith the classcalculatorcontaining the calculator’s display and buttons. - Each button has data attributes (
data-numfor numbers anddata-opfor operations) for easy JavaScript selection.
- The HTML includes a
- CSS Styling:
- The CSS styles center the calculator on the screen, style the display and buttons, and provide hover effects.
- Specific styles are added for the equals button to differentiate it from the others.
- JavaScript Functionality:
- JavaScript handles the button clicks, updates the display, and performs calculations.
- The
handleNumberfunction processes number inputs and decimal points. - The
handleOperatorfunction processes operations, including clear, equals, and arithmetic operations. - The
calculatefunction performs the arithmetic based on the selected operator. - The
updateDisplayfunction updates the display with the current input.
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 |
<!DOCTYPE html> <html> <head> <title>iPhone Style Calculator with History and Root Button</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/10.6.4/math.js" integrity="sha512-BbVEDjbqdN3Eow8+empLMrJlxXRj5nEitiCAK5A1pUr66+jLVejo3PmjIaucRnjlB0P9R3rBUs3g5jXc8ti+fQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/10.6.4/math.min.js" integrity="sha512-iphNRh6dPbeuPGIrQbCdbBF/qcqadKWLa35YPVfMZMHBSI6PLJh1om2xCTWhpVpmUyb4IvVS9iYnnYMkleVXLA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #fff; margin: 0; font-family: 'Arial', sans-serif; } .calculator { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 20px; border-radius: 20px; background-color: #333; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); width: 320px; } .calculator input[type="text"] { grid-column: span 4; padding: 20px; font-size: 32px; border: none; border-radius: 10px; text-align: right; background-color: #000; color: #fff; box-sizing: border-box; } .calculator input[type="button"] { padding: 20px; font-size: 24px; border: none; border-radius: 10px; cursor: pointer; color: white; box-sizing: border-box; } .calculator input[type="button"].operator { background-color: #ff9500; } .calculator input[type="button"].operator:hover { background-color: #cc7a00; } .calculator input[type="button"].number { background-color: #505050; } .calculator input[type="button"].number:hover { background-color: #6b6b6b; } .calculator input[type="button"].zero { grid-column: span 2; } .calculator input[type="button"].clear { background-color: #d4d4d2; color: black; } .calculator input[type="button"].clear:hover { background-color: #bbb; transition: 0.5s; } .calculator input[type="button"].root { background-color: #f7c600; } .calculator input[type="button"].root:hover { background-color: #e6b800; transition: 0.5s; } </style> </head> <body> <div class="calculator"> <input type="text" id="display" readonly> <input type="button" value="A/C" class="clear" onclick="clr()" /> <input type="button" value="%" class="operator" onclick="dis('%')" /> <input type="button" value="/" class="operator" onclick="dis('/')" /> <input type="button" value="*" class="operator" onclick="dis('*')" /> <input type="button" value="7" class="number" onclick="dis('7')" /> <input type="button" value="8" class="number" onclick="dis('8')" /> <input type="button" value="9" class="number" onclick="dis('9')" /> <input type="button" value="-" class="operator" onclick="dis('-')" /> <input type="button" value="4" class="number" onclick="dis('4')" /> <input type="button" value="5" class="number" onclick="dis('5')" /> <input type="button" value="6" class="number" onclick="dis('6')" /> <input type="button" value="+" class="operator" onclick="dis('+')" /> <input type="button" value="1" class="number" onclick="dis('1')" /> <input type="button" value="2" class="number" onclick="dis('2')" /> <input type="button" value="3" class="number" onclick="dis('3')" /> <input type="button" value="=" class="operator" onclick="solve() " /> <input type="button" value="0" class="number zero" onclick="dis('0')" /> <input type="button" value="." class="number" onclick="dis('.')" /> <input type="button" value="√" class="root" onclick="dis('sqrt(')" /> </div> <script> function dis(val) { document.getElementById("display").value += val; } document.addEventListener('keydown', function (event) { const key = event.key; if ((key >= '0' && key <= '9') || ['+', '-', '*', '/', '%'].includes(key)) { dis(key); } else if (key === 'Enter') { solve(); } else if (key === 'Escape') { clr(); } }); function solve() { try { let expression = document.getElementById("display").value; // Handle square root calculation expression = expression.replace(/sqrt\(([^)]+)\)/g, 'sqrt($1)'); // Evaluate the expression let result = math.evaluate(expression); document.getElementById("display").value = result; } catch (err) { document.getElementById("display").value = "Error"; } } function clr() { document.getElementById("display").value = ""; } </script> </body> </html> |
Download Source Code View Demo
