2,406 পড়া

এইচটিএমএল এবং জাভাস্ক্রিপ্ট ব্যবহার করে একটি সহজ ক্যালকুলেটর তৈরি করার সেরা উপায়

দ্বারা Shuseel Baral5m2023/08/01

অতিদীর্ঘ; পড়তে

এখানে এইচটিএমএল এবং জাভাস্ক্রিপ্ট ব্যবহার করে একটি সাধারণ ক্যালকুলেটর তৈরির ধাপ রয়েছে যা পূর্ণসংখ্যা পূর্ণসংখ্যার উপর সাধারণ গাণিতিক সম্পাদন করতে পারে।

featured image - এইচটিএমএল এবং জাভাস্ক্রিপ্ট ব্যবহার করে একটি সহজ ক্যালকুলেটর তৈরি করার সেরা উপায়

এইচটিএমএল এবং জাভাস্ক্রিপ্ট ব্যবহার করে একটি সাধারণ ক্যালকুলেটর তৈরি করা ওয়েব ডেভেলপারদের জন্য একটি মজার এবং শিক্ষামূলক কাজ হতে পারে যারা সবেমাত্র শুরু করছেন।

ইউজার ইন্টারফেস ডিজাইনের জন্য এইচটিএমএল এবং ক্যালকুলেশন পরিচালনার জন্য জাভাস্ক্রিপ্টের ক্ষমতা একত্রিত করে, আপনি আপনার ব্রাউজারেই একটি ইন্টারেক্টিভ এবং কার্যকরী ক্যালকুলেটর তৈরি করতে পারেন।

এই পোস্টে, আমরা আপনাকে স্ক্র্যাচ থেকে একটি মৌলিক ক্যালকুলেটর তৈরি করার ধাপে ধাপে প্রক্রিয়ার মাধ্যমে নেতৃত্ব দেব এবং সেই সাথে ওয়েব প্রোগ্রামিংয়ের নীতিগুলিও অন্বেষণ করব।

শুরু করার জন্য, আমাদের প্রথমে প্রকল্পের পরিবেশ তৈরি করতে হবে। আমরা মৌলিক HTML ফ্রেমওয়ার্ক তৈরি করব যা আমাদের ক্যালকুলেটরের ভিত্তি হিসেবে কাজ করবে। উপরন্তু, ক্যালকুলেটরটিকে আরও দৃষ্টিনন্দন করতে, আমরা CSS ব্যবহার করে এর চেহারা সেট আপ করব।

অবশেষে, আমরা আমাদের ক্যালকুলেটরে কার্যকারিতা যোগ করার জন্য জাভাস্ক্রিপ্ট পরিবেশ কনফিগার করব।

সুচিপত্র

HTML এবং JavaScript ব্যবহার করে একটি সাধারণ ক্যালকুলেটর তৈরি করার ধাপ
- 1. ইউজার ইন্টারফেস ডিজাইন করা
- 1. ব্যবহারকারীর ইনপুট পরিচালনা করা
- 1. গণনা সঞ্চালন
একটি সাধারণ HTML ক্যালকুলেটরের জন্য সম্পূর্ণ HTML কোড
সাধারণ এইচটিএমএল ক্যালকুলেটরের পূর্বরূপ
উপসংহার

HTML এবং JavaScript ব্যবহার করে একটি সহজ ক্যালকুলেটর তৈরি করার ধাপ

এখানে এইচটিএমএল এবং জাভাস্ক্রিপ্ট ব্যবহার করে একটি সাধারণ ক্যালকুলেটর তৈরির পদক্ষেপ রয়েছে যা পূর্ণসংখ্যা পূর্ণসংখ্যার উপর সাধারণ গাণিতিক সম্পাদন করতে পারে।

টেক্সট এবং বোতাম ইনপুটগুলি একটি ফর্ম উপাদানের মধ্যে একটি টেবিলে ব্যবহার করা হয় এবং অনক্লিক ইভেন্টটি স্ক্রিনে বোতামের মান স্থাপন করতে বা সংখ্যাগুলি মূল্যায়ন করতে ব্যবহৃত হয়েছিল।

1. ইউজার ইন্টারফেস ডিজাইন করা

ইউজার ইন্টারফেস (UI) হল ক্যালকুলেটরের সামনের মুখ। আমরা ইনপুট এবং ফলাফল প্রদর্শনের জন্য একটি পরিষ্কার প্রদর্শন তৈরি করব। আমরা পূর্ণসংখ্যা এবং অপারেটরদের জন্য ইন্টারেক্টিভ বোতামও প্রদান করব। আমাদের লক্ষ্য হল একটি স্বজ্ঞাত এবং ব্যবহারকারী-বান্ধব ডিজাইন তৈরি করা যা ক্যালকুলেটর ব্যবহারকারীদের প্রতিটি দিককে সমৃদ্ধ করে।

