Project - localStorage Counter

மீட்டமை மற்றும் சேமிப்புடன் ஒரு எண்ணிக்கையை உருவாக்குதல்

இந்த திட்டத்தில் நீங்கள் பின்வரும் பொத்தான்களுடன் ஒரு எண்ணிக்கையை உருவாக்குவீர்கள்:

எண்ணிக்கையை அதிகரிக்க

எண்ணிக்கையை குறைக்க

எண்ணிக்கையை மீட்டமை

எண்ணிக்கையை சேமிக்க

எண்ணிக்கையை ஏற்ற

எண்ணிக்கை

0

திட்டத் திறன்கள்

JavaScript Variables

JavaScript மாறிகள்

JavaScript Functions

JavaScript செயல்பாடுகள்

JavaScript HTML DOM

JavaScript Events

JavaScript நிகழ்வுகள் (onclick attributes)

JavaScript localStorage

JavaScript localStorage (எண்ணிக்கையை சேமிக்க மற்றும் மீட்டெடுக்க)

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>

<script>
// JavaScript code. See below.
</script>

1. HTML உருவாக்குதல்

ஒரு <h2> தலைப்பு உறுப்பைச் சேர்க்கவும்

ஒரு எண்ணைக் காட்டும் <p> உறுப்பைச் சேர்க்கவும்

5 <button> உறுப்புகளைச் சேர்க்கவும்

ஒவ்வொரு பொத்தானுக்கும் onclick பண்புக் கூறைச் சேர்க்கவும்

எடுத்துக்காட்டு

<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>

JavaScript குறியீடு

// எண்ணிக்கையை அறிவிக்கவும்
let count = 0;

// எண்ணிக்கையைக் காட்டும் செயல்பாடு
function updateCount() {
  document.getElementById("count").innerHTML = count;
}

// எண்ணிக்கையை அதிகரிக்கும் செயல்பாடு
function increaseCount() {
  count++;
  updateCount();
}

// எண்ணிக்கையைக் குறைக்கும் செயல்பாடு
function decreaseCount() {
  count--;
  updateCount();
}

// எண்ணிக்கையை மீட்டமைக்கும் செயல்பாடு
function resetCount() {
  count = 0;
  updateCount();
}

// எண்ணிக்கையை சேமிக்கும் செயல்பாடு
function saveCount() {
  localStorage.setItem("count", count);
}

// எண்ணிக்கையை ஏற்றும் செயல்பாடு
function loadCount() {
  let saved = localStorage.getItem("count");
  if (saved !== null) {
    count = Number(saved);
  }
  updateCount();
}

2. ஸ்கிரிப்ட் உருவாக்குதல்

<script>

// எண்ணிக்கையை அறிவிக்கவும்
let count = 0;

// எண்ணிக்கையைக் காட்டும் செயல்பாடு
function updateCount() {
  document.getElementById("count").innerHTML = count;
}
</script>

3: எண்ணிக்கையை அதிகரிக்கும் செயல்பாட்டைச் சேர்த்தல்

// எண்ணிக்கையை அதிகரிக்கும் செயல்பாடு
function increaseCount() {
  count++;
  updateCount();
}

4: எண்ணிக்கையைக் குறைக்கும் செயல்பாட்டைச் சேர்த்தல்

// எண்ணிக்கையைக் குறைக்கும் செயல்பாடு
function decreaseCount() {
  count--;
  updateCount();
}

5: எண்ணிக்கையை மீட்டமைக்கும் செயல்பாட்டைச் சேர்த்தல்

// எண்ணிக்கையை மீட்டமைக்கும் செயல்பாடு
function resetCount() {
  count = 0;
  updateCount();
}

6: எண்ணிக்கையை சேமிக்கும் செயல்பாட்டை உருவாக்குதல்

// எண்ணிக்கையை சேமிக்கும் செயல்பாடு
function saveCount() {
  localStorage.setItem("count", count);
}

7: எண்ணிக்கையை ஏற்றும் செயல்பாட்டை உருவாக்குதல்

// எண்ணிக்கையை ஏற்றும் செயல்பாடு
function loadCount() {
  let saved = localStorage.getItem("count");
  if (saved !== null) {
    count = Number(saved);
  }
  updateCount();
}

💾 குறிப்பு:

localStorage மதிப்புகளை உரை வடிவில் சேமிக்கிறது, எனவே Number() ஐப் பயன்படுத்தி மதிப்பை மீண்டும் எண்ணாக மாற்றுகிறோம்.

நீங்கள் என்ன கற்றுக்கொண்டீர்கள்?

HTML ஐப் புதுப்பிக்க

JavaScript ஐப் பயன்படுத்தி HTML ஐ எவ்வாறு புதுப்பிப்பது

பொத்தான் நிகழ்வுகள்

பொத்தான் நிகழ்வுகளைப் பயன்படுத்துவது (onclick)

localStorage

localStorage இலிருந்து மதிப்புகளைச் சேமித்து ஏற்றுவது

நிறுவனமான குறியீடு

செயல்பாடுகளுடன் உங்கள் குறியீட்டை நிறுவனமாக வைத்திருப்பது

பயிற்சிகள்

🏋️ பயிற்சி 1

எண்ணிக்கையை 0 க்கு பதிலாக 10 இல் தொடங்கச் செய்யவும்.

🏋️ பயிற்சி 2

எண்ணிக்கையை 0 க்கு கீழே செல்லாமல் தடுக்கவும்.

🏋️ பயிற்சி 3

பக்கம் திறக்கும் போது தானாக சேமிக்கப்பட்ட எண்ணிக்கை மதிப்பை ஏற்றவும்.

தீர்வுகள்

// எண்ணிக்கையை அறிவிக்கவும்
let count = 10;

// பக்கம் திறக்கும் போது எண்ணிக்கையை ஏற்றவும்
loadCount();

// எண்ணிக்கையைக் காட்டும் செயல்பாடு
function updateCount() {
  document.getElementById("count").innerHTML = count;
}

// எண்ணிக்கையை அதிகரிக்கும் செயல்பாடு
function increaseCount() {
  count++;
  updateCount();
}

// எண்ணிக்கையைக் குறைக்கும் செயல்பாடு
function decreaseCount() {
  if (count > 0) {
    count--;
    updateCount();
  }
}

// எண்ணிக்கையை மீட்டமைக்கும் செயல்பாடு
function resetCount() {
  count = 10;
  updateCount();
}

// எண்ணிக்கையை சேமிக்கும் செயல்பாடு
function saveCount() {
  localStorage.setItem("count", count);
}

// எண்ணிக்கையை ஏற்றும் செயல்பாடு
function loadCount() {
  let saved = localStorage.getItem("count");
  if (saved !== null) {
    count = Number(saved);
  }
  updateCount();
}

🧪 சோதனை செய்யுங்கள்:

மதிப்பைச் சேமிக்கவும், பக்கத்தை மீண்டும் ஏற்றவும், அது தானாக ஏற்றப்படுகிறதா என்று பாருங்கள்.

JavaScript திட்டங்கள்

JavaScript Counter

localStorage இல் மீட்டெடுத்து சேமிக்கும் எண்ணிக்கை திட்டம்.

JavaScript Event Listener

onclick க்கு பதிலாக event listener ஐப் பயன்படுத்தும் எண்ணிக்கை திட்டம்.

JavaScript To-Do List

local storage இல் உள்ள ஒரு வரிசையில் சேமிக்கப்பட்ட செய்ய வேண்டிய பட்டியல்.

JavaScript Modal Popup

பக்கத்தின் மேல் தோன்றும் மாதிரி பாப்-அப் சாளரம்.