DEV Community

Cover image for My React Journey: Day 7
Ayoola Damilare
Ayoola Damilare

Posted on • Edited on

1

My React Journey: Day 7

I decided to build a To-Do App using plain JavaScript, and I’m excited to share what I’ve achieved so far!

Features Implemented:

  1. Task Management:

Users can add new tasks, edit existing ones, mark tasks as complete, or delete them.
Completed tasks are visually differentiated with a strikethrough and styled text.

  1. Progress Tracking:

A progress bar dynamically updates to show how many tasks are completed out of the total.
Progress stats (e.g., 2/5 tasks completed) are also displayed.

  1. Data Persistence:

Tasks are stored in LocalStorage, so your list is saved even when the page is refreshed.

  1. Celebration Effect:

When all tasks are marked as complete, the app celebrates with a confetti animation for extra motivation!

Design:

  • I used CSS variables to maintain a consistent theme across the app, with a clean and modern interface.
  • Each task has icons for edit and delete, making the app more user-friendly.

Key Challenges & Solutions:

  • Challenge: Making the progress bar dynamic.
    Solution: Calculated the percentage of completed tasks and updated the width of the progress bar in real time.

  • Challenge: Ensuring persistence after a refresh.
    Solution: Integrated LocalStorage to store and retrieve tasks efficiently.

Code Highlights:
Used reusable JavaScript functions like addTask(), deleteTask(), and updateTasksList() for better structure.
Leveraged forEach() for seamless iteration and manipulation of tasks.
Added event listeners to manage user actions dynamically.

Day 8, here I come

SurveyJS custom survey software

Simplify data collection in your JS app with a fully integrated form management platform. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more. Integrates with any backend system, giving you full control over your data and no user limits.

Learn more

Top comments (0)

Sentry growth stunted Image

If you are wasting time trying to track down the cause of a crash, it’s time for a better solution. Get your crash rates to zero (or close to zero as possible) with less time and effort.

Try Sentry for more visibility into crashes, better workflow tools, and customizable alerts and reporting.

Switch Tools