Katika dunia ya teknolojia, calculator ni moja ya tools muhimu ambazo zinasaidia kufanya mahesabu haraka. Katika makala hii, nitakuonyesha step-by-step jinsi ya kutengeneza calculator ya webu inayofanya kazi vizuri kwa kutumia HTML, CSS, na JavaScript.

πŸ“Œ Features za Calculator Hii

Inafanya basic arithmetic operations: addition (+), subtraction (-), multiplication (*), division (/)

Ina support ya decimal numbers

Ina button ya C (Clear) ku-reset display

Ina error handling kwa formulas zisizo sahihi

Interface ni safi, rahisi kutumia, na inafaa kwenye browser zote

πŸ”Ή Muundo wa Calculator

Calculator inaundwa kwa HTML, CSS, na JavaScript:

HTML – Huu ndio structure ya calculator, buttons, na display.

CSS – Inaunda design ya kitaalamu, rounded buttons, shadows, na hover effects.

JavaScript – Inahesabu formulas, inaongeza value kwenye display, na kushughulikia errors.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced Scientific Calculator</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(to right, #8e2de2, #4a00e0);
margin: 0;
}

.calculator {
background-color: #1e1e1e;
border-radius: 15px;
padding: 20px;
box-shadow: 0 8px 20px rgba(0,0,0,0.5);
width: 320px;
}

#display {
width: 100%;
height: 60px;
font-size: 28px;
text-align: right;
padding: 10px;
margin-bottom: 20px;
background-color: #121212;
color: #fff;
border: none;
border-radius: 10px;
box-shadow: inset 0 2px 5px rgba(0,0,0,0.5);
}

.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}

button {
font-size: 18px;
padding: 18px;
border: none;
border-radius: 10px;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
color: #fff;
}

button.number {
background: linear-gradient(to bottom, #3a3a3a, #222);
}

button.operator {
background: linear-gradient(to bottom, #ff9500, #e08900);
}

button.function {
background: linear-gradient(to bottom, #007aff, #0051c7);
}

button.equal {
background: linear-gradient(to bottom, #34c759, #28a745);
grid-column: span 2;
}

button.clear {
background: linear-gradient(to bottom, #ff3b30, #c1271c);
}

button:hover {
filter: brightness(1.2);
transform: scale(1.05);
}

button:active {
transform: scale(0.95);
}
</style>
</head>
<body>
<div class="calculator">
<input type="text" id="display" disabled>
<div class="buttons">
<button class="clear" onclick="clearDisplay()">C</button>
<button class="function" onclick="appendFunction('sin')">sin</button>
<button class="function" onclick="appendFunction('cos')">cos</button>
<button class="function" onclick="appendFunction('tan')">tan</button>

<button class="number" onclick="appendNumber('7')">7</button>
<button class="number" onclick="appendNumber('8')">8</button>
<button class="number" onclick="appendNumber('9')">9</button>
<button class="operator" onclick="appendOperator('/')">/</button>

<button class="number" onclick="appendNumber('4')">4</button>
<button class="number" onclick="appendNumber('5')">5</button>
<button class="number" onclick="appendNumber('6')">6</button>
<button class="operator" onclick="appendOperator('*')">*</button>

<button class="number" onclick="appendNumber('1')">1</button>
<button class="number" onclick="appendNumber('2')">2</button>
<button class="number" onclick="appendNumber('3')">3</button>
<button class="operator" onclick="appendOperator('-')">-</button>

<button class="number" onclick="appendNumber('0')">0</button>
<button class="number" onclick="appendDecimal()">.</button>
<button class="equal" onclick="calculateResult()">=</button>
<button class="operator" onclick="appendOperator('+')">+</button>

<button class="function" onclick="appendFunction('log')">log</button>
<button class="function" onclick="appendFunction('sqrt')">√</button>
<button class="function" onclick="appendFunction('exp')">e^x</button>
<button class="function" onclick="appendFunction('pi')">Ο€</button>
</div>
</div>

<script>
let display = document.getElementById('display');
let currentExpression = '';

function clearDisplay() {
currentExpression = '';
display.value = '';
}

function appendNumber(number) {
currentExpression += number;
display.value = currentExpression;
}

function appendOperator(operator) {
currentExpression += ` ${operator} `;
display.value = currentExpression;
}

function appendDecimal() {
currentExpression += '.';
display.value = currentExpression;
}

function appendFunction(func) {
if (func === 'pi') {
currentExpression += Math.PI;
} else if (func === 'exp') {
currentExpression += 'Math.exp(';
} else if (func === 'sqrt') {
currentExpression += 'Math.sqrt(';
} else if (func === 'log') {
currentExpression += 'Math.log10(';
} else {
currentExpression += `Math.${func}(`;
}
display.value = currentExpression;
}

function calculateResult() {
try {
// Handle factorial
let expr = currentExpression.replace(/(\d+)!/g, (_, n) => factorial(parseInt(n)));

display.value = eval(expr);
currentExpression = display.value;
} catch (e) {
display.value = 'Error';
currentExpression = '';
}
}

function factorial(n) {
if (n === 0 || n === 1) return 1;
let res = 1;
for (let i = 2; i <= n; i++) res *= i;
return res;
}
</script>
</body>
</html>



CSS inafanya calculator iwe interactive na attractive.

Buttons zina hover effects, rounded corners, na color differentiation.

3️⃣ JavaScript Code – Functionality
let display = document.getElementById('display');

function appendValue(val) {
display.value += val;
}

function clearDisplay() {
display.value = '';
}

function calculate() {
try {
display.value = eval(display.value);
} catch (e) {
display.value = 'Error';
}
}


appendValue() – Inaongeza namba au operator kwenye display.

clearDisplay() – Ina-reset display.

calculate() – Inahesabu formula na kushughulikia errors.

βœ… Faida za Calculator Hii

Rahisi kutumia na responsive

Inaweza kufanya basic arithmetic operations haraka

Ina error handling kwa formulas zisizo sahihi

Interface ni clean, attractive, na professional

πŸ”— Links Za Kujifunza Zaidi

🌐 Faulink Official Website:
https://www.faulink.com/

πŸ“˜ Tutorials Za JavaScript na Web Design:
https://www.faulink.com/excel_mifumo.php

πŸ“² Piga / WhatsApp kwa msaada wa haraka:
https://wa.me/255693118509