ক্যালকুলেটরের ইউজার ইন্টারফেস ডিজাইন করতে নিম্নলিখিত ধাপগুলি ব্যবহার করুন।

ধাপ 1. প্রাথমিকভাবে, নীচে দেওয়া হিসাবে <form> উপাদান এবং <body> ট্যাগ সহ <html> ট্যাগ তৈরি করুন।

 <html> <head><title>A Simple Calculator Using HTML</title></head> <body> <h3>A Simple Calculator Using HTML</h3> <form Name="calc"> </form> </body> </html>

ধাপ 2. এখন, <table>…..</table> ট্যাগ ব্যবহার করে <form>……</form> ট্যাগের মধ্যে একটি টেবিল তৈরি করুন এবং <tr ব্যবহার করে টেবিল সারির টেবিল ডেটার মধ্যে দুই ধরনের ইনপুট টেক্সট এবং বোতাম সন্নিবেশ করুন। ><td>….</td></tr> ট্যাগ।

 <table id="calc" border=2> <tr> <td colspan=5><input id="btn" name="display" type="text"></td> <td style="display:none"><input name="M" type="number"></td> </tr> </table>

ধাপ 3. তারপর, <input> ট্যাগ ব্যবহার করে বোতাম তৈরি করুন, এবং টেবিল সারির মধ্যে এই বোতামগুলির "id" এবং "মান" সেট করুন যেখানে <tr><td>….</td></tr> ট্যাগ রয়েছে নীচে উপস্থাপিত।

 <tr> <td><input id="btn" type=button value="MC"></td> <td><input id="btn" type=button value="0"></td> <td><input id="btn" type=button value="1"></td> <td><input id="btn" type=button value="2"></td> <td><input id="btn" type=button value="+"></td> </tr> <tr> <td><input id="btn" type=button value="MS"></td> <td><input id="btn" type=button value="3"></td> <td><input id="btn" type=button value="4"></td> <td><input id="btn" type=button value="5"></td> <td><input id="btn" type=button value="-"></td> </tr> <tr> <td><input id="btn" type=button value="MR"></td> <td><input id="btn" type=button value="6"></td> <td><input id="btn" type=button value="7"></td> <td><input id="btn" type=button value="8"></td> <td><input id="btn" type=button value="x"></td> </tr> <tr> <td><input id="btn" type=button value="M+"></td> <td><input id="btn" type=button value="9"></td> <td><input id="btn" type=button value="±"></td> <td><input id="btn" type=button value="="></td> <td><input id="btn" type=button value="/"></td> </tr> <tr> <td><input id="btn" type=button value="1/x"></td> <td><input id="btn" type=button value="."></td> <td><input id="btn" type=button value="x2"></td> <td><input id="btn" type=button value="√"></td> <td><input id="btn" type=button value="C"></td> </tr>

ধাপ 4. সবশেষে, নিচের মতো <style>…..</style> ট্যাগ দিয়ে ক্যালকুলেটরের ডিজাইন দিতে নিম্নলিখিত CSS কোড যোগ করুন।

 <style> #calc{width:300px;height:250px;} #btn{width:100%;height:40px;font-size:20px;} </style>

2. ব্যবহারকারীর ইনপুট পরিচালনা করা

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

 <tr> <td colspan=5><input id="btn" name="display" onkeypress="return event.charCode >= 48 && event.charCode <= 57" type="text"></td> <td style="display:none"><input name="M" type="number"></td> </tr>

ধাপ 2. নীচে দেওয়া হিসাবে সংখ্যা এবং গাণিতিক অপারেটর থাকা সমস্ত বোতামগুলির জন্য একটি OnClick ইভেন্ট বরাদ্দ করুন৷

 <tr> <td><input id="btn" type=button value="MC" OnClick="calc.M.value=''"></td> <td><input id="btn" type=button value="0" OnClick="calc.display.value+='0'"></td> <td><input id="btn" type=button value="1" OnClick="calc.display.value+='1'"></td> <td><input id="btn" type=button value="2" OnClick="calc.display.value+='2'"></td> <td><input id="btn" type=button value="+" OnClick="calc.display.value+='+'"></td> </tr> <tr> <td><input id="btn" type=button value="MS" OnClick="calc.M.value=calc.display.value"></td> <td><input id="btn" type=button value="3" OnClick="calc.display.value+='3'"></td> <td><input id="btn" type=button value="4" OnClick="calc.display.value+='4'"></td> <td><input id="btn" type=button value="5" OnClick="calc.display.value+='5'"></td> <td><input id="btn" type=button value="-" OnClick="calc.display.value+='-'"></td> </tr> <tr> <td><input id="btn" type=button value="MR" OnClick="calc.display.value=calc.M.value"></td> <td><input id="btn" type=button value="6" OnClick="calc.display.value+='6'"></td> <td><input id="btn" type=button value="7" OnClick="calc.display.value+='7'"></td> <td><input id="btn" type=button value="8" OnClick="calc.display.value+='8'"></td> <td><input id="btn" type=button value="x" OnClick="calc.display.value+='*'"></td> </tr>

