Javascript এর ম্যাধ্যমে নিজেই তৈরি করে ফেলুন সাধারণ Calculator

আসসালামুআলাইকুম

আসা করি আপনারা সকলেই আল্লাহর রহমতে ভালো আছেন। আমিও ভালো আছি। আর ভালো না থাকলে তো ভালো লাগার ওয়েবসাইট TrickBD আছেই। যেখানে আমরা নিত্য নতুন টিপস এবং Trick পেয়ে থাকি।

By the way. আজকে আমি আপনাদের মাঝে নতুন একটি টপিক নিয়ে হাজির হলাম।

Javascript এর সাথে আমরা অনেকেই পরিচিত। এটি একটি Scripting Language.

সব ধরনের Scripting Language এই এক একটি programming language.

আজকের যেই টপিক নিয়ে পোস্ট সেটি হচ্ছে Javascript Calculator. অর্থাৎ, javascript এর ম্যাধ্যমে Simple Calculator তৈরি করা শিখব।

এটি বিগিনার লেভেল প্রোগ্রামার দের কাজে দিবে।

Calculator টি তৈরি করতে ব্যবহার করা হয়েছে HTML, JAVASCRIPT আর অল্প একটু CSS (Cascading Style Sheet)।

তো প্রথমে HTML এ আসি।

HTML (Hyper Text Markup Language) এর ম্যাধ্যমে Calculator টির গঠন প্রণালি তৈরি করা হয়েছে। HTML একটা ওয়েবসাইট এর Structure তৈরি করে।

এই project এও HTML দারা Calculator এর Structure তৈরি করা হয়েছে।

Calculator এর গঠন টিই তৈরি করতে HTML এর Table tag ব্যবহার করা হয়েছে।

Table tag এর পর td = Table Description ট্যাগ এর ভিতরে value গুলো সাজানো হয়েছে।

1 থেকে 9 এবং +, -, *, / এই বাটন গুলো তৈরি করতে input type = “button” এই ট্যাগ ব্যবহার করা হয়েছে। এরপর value সেট করা হয়েছে

এরপর, onclick = Display(“parametar”) Display Function তৈরি করা হয়েছে অ্যান্ড value গুলো parametar এ দেওয়া হয়েছে।

পরবর্তীতে function গুলো কে ডাকা হবে।
এভাবে HTML এর কাজ করা হয়েছে।

এরপর Table কে Css ধারা Design করা হয়েছে

এরপর script এর মধ্যে main কাজ করা হয়েছে।

সব value গুলো Display এ function এ parametar হিসেবে ছিল।

কোনো একটি button click করা হলে সেই value গুলো আগের টার সাথে String হিসেবে যুক্ত হবে।

নিচ থেকে পুরো Source Code ডাউনলোড করে আপনার browser এ run করুন।

কোনো সমস্যা থাকলে comment box এ জানাবেন।

Download Calculator Source Code

JS
Calculator



function display(val)
{
 document.getElementById
("textval").value+=val



 }
function evaluate()
{
 var x =
document.getElementById
("textval").value
 var y = eval(x)
 document.getElementById
("textval").value = y
}
function clr()
{
 document.getElementById
("textval").value = ""
}


input[type="button"]
{
border-radius: 10px;
background-color:blue;
color: white;
border-color:#black ;
width:100%;
}
input[type="text"]
{
border-radius: 10px;
text-align: right;
background-color:black;
color: white;
border-color: white;
width:100%
}