Project - localStorage Counter
রিসেট এবং সংরক্ষণের সাথে একটি গণনা তৈরি করা
এই প্রকল্পে আপনি নিম্নলিখিত বোতামগুলির সাথে একটি গণনা তৈরি করবেন:
গণনা
পরিকল্পনার দক্ষতা
JavaScript Variables
জাভাস্ক্রিপ্ট ভেরিয়েবল
JavaScript Functions
জাভাস্ক্রিপ্ট ফাংশন
JavaScript HTML DOM
JavaScript HTML DOM
JavaScript Events
জাভাস্ক্রিপ্ট ইভেন্ট (অনক্লিক বৈশিষ্ট্য)
JavaScript localStorage
জাভাস্ক্রিপ্ট স্থানীয় স্টোরেজ (গণনা সংরক্ষণ এবং পুনরুদ্ধার করতে)
এইচটিএমএল কোড
<h2>Counter</h2>
<p id="count" style="font-size:40px;">0</p>
<button onclick="increaseCount()">+</button>
<button onclick="decreaseCount()">-</button>
<button onclick="resetCount()">Reset</button>
<button onclick="saveCount()">Save</button>
<button onclick="loadCount()">Load</button>
<script>
// JavaScript code. See below.
</script>
1. HTML তৈরি করা
উদাহরণ
<h2>Counter</h2>
<p id="count" style="font-size:40px;">0</p>
<button onclick="increaseCount()">+</button>
<button onclick="decreaseCount()">-</button>
<button onclick="resetCount()">Reset</button>
<button onclick="saveCount()">Save</button>
<button onclick="loadCount()">Load</button>
জাভাস্ক্রিপ্ট কোড
// গণনা ঘোষণা করুন যাক গণনা = 0; // ফাংশন যা গণনা প্রদর্শন করে ফাংশন updateCount() { document.getElementById("count").innerHTML = count; } // ফাংশন যা একটি গণনা বৃদ্ধি করে ফাংশন বৃদ্ধি গণনা() { গণনা++; updateCount(); } // একটি গণনা হ্রাস করার ফাংশন ফাংশন হ্রাসগণনা() { গণনা--; updateCount(); } // ফাংশন যা গণনা পুনরায় সেট করে ফাংশন resetCount() { গণনা = 0; updateCount(); } // সঞ্চয় গণনা ফাংশন ফাংশন saveCount() { localStorage.setItem("গণনা", গণনা); } // লোড গণনা ফাংশন ফাংশন loadCount() { let saved = localStorage.getItem("count"); যদি (সংরক্ষিত!== শূন্য) { গণনা = সংখ্যা (সংরক্ষিত); } updateCount(); }
2. একটি স্ক্রিপ্ট তৈরি করা
<script> // গণনা ঘোষণা করুন যাক গণনা = 0; // ফাংশন যা গণনা প্রদর্শন করে ফাংশন updateCount() { document.getElementById("count").innerHTML = count; } </script>
3: একটি ইনক্রিমেন্টিং ফাংশন যোগ করা
// ফাংশন যা একটি গণনা বৃদ্ধি করে ফাংশন বৃদ্ধি গণনা() { গণনা++; updateCount(); }
4: একটি হ্রাস ফাংশন যোগ করা
// একটি গণনা হ্রাস করার ফাংশন ফাংশন হ্রাসগণনা() { গণনা--; updateCount(); }
5: একটি গণনা রিসেট ফাংশন যোগ করা
// ফাংশন যা গণনা পুনরায় সেট করে ফাংশন resetCount() { গণনা = 0; updateCount(); }
6: একটি ফাংশন তৈরি করা যা একটি গণনা সংরক্ষণ করে
// সঞ্চয় গণনা ফাংশন ফাংশন saveCount() { localStorage.setItem("গণনা", গণনা); }
7: একটি ফাংশন তৈরি করা যা একটি গণনা লোড করে
// লোড গণনা ফাংশন ফাংশন loadCount() { let saved = localStorage.getItem("count"); যদি (সংরক্ষিত!== শূন্য) { গণনা = সংখ্যা (সংরক্ষিত); } updateCount(); }
দ্রষ্টব্য:
localStorage মানগুলিকে পাঠ্য হিসাবে সংরক্ষণ করে, তাই আমরা Number() ব্যবহার করে মানটিকে একটি সংখ্যায় রূপান্তর করি।
আপনি কি শিখলেন?
HTML আপডেট করতে
জাভাস্ক্রিপ্ট ব্যবহার করে কিভাবে HTML আপডেট করবেন
বোতাম ঘটনা
বোতাম ইভেন্ট ব্যবহার করে (অনক্লিক)
localStorage
লোকাল স্টোরেজ থেকে মান সংরক্ষণ এবং লোড করা
কোম্পানির কোড
আপনার কোড ফাংশন সঙ্গে সংগঠিত রাখা
ব্যায়াম
ব্যায়াম 1
গণনা 0 এর পরিবর্তে 10 এ শুরু করুন।
ব্যায়াম 2
গণনাকে ০-এর নিচে যাওয়া থেকে বিরত রাখুন।
ব্যায়াম 3
পৃষ্ঠাটি খোলা হলে স্বয়ংক্রিয়ভাবে সংরক্ষিত গণনা মান লোড করুন।
সমাধান
// গণনা ঘোষণা করুন যাক গণনা = 10; // পৃষ্ঠা খুললে গণনা লোড করুন loadCount(); // ফাংশন যা গণনা প্রদর্শন করে ফাংশন updateCount() { document.getElementById("count").innerHTML = count; } // ফাংশন যা একটি গণনা বৃদ্ধি করে ফাংশন বৃদ্ধি গণনা() { গণনা++; updateCount(); } // একটি গণনা হ্রাস করার ফাংশন ফাংশন হ্রাসগণনা() { যদি (গণনা > 0) { গণনা--; updateCount(); } } // ফাংশন যা গণনা পুনরায় সেট করে ফাংশন resetCount() { গণনা = 10; updateCount(); } // সঞ্চয় গণনা ফাংশন ফাংশন saveCount() { localStorage.setItem("গণনা", গণনা); } // লোড গণনা ফাংশন ফাংশন loadCount() { let saved = localStorage.getItem("count"); যদি (সংরক্ষিত!== শূন্য) { গণনা = সংখ্যা (সংরক্ষিত); } updateCount(); }
পরীক্ষা:
মান সংরক্ষণ করুন, পৃষ্ঠাটি পুনরায় লোড করুন এবং দেখুন এটি স্বয়ংক্রিয়ভাবে লোড হয় কিনা।
জাভাস্ক্রিপ্ট প্রকল্প
JavaScript Counter
একটি গণনা স্কিম যা স্থানীয় স্টোরেজে পুনরুদ্ধার এবং সঞ্চয় করে।
JavaScript Event Listener
একটি গণনা প্রোগ্রাম যা অনক্লিকের পরিবর্তে একটি ইভেন্ট লিসেনার ব্যবহার করে।
JavaScript To-Do List
স্থানীয় স্টোরেজে একটি অ্যারেতে সংরক্ষিত একটি করণীয় তালিকা।
JavaScript Modal Popup
পৃষ্ঠার শীর্ষে একটি নমুনা পপ-আপ উইন্ডো প্রদর্শিত হবে৷