Todo app with theme switcher. HTML CSS Vanilla Javascript

Community feedback

• 

  Abhik•4,840

  @abhik-bPosted almost 4 years ago

  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💯

  2

  ---

  

  Elliot Case•295

  @ElliotCasePosted almost 4 years ago

  @abhik-b Thank you Abhik for the feedback! I have implemented your solution and it works perfectly, thank you for your help I have also subscribed to you on Youtube! Keep up the good work.

  1

  

  Abhik•4,840

  @abhik-bPosted almost 4 years ago

  @ElliotCase First of all , your implementation looks amazing I like the micro-interaction on the checkbox you gave.

  Secondly thanks for subscribing to my channel and I am glad you liked my work 🙏

  0
• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  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)! 😁

  1

  ---

  

  Elliot Case•295

  @ElliotCasePosted almost 4 years ago

  @ApplePieGiraffe I just want to start off by saying the work you put into this community is amazing, thank you so much for my feedback and so many others!

  These all sound like fixes I can make so I am going to get right on that and implement them today!

  Enjoy your day APG!

  1
• 

  Aleksandr Aksenov•750

  @axevldkPosted almost 4 years ago

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

  1

  ---

  

  Elliot Case•295

  @ElliotCasePosted almost 4 years ago

  @axevldk Hi axevldk thank you for taking the time in giving feedback for my project! I had not heard about the BEM naming convention before but after reading up about it, it makes a lot of sense and will be really important in writing clean and maintainable code! I will make sure to implement this in all my future projects

  I think I will give the circle border gradient another shot (I could only get the inside of the circle to light up on hover but I will try again for the border)

  Thank you again for your kind words! Happy coding

  1
• 

  Elliot Case•295

  @ElliotCasePosted almost 4 years ago

  guess I will start on the accessibility issues :P

  0