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
  • Useful resources
• 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 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

Mobile Page (Light and Dark)

---

Tablet Page (Light and Dark)

---

Desktop Page (Light and Dark)

I have include six screen shots of three devices:

• Nokia N9 (480x854)
• iPad (768x1024)
• MacBook Air (1440x900)

I used the Responsively app while coding. They have a great screen-shot function. I also used Photoscape app to edit and combine the screen shots.

Links

• Solution URL: ReactJS ToDo App with SCSS
• Live Site URL: ReactJS ToDo App with SCSS

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• React - JS library
• Sass - still one of my favorites to use.

What I learned

I'm still a novice when it comes to working with React. In fact, I started this project before I worked on my React Nanodegree with Udacity. Many of my notes focus on learning and reviewing key concepts I had learned through Freecodecamp. While working on my Todo App, I learned:

• About making a unique ToDo task using name and adding props to the ToDoList Component. New-- used localeStorage for getting and holding task data. I was having a hard time figuring out how to import my sample tasks.
• That useState() creates a piece of state for a component, and its only parameter determines the initial value of that state. It returns two things: the state, and a function that can be used to update the state later.
• How to use an object spread syntax to create a new object and toggle checked property before returning it.
• About using an Array.prototype.filter() to test and exclude a task from the new array if the id prop matches the id parameter passed into the deleteTask();
• About how React deals with events and handles state, and implemented functionality to add tasks, delete tasks, and toggle tasks as completed.

The section that I was most proud about was my theme. This was my first time building a React app with light and dark theme. I included a snippet of my Sass for my theme below:

@mixin themed() {
	@each $theme, $map in $themes {
		.theme--#{$theme} & {
			$theme-map: () !global;
			@each $key, $submap in $map {
				$value: map-get(map-get($themes, $theme), '#{$key}');
				$theme-map: map-merge(
					$theme-map,
					(
						$key: $value,
					)
				) !global;
			}
			@content;
			$theme-map: null !global;
		}
	}
}

Continued development

My main goal is to continue working with React to strengthen my skills. I was having difficulty adding the Drag and Drop feature to my Todo list. I plan to continue working on that version to get the feature to work.

Useful resources

• Sass Guidelines
• Implementing Dark Mode in your React App with SCSS
• Creating Add/Remove Effects for list items
• Beginning our React todo list
• How to create a dark mode in sass by Katie McTigue
• The Best Way to Add Dark Mode to Your React/Sass Project, by Jimmy Lam
• Coding a CSS Theme Switcher: A Multitude of Ways
• Having Problems with Your React App Not Loading and Throwing Page Unresponsive Message? Here's the Fix, by Adedotun Adedigba
• MDN Web Docs- :checked
• Style Checkboxes and Radio Buttons
• How to Style a Checkbox with CSS
• MDN: Advanced Form Styling

Author

• Website - Trista Lanette Pollard
• Frontend Mentor - @tlanettepollard
• Twitter - @TpLanetteNBCT

Acknowledgments

I referred to the following web designers' code for guidance on this project:

• Mileine-- used as reference for organizing theme and building theme changer.
• Kremenovic-- resource sites for working with dark theme
• Cyishere.dev-- followed his organization for component file structure and app template.