How to Build Calculator Using JavaScript: আপনার প্রথম ক্যালকুলেটর তৈরি করুন

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

ক্যালকুলেটর তৈরি করার জন্য প্রাথমিক পদক্ষেপ

প্রথমে, আমাদের HTML এবং CSS এর মাধ্যমে ক্যালকুলেটরের রূপ এবং স্টাইল তৈরি করতে হবে। এরপর জাভাস্ক্রিপ্ট কোড লিখে ক্যালকুলেটরটিকে কার্যকরী করতে হবে। আসুন প্রথমে HTML তৈরি করি।

    
    
    


    

        
        

            1
            2
            3
            +
            4
            5
            6
            -
            7
            8
            9
            *
            C
            0
            =
            /
        
    
    

এই HTML কোডটি আমাদের ক্যালকুলেটরের জন্য একটি ডিজাইন তৈরি করে। এতে একটি ইনপুট ফিল্ড রয়েছে যা আমাদের ক্যালকুলেটরের ফলাফল দেখাবে এবং একটি বাটন গ্রিড যেখানে সমস্ত সংখ্যা এবং অপারেটর থাকবে।

CSS দিয়ে ক্যালকুলেটর ডিজাইন করা

এখন আমরা ক্যালকুলেটরের ডিজাইন তৈরি করব CSS ব্যবহার করে। এই কোডটি ক্যালকুলেটরের আউটলুক সোজা এবং পরিষ্কার রাখবে।

.calculator {
    width: 260px;
    margin: 50px auto;
    border: 2px solid #333;
    padding: 20px;
    border-radius: 10px;
    background-color: #f4f4f4;
}

input[type="text"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    font-size: 20px;
    text-align: right;
}

.buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

button {
    padding: 20px;
    font-size: 18px;
    cursor: pointer;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
}

button:hover {
    background-color: #f0f0f0;
}

এটি একটি খুব সাধারণ CSS স্টাইল যা ক্যালকুলেটরটিকে সুন্দর এবং ব্যবহারযোগ্য করে তোলে। এটি বাটন গুলি গ্রিডে সাজায় এবং ইনপুট ফিল্ডের জন্য সঠিক আকার এবং প্যাডিং সেট করে।

জাভাস্ক্রিপ্ট দিয়ে ক্যালকুলেটরকে কার্যকরী করা

এখন আমাদের ক্যালকুলেটরটি কার্যকরী করতে জাভাস্ক্রিপ্ট কোড যোগ করতে হবে। এটি বাটন ক্লিক ইভেন্ট হ্যান্ডলিং, সমীকরণ বিশ্লেষণ এবং ফলাফল প্রদর্শন করতে সহায়ক হবে।

let display = document.getElementById('display');
let buttons = Array.from(document.getElementsByClassName('btn'));

buttons.forEach(button => {
    button.addEventListener('click', function() {
        let value = button.innerText;

        if (value === 'C') {
            display.value = '';
        } else if (value === '=') {
            try {
                display.value = eval(display.value);
            } catch (e) {
                display.value = 'Error';
            }
        } else {
            display.value += value;
        }
    });
});

এই জাভাস্ক্রিপ্ট কোডটি ক্যালকুলেটরের বাটনগুলির জন্য ইভেন্ট লিসনার যোগ করে, যা ক্লিক হলে সঠিক পদক্ষেপ গ্রহণ করবে। "C" বাটন চাপলে স্ক্রীন সাফ হয়ে যাবে এবং "=" বাটন চাপলে তা সমীকরণটি সমাধান করে ফলাফল প্রদর্শন করবে।

ক্যালকুলেটরের পরীক্ষা করা

এখন আমাদের ক্যালকুলেটর প্রস্তুত! আপনি HTML, CSS এবং জাভাস্ক্রিপ্ট কোডগুলো একসাথে এক্সিকিউট করলে একটি কার্যকরী ক্যালকুলেটর পেয়ে যাবেন। আপনি সহজেই মৌলিক গাণিতিক হিসাব করতে পারবেন।

ক্যালকুলেটরের বৈশিষ্ট্য সম্প্রসারণ

যেহেতু এটি একটি মৌলিক ক্যালকুলেটর, আপনি চাইলে আরও কিছু বৈশিষ্ট্য যোগ করতে পারেন, যেমন:

• বিভিন্ন গাণিতিক ফাংশন যেমন যোগফল, বিয়োগফল, গুণফল, ভাগফল ছাড়াও, লোগারিদম, ট্রিগনোমেট্রিক ফাংশন যোগ করা।
• একাধিক ডিজিট এবং দশমিক পয়েন্টের জন্য আরো উন্নত ইনপুট সিস্টেম তৈরি করা।
• ক্যালকুলেটর ইন্টারফেসে আরও আকর্ষণীয় ডিজাইন করা।

এই বৈশিষ্ট্যগুলো যোগ করলে আপনার ক্যালকুলেটর আরও শক্তিশালী এবং ব্যাপকভাবে ব্যবহারযোগ্য হয়ে উঠবে।

উপসংহার

এই নিবন্ধে আমরা শিখেছি কিভাবে জাভাস্ক্রিপ্ট ব্যবহার করে একটি ক্যালকুলেটর তৈরি করা যায়। HTML, CSS এবং JavaScript ব্যবহার করে একটি ক্যালকুলেটরের মৌলিক রূপ তৈরি করা সহজ এবং আনন্দদায়ক। আপনি যদি প্রোগ্রামিং শিখতে চান, এটি একটি চমৎকার প্রথম প্রকল্প হতে পারে। আশা করি আপনি এই প্রক্রিয়া থেকে অনেক কিছু শিখেছেন এবং আপনার নিজের ক্যালকুলেটর তৈরি করতে সক্ষম হয়েছেন!