Frontend Mentor - Todo app solution

This is a solution to the Todo app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

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

Overview

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 some 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

Screenshot

Links

• Solution URL: Click Here
• Live Site URL: Click Here

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow
• Vanilla Javascript
• Webpack

What I learned

This project required some things that i either didn't know or i had forgotten. I learned how to use LocalStorage, used factory functions to create objects, used modules to split code and remembered how call, apply and bind work.

Some meaningful code snippets:

.circle-filled::before {
    content: "";
    width: 20px;
    height: 20px;
    background: url("./images/icon-check.svg");
    background-position: center;
    background-repeat: no-repeat;
}

localStorage.setItem("todosList", JSON.stringify(todos_list));
let ids = new Set(
    todos_list
      .filter((todoItem) => getState.call(todoItem) == rule)
      .map((todoItem) => getId.call(todoItem))
);

Continued development

I want to continue improving my JS skills, so my next step is to learn concepts like asyncronous javascript

Author

• Frontend Mentor - @dialejo24

Acknowledgments

A huge shout out to all the people who kindly uploads content related to programming for free. They are literlly chaging many people's lives.