Step-by-Step: jinsi ya kutengeneza scientific calculator Kamili kwa Webu full code
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
🚀 Unahitaji mfumo au website ya biashara?
Chagua huduma hapa chini kisha mteja bofya moja kwa moja kwenda kwenye ukurasa wa huduma au kuwasiliana nasi kwa WhatsApp.