3. গণনা সম্পাদন করা

সমস্ত গাণিতিক অপারেটরদের জন্য একটি OnClick ইভেন্ট বরাদ্দ করুন, Clear(C) বোতামের জন্য স্পেস (“”) সহ একটি ডবল উদ্ধৃতি প্রদান করুন, এবং নিচে দেওয়া হিসাবে OnClick ইভেন্টে সংখ্যাগুলি মূল্যায়ন করতে eval() ফাংশন ব্যবহার করুন।

 <tr> <td><input id="btn" type=button value="M+" OnClick="calc.M.value=(Number(calc.M.value))+(Number(calc.display.value))"></td> <td><input id="btn" type=button value="9" OnClick="calc.display.value+='9'"></td> <td><input id="btn" type=button value="±" OnClick="calc.display.value=(calc.display.value==Math.abs(calc.display.value)?-(calc.display.value):Math.abs(calc.display.value))"> </td> <td><input id="btn" type=button value="=" OnClick="calc.display.value=eval(calc.display.value)"></td> <td><input id="btn" type=button value="/" OnClick="calc.display.value+='/'"></td> </tr> <tr> <td><input id="btn" type=button value="1/x" OnClick="calc.display.value=1/calc.display.value"></td> <td><input id="btn" type=button value="." OnClick="calc.display.value+='.'"></td> <td><input id="btn" type=button value="x2" OnClick="calc.display.value=Math.pow(calc.display.value,2)"></td> <td><input id="btn" type=button value="√" OnClick="calc.display.value=Math.sqrt(calc.display.value)"></td> <td><input id="btn" type=button value="C" OnClick="calc.display.value=''"></td> </tr>

একটি সাধারণ HTML ক্যালকুলেটরের জন্য সম্পূর্ণ HTML কোড

 <html> <head></head> <body> <h3>Simple Calculator</h3> <br/> <style> #calc{width:300px;height:250px;} #btn{width:100%;height:40px;font-size:20px;} </style> <form Name="calc"> <table id="calc" border=2> <tr> <td colspan=5><input id="btn" name="display" onkeypress="return event.charCode >= 48 && event.charCode <= 57" type="text"></td> <td style="display:none"><input name="M" type="number"></td> </tr> <tr> <td><input id="btn" type=button value="MC" OnClick="calc.M.value=''"></td> <td><input id="btn" type=button value="0" OnClick="calc.display.value+='0'"></td> <td><input id="btn" type=button value="1" OnClick="calc.display.value+='1'"></td> <td><input id="btn" type=button value="2" OnClick="calc.display.value+='2'"></td> <td><input id="btn" type=button value="+" OnClick="calc.display.value+='+'"></td> </tr> <tr> <td><input id="btn" type=button value="MS" OnClick="calc.M.value=calc.display.value"></td> <td><input id="btn" type=button value="3" OnClick="calc.display.value+='3'"></td> <td><input id="btn" type=button value="4" OnClick="calc.display.value+='4'"></td> <td><input id="btn" type=button value="5" OnClick="calc.display.value+='5'"></td> <td><input id="btn" type=button value="-" OnClick="calc.display.value+='-'"></td> </tr> <tr> <td><input id="btn" type=button value="MR" OnClick="calc.display.value=calc.M.value"></td> <td><input id="btn" type=button value="6" OnClick="calc.display.value+='6'"></td> <td><input id="btn" type=button value="7" OnClick="calc.display.value+='7'"></td> <td><input id="btn" type=button value="8" OnClick="calc.display.value+='8'"></td> <td><input id="btn" type=button value="x" OnClick="calc.display.value+='*'"></td> </tr> <tr> <td><input id="btn" type=button value="M+" OnClick="calc.M.value=(Number(calc.M.value))+(Number(calc.display.value))"></td> <td><input id="btn" type=button value="9" OnClick="calc.display.value+='9'"></td> <td><input id="btn" type=button value="±" OnClick="calc.display.value=(calc.display.value==Math.abs(calc.display.value)?-(calc.display.value):Math.abs(calc.display.value))"> </td> <td><input id="btn" type=button value="=" OnClick="calc.display.value=eval(calc.display.value)"></td> <td><input id="btn" type=button value="/" OnClick="calc.display.value+='/'"></td> </tr> <tr> <td><input id="btn" type=button value="1/x" OnClick="calc.display.value=1/calc.display.value"></td> <td><input id="btn" type=button value="." OnClick="calc.display.value+='.'"></td> <td><input id="btn" type=button value="x2" OnClick="calc.display.value=Math.pow(calc.display.value,2)"></td> <td><input id="btn" type=button value="√" OnClick="calc.display.value=Math.sqrt(calc.display.value)"></td> <td><input id="btn" type=button value="C" OnClick="calc.display.value=''"></td> </tr> </table> </form> </body> </html>