To Do List App Feedback

Code Feedback
1

Hey Campers!

I have been doing Colt Steele’s Web Developer Bootcamp on Udemy in addition to working through the Front-End Certification on FreeCodeCamp. Here is a To Do List App that I made through the course: https://codepen.io/myronhuang/pen/vRqoZv?editors=0110

Any feedback would be greatly appreciated.

Thank You!

2

Hi, first, this is a great little app, welldone!

You js code is really great, I would pop the span at the end of the li, we don’t want it to float in and cause a line break

...
$("ul").append("<li>" + " " + todoText + "<span><i class='far fa-trash-alt'></i></span></li>");
...

Some little CSS tweaks that make it a little tidier:

Add a bottom-right border-radius to the last li span in the ul. This will make the button match the border of the todo list div.

li:last-child span{
  border-radius: 0  0 25px 0;
}

Pad the li so the button doesn’t touch it / cause wrapping, also, give li height: auto;, so our long todos will wrap to a new line. It would also be a good idea to remove overflow. The change we have made to height will take car of that, just making the li n x lineheight automatically.

li{
height: auto;
padding-right: 40px; 
}
1 Like
3

Thank you for the feedback!

4