কীভাবে জাভাস্ক্রিপ্ট দিয়ে ক্যালকুলেটর অ্যাপ তৈরি করবেন?

1
187

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

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

এখানে বিভিন্ন বিষয় অন্তর্ভুক্ত রয়েছে:

  • Requirements for building Javascript Calculator .
  • JavaScript Functions to build Calculator
  • The Visible Section
  • Adding Flavours of CSS

Requirements for building a calculator using JavaScript

  • Integrated Development Environment
  • Local Server/online compiler

আপনি যদি ওয়েবসাইট বিকাশে নতুন হন তবে আপনার জানা উচিত যে মোতায়েনের আগে কোডগুলি পরীক্ষা করার জন্য একজনের একটি স্থানীয় সার্ভারের প্রয়োজন ।  আপনি wamp, xampp বা অন্য কোনও সার্ভারের জন্য যেতে পারেন। আপনার কোডগুলি লেখার জন্য, এখানে অনেকগুলি বিকল্প রয়েছে: সাব্লাইম টেক্সট 3, নেটবিনস, বন্ধনী ইত্যাদি  একবার প্ল্যাটফর্ম স্থাপন করার পরে, বাকি কাজগুলি করতে হয় ।

আমাদের জাভাস্ক্রিপ্ট ক্যালকুলেটরে, আমরা অভ্যন্তরীণ সিএসএস ব্যবহার করব। প্রথমত, আমাদের কয়টি বোতামের প্রয়োজন তা নির্ধারণ করতে হবে। আপাতত, আমরা আমাদের বেসিক ক্যালকুলেটরের ন্যূনতম কার্যকর কার্যকারিতা আটকে থাকি। সুতরাং, উপাদানগুলির তালিকা নীচে উল্লেখ করা হয়েছে:

ডিসপ্লে স্ক্রিন: এটি ব্যবহারকারীর ইনপুটগুলির পাশাপাশি আউটপুট ফলাফলের জন্য ব্যবহৃত হবে। এমনকি যদি আমরা সম্পূর্ণ ক্যালকুলেটরটি বিকাশ করি তবে রিয়েল টাইম ডিসপ্লে স্ক্রিন ছাড়া এটি ব্যবহার করার কোনও মানে হয় না।

বাটন: একটি বেসিক ক্যালকুলেটরের জন্য আমাদের কমপক্ষে 17 টি বোতামের প্রয়োজন হবে:

নম্বর: সংখ্যার জন্য বোতামগুলি প্রয়োজনীয়। এই বিভাগের জন্য আমাদের 10 টি বোতামের প্রয়োজন। 1-9 এবং একটি 0
অপারেশনস: চারটি বেসিক অপারেশনের জন্য আমাদের 4 টি বোতামের প্রয়োজন।
অন্যান্য: দশমিক, পরিষ্কার এবং ফলাফলের জন্য আমাদের আরও 3 টি বোতাম প্রয়োজন।

জাভাস্ক্রিপ্ট বিভাগঃ

এই বিভাগে প্রদর্শন, সমাধান এবং সুস্পষ্ট কার্যাদি অন্তর্ভুক্ত করা হবে।

ডিসপ্লে ফাংশন: এই ফাংশনটি ফলাফলের পরে কেবলমাত্র ব্যবহারকারী ইনপুট প্রদর্শন করে। আমরা কেবল একটি আইডি যা “ডকুমেন্ট.জেটএলমেন্টবিআইআইডি” দ্বারা কল করা যেতে পারে। এখানে আইডিটি “এডু”।
সলভ ফাংশন: ইভাল () জাভাস্ক্রিপ্টের একটি গব্জ ফাংশন এবং জাভাস্ক্রিপ্ট কোডগুলি সমাধান করার একটি নির্ধারিত উদ্দেশ্য রয়েছে।
ক্লিয়ার ফাংশন: এই ফাংশনটি সম্পাদন করার জন্য আমাদের উদ্ধৃতিগুলির মধ্যে একটি শূন্যতার প্রয়োজন।

Calculator App full Codes in below:

<!DOCTYPE html>
<html>
<head>
<title> Made A Calculator App</title>

<!– Start CSS Part  –>

<style>
.title{
border-radius: 10px;
margin-bottom: 10px;
text-align:center;
width: 210px;
color:#ff4456;
border: solid black 1px;
}
input[type=”button”]
{
border-radius: 10px;
background-color:#ff4456;
color: black;
border-color:#ff4456 ;
width:100%;
}
input[type=”text”]
{
border-radius: 10px;
text-align: center;
background-color:white;
border-color: black ;
width:100%
}
</style>

<!– END CSS PART  –>

</head>
<body>
<div class = title >ITD0CTOR JavaScript Calculator</div>
<table border=”1″>
<tr>
<td><input type=”button” value=”c” onclick=”clr()”/> </td>
<td colspan=”3″><input type=”text” id=”cal”/></td>
<!– clr() function will call clr to clear all value –>
</tr>
<tr>
<!– creating buttons and assigning values–>
<td><input type=”button” value=”+” onclick=”dis(‘+’)”/> </td>
<td><input type=”button” value=”1″ onclick=”dis(‘1’)”/> </td>
<td><input type=”button” value=”2″ onclick=”dis(‘2’)”/> </td>
<td><input type=”button” value=”3″ onclick=”dis(‘3’)”/> </td>
</tr>
<tr>
<td><input type=”button” value=”-” onclick=”dis(‘-‘)”/> </td>
<td><input type=”button” value=”4″ onclick=”dis(‘4’)”/> </td>
<td><input type=”button” value=”5″ onclick=”dis(‘5’)”/> </td>
<td><input type=”button” value=”6″ onclick=”dis(‘6’)”/> </td>
</tr>
<tr>
<td><input type=”button” value=”*” onclick=”dis(‘*’)”/> </td>
<td><input type=”button” value=”7″ onclick=”dis(‘7’)”/> </td>
<td><input type=”button” value=”8″ onclick=”dis(‘8’)”/> </td>
<td><input type=”button” value=”9″ onclick=”dis(‘9’)”/> </td>
</tr>
<tr>
<td><input type=”button” value=”/” onclick=”dis(‘/’)”/> </td>
<td><input type=”button” value=”.” onclick=”dis(‘.’)”/> </td>
<td><input type=”button” value=”0″ onclick=”dis(‘0’)”/> </td>
<!– Evaluating function call eval()–>
<td><input type=”button” value=”=” onclick=”solve()”/> </td>
</tr>
</table>

</body>

<!– START JAVASCRIPT PART  –>

<script>
//function for displaying values
function dis(val)
{
document.getElementById(“cal”).value+=val
}
//function for evaluation
function solve()
{
let x = document.getElementById(“cal”).value
let y = eval(x)
document.getElementById(“cal”).value = y
}
//function for clearing the display
function clr()
{
document.getElementById(“cal”).value = “”
}
</script>

<!– END JAVASCRIPT PART  –>

</html>

 

আউটপুট 

 

 

ধন্যবাদ সবাইকে । সব সময় আমাদের সাথেই থাকুন এই রকম আরও নতুন নতুন অ্যাপ পেতে । পোস্ট টি ভালো লাগলে শেয়ার করতে করবেন ।

 

1 COMMENT

Please comment Here (ভাল লাগলে কমেন্ট করুন)