Project - localStorage Counter

একটি নম্বর সঞ্চয় এবং লোড করার জন্য প্রোগ্রাম

Project - localStorage Counter

রিসেট এবং সংরক্ষণের সাথে একটি গণনা তৈরি করা

এই প্রকল্পে আপনি নিম্নলিখিত বোতামগুলির সাথে একটি গণনা তৈরি করবেন:

সংখ্যা বাড়ানোর জন্য
সংখ্যা কমাতে
গণনা রিসেট করুন
গণনা সংরক্ষণ করুন
লোড গণনা

গণনা

0

পরিকল্পনার দক্ষতা

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> শিরোনাম উপাদান যোগ করুন
একটি <p> উপাদান যোগ করুন যা একটি সংখ্যা প্রদর্শন করে
5 একটি <বোতাম> উপাদান যোগ করুন
প্রতিটি বোতামে একটি অনক্লিক বৈশিষ্ট্য যোগ করুন

উদাহরণ

<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

পৃষ্ঠার শীর্ষে একটি নমুনা পপ-আপ উইন্ডো প্রদর্শিত হবে৷