DEV Community

Cover image for 📅 Day 10: Project Day – Build a Small App
Smriti Singh
Smriti Singh

Posted on

📅 Day 10: Project Day – Build a Small App

#webdev #javascript #todolist #smallapp

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>
Enter fullscreen mode Exit fullscreen mode

💻 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 = ''; } });
Enter fullscreen mode Exit fullscreen mode

✨ Styling with CSS

.completed { text-decoration: line-through; color: gray; }
Enter fullscreen mode Exit fullscreen mode

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

Example:

localStorage.setItem('username', 'smriti');
Enter fullscreen mode Exit fullscreen mode

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

Example:

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

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));
Enter fullscreen mode Exit fullscreen mode

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']
Enter fullscreen mode Exit fullscreen mode

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

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

Top comments (0)