/ToDo-App

Primary LanguageJavaScript

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

Note: Delete this note and update the table of contents based on what sections you keep.

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

Screenshot

Links

My process

Built with

  • Semantic HTML5 markup
  • SCSS custom properties
  • Mobile-first workflow
  • React - JS library
  • Redux - JS library

What I learned

I have learned Redux by building this application. Here is my reducer function:

import { createSlice } from "@reduxjs/toolkit";

export const VisibilityFilters = {
  ALL: "ALL",
  ACTIVE: "ACTIVE",
  COMPLETED: "COMPLETED",
};

const todoSlice = createSlice({
  name: "todo",
  initialState: {
    todos: [],
    visibilityFilter: VisibilityFilters.ALL,
    incompleteTasksCount: 0,
  },

  reducers: {
    addTodo: (state, action) => {
      state.todos.push({
        id: state.todos.length + 1,
        task: action.payload,
        isCompleted: false,
      });
      state.incompleteTasksCount++;
    },
    deleteTodo: (state, action) => {
      const index = state.todos.findIndex((todo) => todo.id === action.payload);
      if (index !== -1) {
        if (!state.todos[index].isCompleted) {
          state.incompleteTasksCount--; 
        }
        state.todos.splice(index, 1);
      }
    },
    toggleComplete: (state, action) => {
      const todo = state.todos.find((todo) => todo.id === action.payload);
      if (todo) {
        todo.isCompleted = !todo.isCompleted;
        if (todo.isCompleted) {
          state.incompleteTasksCount--; 
        } else {
          state.incompleteTasksCount++; 
        }
      }
    },
    setVisibilityFilter: (state, action) => {
      state.visibilityFilter = action.payload;
    },
    deleteCompletedTasks: (state) => {
      state.todos = state.todos.filter((todo) => !todo.isCompleted);
      state.incompleteTasksCount = state.todos.filter(
        (todo) => !todo.isCompleted
      ).length;
    },
  },
});

export const { addTodo, deleteTodo, toggleComplete, setVisibilityFilter, deleteCompletedTasks } =
  todoSlice.actions;

export default todoSlice.reducer;

Continued development

To practice ReactJs and Redux more, helps me to continue focusing on in future projects.

Useful resources

  • Redux Documentation - This helped me for understanding the core concepts of Redux.
  • Learn Redux - This is an amazing course in CodeCademy which helped me finally understand Redux. I'd recommend it to anyone still learning this concept.

Author