Frontend Mentor - Todo app Solution

This repo contains my solution to the Todo app challenge on Frontend Mentor.

Links

• Live Site URL: [https://todo-app-delta-ochre.vercel.app/]
• My solution on FrontendMentor: [https://www.frontendmentor.io/solutions/todo-app-F3cEoGFia]

Table of contents

• Overview
  • The challenge
  • Links
• My process
  • Built with
  • Continued development
• Author
• Acknowledgments

Overview

This is a simple Todo list app built with HTML, CSS and Javascript. The app has all basic functions that allow users to add, delete, and filter todos according to status. Users can also clear all their completed tasks with a single click. This app hass a drag and drop functionality to rearrange the todos (Thanks to SortableJs library!), and oh, their todos are in local storage so it doesn't vanish whenever they refresh the page or close their browsers. Cool right? 😉

The challenge

Users should be able to:

• View the optimal layout for the app depending on their device's screen size
• See hover states for all interactive elements on the page
• Add new todos to the list
• Mark todos as complete
• Delete todos from the list
• Filter by all/active/complete todos
• Clear all completed todos
• Toggle light and dark mode
• Bonus: Drag and drop to reorder items on the list
• AnotherBonus: Add and remove items to/from local storage dynamically

My process

I started by coding the design with HTML and CSS, and hardcoded the todos at first, so that i can get all the styling right. Then i took out all hardcoded todos from the page and added the functionality with Javascript that lets users create the todos. The Javascript took more time to implement and I learned a lot during the process. A whole lot!

As soon as everything worked fine, I refactored my code a bit then noted functionalities that I may add in the future e.g storing the todos so that they are accessible and according to date. Add a "view previous todo list that has two options, go back one step or choose the exact date of the todo list you want to view.

*A week or so later

Todos are now stored and removed dynamically in/from local storage. For the other features I plan to add, I wonder if creating the todos as objects, and giving them a date parameter using the date function would help. Or using the date fucntion to dynamically give each todo their IDs. I'll try all these on a later date.

Right now, I am so happy with the progress I made with this challenge. It is amazing how much one can do with some knowledge of HTML, CSS, loops, conditional statements, arrays and local storage/JSON. Have you seen what I was doing with nested for loops dear??? Have you?? Hahaha!

The local storage part was a bit confusing at first but once I clocked what was going on, it became really easy to manipulate. It was really fun to try several things to make something work and keep failing until I finally got it right.

I know there are better ways to recreate this with less code (actually, I hope so! 😭 ) and I'll keep learning, and may re-do this challenge again in the future but for now YAAASSSS girrrrrl! You rock!

Built with

• Semantic HTML5 markup
• CSS custom properties
• Javascript
• SortableJs library

Continued development

I'll continue to build more websites/apps using HTML CSS and Javascript to improve my skills then learn more about APIs and then React

*Aside

I started Javascript30 by Wes Bos and I have done the first two challenges (not pushed it here yet). I want to complete the challenge so if you see this. Ask me about it if you don't find a repo of the project (give me some days though, please 🥺 ) or if you find one and it is covered in dust. Thanks my friend.

Author

• Frontend Mentor - @officialkome
• Twitter - @elementherlist

Acknowledgments

Thanks to the Frontend Mentor community for creating these challenges. I really really enjoyed and appreciate this one! 🙏🏾