ধরো, তুমি একটি রেস্তোরাঁ চালাচ্ছো এবং তুমি
চাও যে তোমার গ্রাহকরা তোমার ওয়েবসাইটে গিয়ে অনলাইন মেনু দেখুক, পছন্দের খাবার অর্ডার
করুক, এবং খাবারের ডেলিভারির জন্য সময় নির্ধারণ করুক। এজন্য তুমি HTML, CSS, এবং জাভাস্ক্রিপ্ট
ব্যবহার করতে পারো।
HTML ব্যবহার করে মেনুর কাঠামো তৈরি করা
-
প্রথমে, তুমি HTML দিয়ে মেনুর জন্য খাবারের নাম, দাম, এবং অর্ডার করার জন্য বাটন তৈরি করবে।
<h1>আমাদের মেনু</h1>
<div>
<h2>পিজ্জা</h2>
<p>দাম: ৩৫০ টাকা</p>
<button>অর্ডার করুন</button>
</div>
<div>
<h2>বার্গার</h2>
<p>দাম: ২০০ টাকা</p>
<button>অর্ডার করুন</button>
</div>
এখানে HTML ব্যবহার করে তুমি মেনুর খাবারের
নাম, দাম, এবং অর্ডার করার জন্য বাটন যুক্ত করেছো। এটি খাবার প্রদর্শন করার জন্য একটি
মৌলিক কাঠামো সরবরাহ করছে।
CSS ব্যবহার করে মেনুর সুন্দর ডিজাইন করা -
এখন, CSS দিয়ে তুমি মেনুর বিভিন্ন খাবারকে আরও আকর্ষণীয় করতে পারো।
body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
color: #333;
}
div {
background-color: #fff;
padding: 20px;
margin: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
button {
background-color: #4caf50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
}
এভাবে CSS দিয়ে তুমি মেনুর ডিজাইন আরও আকর্ষণীয়
করে তুলছো, যাতে গ্রাহকরা ওয়েবসাইট দেখতে এবং ব্যবহার করতে ভালোবাসে।
জাভাস্ক্রিপ্ট ব্যবহার করে অর্ডার নেওয়া এবং
প্রসেস করা -
এবার আসলো জাভাস্ক্রিপ্ট। ধরো, গ্রাহক যখন অর্ডার করার জন্য বাটনে ক্লিক করবে, তখন একটি বার্তা প্রদর্শিত হবে এবং সেই খাবারটি অর্ডার হিসেবে যোগ হবে। এছাড়া গ্রাহক ডেলিভারি সময়ও বেছে নিতে পারবে।
let buttons = document.querySelectorAll("button");
for (let i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", function () {
let foodItem = this.parentElement.querySelector("h2").innerText;
alert(foodItem + " সফলভাবে অর্ডার করা হয়েছে!");
});
}
এখানে, জাভাস্ক্রিপ্ট ব্যবহার করে তুমি এমন ব্যবস্থা করছো, যেখানে গ্রাহক পিজ্জা বা বার্গারের জন্য অর্ডার করলে সাথে সাথেই তাকে জানানো হচ্ছে যে তার অর্ডার গৃহীত হয়েছে।
এক নজরে কোডের ব্যাখ্যা দেখে নিই –
এটি ওয়েবসাইটের সবগুলো বাটনকে নির্বাচন করে এবং buttons নামের একটি ভেরিয়েবলে সংরক্ষণ করে।
let buttons = document.querySelectorAll("button");
ফর লুপ –
for (let i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", function () {
let foodItem = this.parentElement.querySelector("h2").innerText;
alert(foodItem + " সফলভাবে অর্ডার করা হয়েছে!");
});
}
১. for (let i = 0; i <
buttons.length; i++): এই লুপটি প্রতিটি বাটনের উপর দিয়ে একবার করে চলবে। i হলো লুপের
ইন্ডেক্স, যা buttons তালিকার প্রতিটি বাটনকে নির্দেশ করে।
২. buttons[i].addEventListener('click',
function() {...}: প্রতিটি বাটনের জন্য একটি ইভেন্ট লিসেনার যোগ করা হয়, যা বাটনে ক্লিক
করলে চালু হবে।
২.১ - let foodItem =
this.parentElement.querySelector('h2').innerText;: এখানে this হলো সেই বাটন, যেটিতে
ক্লিক করা হয়েছে। বাটনের parentElement এর ভিতরে থাকা h2 ট্যাগের টেক্সট পাওয়া যাচ্ছে,
যেটা মূলত খাবারের নাম।
২.২ - alert(foodItem + ' সফলভাবে অর্ডার
করা হয়েছে!');: খাবারের নামসহ একটি বার্তা দেখানো হয়, যা জানায় যে অর্ডার সফলভাবে সম্পন্ন
হয়েছে।
এভাবে, এই কোডটি প্রতিটি বাটনের জন্য কাজ করে এবং ক্লিক করার পর খাবারের নামসহ একটি বার্তা দেখায়, যা গ্রাহককে জানায় যে তার অর্ডার গৃহীত হয়েছে।
জাভাস্ক্রিপ্টের প্রয়োজনীয়তা কেন?
ইন্টার্যাকটিভিটি: গ্রাহকরা যখন মেনুতে কোনো
খাবার বেছে নেয়, জাভাস্ক্রিপ্ট দিয়ে সেই খাবারের অর্ডার সংক্রান্ত বার্তা দেখানো যায়।
রিয়েল টাইম পরিবর্তন: কোনো খাবার অর্ডার
করা হলে তৎক্ষণাৎ জানানো যায় এবং ডেলিভারির সময় নির্ধারণ করা যায়।
উন্নত ব্যবহারকারীর অভিজ্ঞতা: জাভাস্ক্রিপ্ট
ব্যবহার করে তুমি গ্রাহকদের জন্য অনলাইন অর্ডারিং প্রক্রিয়াকে সহজ এবং মজার করতে পারো।
এভাবে, বাস্তব জীবনে রেস্তোরাঁর ওয়েবসাইটে
জাভাস্ক্রিপ্টের ব্যবহার গ্রাহকদের সাথে সরাসরি যোগাযোগ করে তাদের প্রয়োজন মেটাতে সাহায্য
করে। এতে করে ব্যবসা আরও উন্নত ও সুবিধাজনক হয়ে ওঠে।
“গল্পে গল্পে প্রোগ্রামিং শিখুন” আমাদের ওয়েবসাইটটি
বুকমার্ক করে রাখুন! গল্পটি উপভোগ করলে বন্ধুরা যাতে মিস না করে, সেটি শেয়ার করতে ভুলবেন
না। আর, লাইক ও কমেন্ট করে আমাদের জানাতে ভুলবেন না যেন।
