📅 Day 10: Project Day – Build a Small App

Welcome to the final day of the 10-Day JavaScript Learning Challenge! 🎉
You’ve explored the core concepts of JavaScript — from variables, loops, and functions to arrays, objects, and DOM manipulation. Now it’s time to bring it all together with a mini project.

🧠 Why a Project?
Projects are the best way to solidify your learning. They give you hands-on experience and help you understand how different JavaScript concepts work together in real-world scenarios.

✅ Mini Project: Build a “To-Do List”
Today’s goal is to build a simple, yet powerful To-Do List App using plain JavaScript.

🧩 Key Features:

• Add new tasks
• Mark tasks as completed
• Delete tasks
• Save tasks to localStorage

🛠️ Concepts You’ll Apply:

• DOM manipulation (querySelector, classList, innerHTML)
• Event handling (addEventListener)
• Functions and scope
• Arrays and objects
• Conditional logic
• Looping over data

🪄 Project Skeleton (HTML)

<div class="todo-app">
  <h2>📝 My To-Do List</h2>
  <input type="text" id="taskInput" placeholder="Add a new task" />
  <button id="addTaskBtn">Add Task</button>
  <ul id="taskList"></ul>
</div>

💻 JavaScript Logic (Basic Setup)

const taskInput = document.getElementById('taskInput');
const addTaskBtn = document.getElementById('addTaskBtn');
const taskList = document.getElementById('taskList');

addTaskBtn.addEventListener('click', function () {
  const taskText = taskInput.value.trim();
  if (taskText !== '') {
    const li = document.createElement('li');
    li.textContent = taskText;

    const deleteBtn = document.createElement('button');
    deleteBtn.textContent = '❌';
    deleteBtn.addEventListener('click', () => li.remove());

    li.addEventListener('click', () => {
      li.classList.toggle('completed');
    });

    li.appendChild(deleteBtn);
    taskList.appendChild(li);
    taskInput.value = '';
  }
});

✨ Styling with CSS

.completed {
  text-decoration: line-through;
  color: gray;
}

🧰 Tools You’ll Use
1. localStorage.setItem(key, value)
This saves data to localStorage using a key-value pair.

Example:

localStorage.setItem('username', 'smriti');

2. localStorage.getItem(key)
This retrieves the data stored by a given key.

Example:

const name = localStorage.getItem('username');
console.log(name); // "smriti"

3. JSON.stringify()
JavaScript objects/arrays can't be stored directly in localStorage. You first need to convert them into strings.

Example:

const todos = ['task1', 'task2'];
localStorage.setItem('tasks', JSON.stringify(todos));

4. JSON.parse()
To get the original object/array back, you convert the string back to a JavaScript format.

Example:

const storedTasks = JSON.parse(localStorage.getItem('tasks'));
console.log(storedTasks); // ['task1', 'task2']

💡 So in short:

• Use localStorage.setItem() to save tasks.
• Convert tasks to a string using JSON.stringify().
• Use localStorage.getItem() to retrieve them.
• Use JSON.parse() to convert them back to an array.
• Load this array when the page loads and rebuild the task list.

🌟 Wrap Up
This mini project wraps up the challenge, but your JavaScript journey doesn’t end here. Try building more complex apps like:

1. Notes app
2. Expense tracker
3. Weather app (using APIs)

💬 Final Thoughts
You’ve built a strong foundation in JavaScript in just 10 days. Keep coding, keep building, and never stop exploring!

If you liked this content, you can buy me a coffee ☕ and support more dev-friendly tutorials.