HTML, CSS, এবং JavaScript দিয়ে ক্যালকুলেটর তৈরি করার সম্পূর্ণ গাইড
এই ব্লগে, আমরা HTML, CSS এবং JavaScript ব্যবহার করে কীভাবে একটি ফিচার-সমৃদ্ধ ক্যালকুলেটর তৈরি করা যায় তা শিখব। ধাপে ধাপে কোডের মাধ্যমে প্রক্রিয়াটি ব্যাখ্যা করা হবে, যা নতুন এবং অভিজ্ঞ ডেভেলপারদের জন্যও উপযোগী।
ক্যালকুলেটর তৈরি করার জন্য প্রয়োজনীয় উপাদানসমূহ
ক্যালকুলেটর তৈরি করতে HTML, CSS, এবং JavaScript এর সমন্বয়ে একটি কার্যকরী ও সুন্দর ইন্টারফেস ডিজাইন করা হবে। এর জন্য প্রয়োজন হবে:
HTML: ক্যালকুলেটরের গঠন (structure) তৈরি করতে।
CSS: ক্যালকুলেটরকে স্টাইলিশ ও ব্যবহারকারীর জন্য সহজ করতে।
JavaScript: ক্যালকুলেটরের লজিক এবং ফাংশনালিটি পরিচালনা করতে।
ধাপ ১: HTML দিয়ে ক্যালকুলেটরের গঠন তৈরি করা
HTML এর মাধ্যমে আমরা ক্যালকুলেটরের বেসিক স্ট্রাকচার তৈরি করব। নিচে কোডটি দেওয়া হলো:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="HTML, CSS এবং JavaScript দিয়ে ক্যালকুলেটর তৈরি করার সহজ গাইড। নতুন ডেভেলপারদের জন্য ধাপে ধাপে কোড সহ টিউটোরিয়াল।">
<title>HTML, CSS এবং JavaScript দিয়ে ক্যালকুলেটর</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="calculator">
<input type="text" id="result" class="result" disabled>
<div class="buttons">
<button class="btn" onclick="appendNumber('7')">7</button>
<button class="btn" onclick="appendNumber('8')">8</button>
<button class="btn" onclick="appendNumber('9')">9</button>
<button class="btn" onclick="chooseOperation('/')">/</button>
<button class="btn" onclick="appendNumber('4')">4</button>
<button class="btn" onclick="appendNumber('5')">5</button>
<button class="btn" onclick="appendNumber('6')">6</button>
<button class="btn" onclick="chooseOperation('*')">*</button>
<button class="btn" onclick="appendNumber('1')">1</button>
<button class="btn" onclick="appendNumber('2')">2</button>
<button class="btn" onclick="appendNumber('3')">3</button>
<button class="btn" onclick="chooseOperation('-')">-</button>
<button class="btn" onclick="appendNumber('0')">0</button>
<button class="btn" onclick="appendNumber('.')">.</button>
<button class="btn" onclick="calculate()">=</button>
<button class="btn" onclick="chooseOperation('+')">+</button>
<button class="btn clear" onclick="clearResult()">C</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
ধাপ ২: CSS দিয়ে ক্যালকুলেটরের ডিজাইন
CSS এর মাধ্যমে ক্যালকুলেটরের জন্য একটি আকর্ষণীয় ডিজাইন তৈরি করা হবে। নিচে CSS কোডটি দেওয়া হলো:
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f4f4f4;
}
.calculator {
width: 300px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
padding: 20px;
}
.result {
width: 100%;
height: 50px;
margin-bottom: 20px;
font-size: 1.5rem;
text-align: right;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.btn {
padding: 15px;
font-size: 1.2rem;
border: none;
border-radius: 5px;
background-color: #007bff;
color: white;
cursor: pointer;
transition: background-color 0.3s;
}
.btn:hover {
background-color: #0056b3;
}
.clear {
grid-column: span 4;
background-color: #dc3545;
}
.clear:hover {
background-color: #a71d2a;
}
ধাপ ৩: JavaScript দিয়ে ক্যালকুলেটরের কার্যকারিতা
JavaScript এর মাধ্যমে ক্যালকুলেটরের কার্যকারিতা যোগ করা হবে। নিচে JavaScript কোডটি দেওয়া হলো:
let currentOperand = '';
let previousOperand = '';
let operation = undefined;
function appendNumber(number) {
if (number === '.' && currentOperand.includes('.')) return;
currentOperand += number;
updateDisplay();
}
function chooseOperation(op) {
if (currentOperand === '') return;
if (previousOperand !== '') calculate();
operation = op;
previousOperand = currentOperand;
currentOperand = '';
}
function calculate() {
let computation;
const prev = parseFloat(previousOperand);
const current = parseFloat(currentOperand);
if (isNaN(prev) || isNaN(current)) return;
switch (operation) {
case '+':
computation = prev + current;
break;
case '-':
computation = prev - current;
break;
case '*':
computation = prev * current;
break;
case '/':
computation = prev / current;
break;
default:
return;
}
currentOperand = computation;
operation = undefined;
previousOperand = '';
updateDisplay();
}
function clearResult() {
currentOperand = '';
previousOperand = '';
operation = undefined;
updateDisplay();
}
function updateDisplay() {
document.getElementById('result').value = currentOperand;
}
চলুন আমরা যে ক্যালকুলেটর টি বানালাম সেটি কেমন হলো দেখে নি
দেখুন কত সহজে কত সুন্দর একটি ক্যালকুলেটর বানিয়ে ফেল্লাম।
উপসংহার
এই ব্লগে আমরা HTML, CSS এবং JavaScript ব্যবহার করে একটি ক্যালকুলেটর তৈরি করার পুরো প্রক্রিয়া দেখলাম। এই ক্যালকুলেটরটি নতুনদের জন্য বিশেষভাবে উপযোগী, কারণ এটি তাদের ওয়েব ডেভেলপমেন্টের মৌলিক ধারণাগুলি শেখার জন্য একটি চমৎকার প্রকল্প। আপনি চাইলে এই ক্যালকুলেটরে আরও ফিচার যোগ করতে পারেন, যেমন মেমরি অপশন বা বিজ্ঞ ফাংশন (scientific functions)।
কোডটি অনুশীলন করুন এবং প্রয়োজনে নিজের প্রোজেক্টে কাস্টমাইজ করুন।
