মাহার ক্যাফেতে কফি আর কোডের কেমিস্ট্রি

 মাহার ক্যাফের যাত্রা: কফি ও কোডের প্রথম মিশ্রণ

চরিত্র পরিচিতি:

মাহা, সে সম্প্রতি একটি ডিজিটাল ক্যাফে খোলার সিদ্ধান্ত নিয়েছে। মাহার ক্যাফেতে কফি এবং খাবারের পাশাপাশি কিছু ডিজিটাল সার্ভিসও থাকবে। সে চায় তার ক্যাফের জন্য একটি ওয়েবসাইট তৈরি করতে, যেখানে গ্রাহকরা অর্ডার দিতে পারবে, কফির তালিকা এবং দৈনিক ইভেন্টগুলো সম্পর্কে জানবে।

সকল পর্ব এখানে দেখুন –

• মাহার ক্যাফেতে কফি আর কোডের কেমিস্ট্রি
• মাহার ক্যাফেতে কফি আর কোডের কেমিস্ট্রি পর্ব– ২
• মাহার ক্যাফেতে কফি আর কোডের কেমিস্ট্রি পর্ব– ৩
• মাহার ক্যাফেতে কফি আর কোডের কেমিস্ট্রি পর্ব– ৪
• মাহার ক্যাফেতে কফি আর কোডের কেমিস্ট্রি পর্ব– ৫
• মাহার ক্যাফেতে কফি আর কোডের কেমিস্ট্রি পর্ব– ৬

সমস্যা:

মাহার HTML ও CSS সম্পর্কে পূর্বে থেকে কিছু ধারণা ছিল, কিন্তু JavaScript সম্পর্কে সে তেমন কিছুই জানতো না। সে জানতো যে, JavaScript এর মাধ্যমে ওয়েবসাইটে সহজে ইন্টারঅ্যাকটিভিটি করা যায়। এখন মাহার উপরিউক্ত সমস্যা সমাধানের জন্য JavaScript কিভাবে সাহায্যা করলো, তার সম্পর্কে বিস্তারিত আলোচনা করা যাক।

JavaScript ব্যবহার করে সমস্যার সমাধান

অর্ডার ফর্ম তৈরি করা -

মাহা একটি ফর্ম তৈরি করতে চাইলো যেখানে গ্রাহকরা তাদের অর্ডার দিতে পারবেন। তাই সে JavaScript এর সাহায্যে, একটি ফর্ম তৈরি করলো –

<form id="orderForm">
  <label for="item">কফির নাম:</label>
  <input type="text" id="item" required />
  <button type="submit">অর্ডার করুন</button>
</form>
<div id="orderSummary"></div>

এরপর, সে একটি JavaScript কোড লিখলো যা ফর্মটি সাবমিট হলে গ্রাহকের অর্ডারটি দেখাবে –

document
  .getElementById("orderForm")
  .addEventListener("submit", function (event) {
    event.preventDefault(); // ফর্ম সাবমিট হওয়া থেকে আটকায়
    let item = document.getElementById("item").value;
    document.getElementById("orderSummary").innerText = "আপনার অর্ডার: " + item;
  });

কফির তালিকা -

মাহা চায় যে গ্রাহকরা কফির তালিকা দেখতে এবং তারা প্রিয় কফি নির্বাচন করতে পারবে। সে একটি তালিকা তৈরি করলো –

let coffeeList = ["এস্প্রেসো", "ল্যাটে", "ক্যাপুচিনো", "ফ্ল্যাট হোয়াইট"];
let coffeeMenu = document.getElementById("coffeeMenu");
coffeeList.forEach(function (coffee) {
  let li = document.createElement("li");
  li.innerText = coffee;
  coffeeMenu.appendChild(li);
});

তালিকা দেখানোর জন্য HTML এর সহযোগিতা নিলো -

<ul id="coffeeMenu"></ul>

ইভেন্টে যোগ করা -

মাহা তার ক্যাফেতে একটি ইভেন্টও আয়োজন করতে চায়। JavaScript ব্যবহার করে সে ইভেন্টের সময়সূচী তৈরি করলো এবং গ্রাহকদের জানানোর জন্য একটি এলার্ট ব্যবহার করলো –

function showEventAlert() {
  alert("আগামী শুক্রবার আমাদের ক্যাফেতে লাইভ হামদ ও নাত ইভেন্ট আছে!");
}

এবং HTML এর একটি বাটন যোগ করলো –

<button onclick="showEventAlert()">ইভেন্ট জানুন</button>

 

ফলাফল -

মাহার ডিজিটাল ক্যাফের ওয়েবসাইটটি এখন সম্পূর্ণ। গ্রাহকরা কফির অর্ডার দিতে পারছে, কফির তালিকা দেখতে পারছে, এবং ইভেন্টের সম্পর্কে জানতেও পারছে। মাহা JavaScript ব্যবহার করে তার ওয়েবসাইটটিকে আরও ইন্টারঅ্যাকটিভ ও ব্যবহারকারীবান্ধব করে তুলেছে।

 

শেষকথা -

এভাবে, মাহা একটি সহজ কিন্তু কার্যকরী ডিজিটাল ক্যাফে তৈরি করতে JavaScript ব্যবহার করলো। বলা যায়, JavaScript আমাদের প্রজেক্টগুলোতে ইন্টারঅ্যাকটিভিটি এবং ডাইনামিক ফিচার যুক্ত করার জন্য একটি অত্যন্ত শক্তিশালী টুল। মাহা বুঝতে পারলো, JavaScript ব্যবহার করে সে কীভাবে তার প্রেজেক্টটিকে আরও উন্নত করতে পারে। (চলমান…)

 

“গল্পে গল্পে প্রোগ্রামিং শিখুন” আমাদের ওয়েবসাইটটি বুকমার্ক করে রাখুন! গল্পটি উপভোগ করলে বন্ধুরা যাতে মিস না করে, সেটি শেয়ার করতে ভুলবেন না। আর, লাইক ও কমেন্ট করে আমাদের জানাতে ভুলবেন না যেন।