TODO App Solution

This is a solution to the Learn localStorage by Building a Todo App challenge on FreeCodeCamp. This challenge helps you understand how to use localStorage to persist data in a web application.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

• Add new tasks with a title, date, and description
• View a list of added tasks
• Edit existing tasks
• Delete tasks
• The data should persist even after a page reload using localStorage

Screenshot

Links

• Live Site URL: Live Site

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• JavaScript (ES6)
• localStorage

What I learned

Working on this project reinforced my understanding of:

• localStorage: How to store and retrieve data in a web application.
• JavaScript DOM Manipulation: How to dynamically create, update, and remove elements.
• Event Handling: Managing form submissions, button clicks, and dialog interactions.
• Conditional Logic: Handling unsaved changes and confirming user actions with dialogs.

Code snippets I’m proud of:

const addOrUpdateTask = () => {
  const dataArrIndex = taskData.findIndex((item) => item.id === currentTask.id);
  const taskObj = {
    id: `${titleInput.value.toLowerCase().split(" ").join("-")}-${Date.now()}`,
    title: titleInput.value,
    date: dateInput.value,
    description: descriptionInput.value,
  };

  if (dataArrIndex === -1) {
    taskData.unshift(taskObj);
  } else {
    taskData[dataArrIndex] = taskObj;
  }

  localStorage.setItem("data", JSON.stringify(taskData));
  updateTaskContainer();
  reset();
};

.task-form {
  display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--white);
  border-radius: 5px;
  padding: 15px;
  width: 300px;
  height: 350px;
  flex-direction: column;
  justify-content: space-between;
  overflow: auto;
}

const editTask = (buttonEl) => {
    const dataArrIndex = taskData.findIndex(
    (item) => item.id === buttonEl.parentElement.id
  );

  currentTask = taskData[dataArrIndex];

  titleInput.value = currentTask.title;
  dateInput.value = currentTask.date;
  descriptionInput.value = currentTask.description;

  addOrUpdateTaskBtn.innerText = "Update Task";

  taskForm.classList.toggle("hidden");  
}

Continued development

In future projects, I aim to:

• Implement Advanced Features: Adding task prioritization, categories, or tags.
• Explore More Storage Options: Such as session storage or IndexedDB for more complex scenarios.
• Improve UI/UX: Enhancing the form with better validation and user feedback.

Useful resources

• MDN Web Docs - localStorage - Essential for understanding how to use local storage.
• JavaScript.info - DOM Manipulation - Great resource for learning about JavaScript and DOM manipulation.
• CSS Tricks - Flexbox Guide - Helpful for layout design using Flexbox.

Author

• LinkedIn - Yashi Singh

Acknowledgments

A special thank you to FreeCodeCamp for providing this challenge. It was a great opportunity to practice JavaScript and understand localStorage. Also, thanks to the community for their support and feedback. Lastly, a shout-out to MDN Web Docs for their comprehensive documentation and tutorials.