Todo app with theme switcher. HTML CSS Vanilla Javascript

Hi ElliotCase , your solution seems perfect, you have done a great job on this challenge !👌

What I did to have a gradient circle was having a pseudo element for the actual circle(and no borders ) and have that pseudo-element the same bg-color as each todo,then on hovering change the bg-color of actual circle :

.circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: hsl(237, 14%, 26%);
  position: relative;
  cursor: pointer;
}
.circle::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 93%;
  height: 93%;
  background: var(--bg-todo);
  border-radius: 50%;
}

.todo:hover .circle {
  background-image: linear-gradient(hsl(192, 100%, 67%), hsl(280, 87%, 65%));
}

Hope this helps .

Keep it up💯

Hey, there, Elliot Case! 👋

Good work on this challenge! 👏 Your to-do list works quite well! 👍

I suggest,

• Adding cursor: pointer to the theme changer button.
• Allowing users to mark items as completed by clicking on the name of the item (rather than just the checkbox beside it).
• Making sure that users cannot add empty items to the to-do list would be a good idea, I think. 😉

Keep coding (and happy coding, too)! 😁

Hi, @Elliot Case ~ I have studied you work, and I think it's really great ~ 👍 Here are some of my opinions on your work.

1. I hope you to try to use BEM naming convention for the list objects.

2. There are some HTML and Accessibility errors as you can see on the report. As you said, they have to be get eliminated ~

3. I think there was hover effect on list items - circle border gradient. That is also tricky part in this challenge. I hope you to solve that one.

Anyway, overall looks great ~ Happy coding ~ ✨

guess I will start on the accessibility issues :P