Jifunze Kutengeneza Calculator ya Webu kwa HTML, CSS, na JavaScript

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.

1️⃣ HTML Code – Structure
<div class="calculator">
<input type="text" class="display" id="display" disabled>
<div class="buttons">
<button class="clear" onclick="clearDisplay()">C</button>
<button onclick="appendValue('/')">/</button>
<button onclick="appendValue('*')">*</button>
<button onclick="appendValue('-')">-</button>

<button onclick="appendValue('7')">7</button>
<button onclick="appendValue('8')">8</button>
<button onclick="appendValue('9')">9</button>
<button onclick="appendValue('+')">+</button>

<button onclick="appendValue('4')">4</button>
<button onclick="appendValue('5')">5</button>
<button onclick="appendValue('6')">6</button>
<button class="equal" onclick="calculate()">=</button>

<button onclick="appendValue('1')">1</button>
<button onclick="appendValue('2')">2</button>
<button onclick="appendValue('3')">3</button>
<button onclick="appendValue('0')">0</button>

<button onclick="appendValue('.')">.</button>
</div>
</div>

Display – Huu ndio sehemu ambapo result inaonekana.

Buttons – Zinajumuisha nambari, operators, decimal, equals, na clear.

2️⃣ CSS Code – Design
.calculator {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 5px 15px rgba(0,0,0,0.2);
width: 250px;
}
.display {
width: 100%;
height: 50px;
font-size: 24px;
text-align: right;
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
border: 1px solid #ccc;
}
button {
padding: 20px;
font-size: 18px;
border: none;
border-radius: 5px;
background-color: #eee;
cursor: pointer;
}
button.operator { background-color: #f9a825; color: #fff; }
button.equal { background-color: #4caf50; color: #fff; grid-column: span 2; }
button.clear { background-color: #e53935; color: #fff; }
button:hover { background-color: #ddd; }

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