/todo

Part of frontendmentor.io challenges

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

Light Mode Dark Mode

Links

My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • CSS Grid
  • Mobile-first workflow

What I learned

I was comfortable with this project overall but there was one thing that I've never done before which is setting a linear gradient as a border. This part was challenging bu I learned how to do it for elements with border radius and the elements without.

To do it for element with border radius:

.element {
  border-image: linear-gradient(hsl(192, 100%, 67%), hsl(280, 87%, 65%)) 1;
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  }

To do it for element without border radius:

.element {
  background: linear-gradient(hsl(0, 0%, 100%), hsl(0, 0%, 100%)) padding-box,
    linear-gradient(hsl(192, 100%, 67%), hsl(280, 87%, 65%)) border-box;
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  }

Useful resources

  • Gradient Borders - This helped me to learn how to set a linear gradient as a border.
  • W3Schools - This helped me to review some JavaScript basics such as how to get an element id and other similar things.

Author