A To-do List HTML & CSS (Pt.1)
Something small I’ve been working on recommended to me by a thread I read on reddit a while ago is to work on a To-do list. The Person who posted the thread asked if what they should do to spruce up their coding portfolio, someone commented about a shopping list, a to do list and a weather app. So I was inspired to create my own version of a to-do list, nothing too special but something that was manageable and easier for me to create.
This is what the finished product will look like, but for today I will be presenting only the HTML. So without any css my to-do list would look like this.
Very basic looking right? Well, not much was added but here are the few lines of code.
Most basic things, the real magic is behind the javaScript code that I will be explaining the in the next blog. But here is how we construct everything. we make sure everything is nice and tidy with specific id’s and names for the CSS to work it’s magic as well and have everything looking brilliant. The script I used is from a website named font awesome where they let me sign up for free and I was able to use small images such as a trash can for whenever I have a task, I have a small trash can appear next to any task. With the div class names Container, I have it as the main container that holds everything and keeps all of my UI in a fixed space. New task is where the user will be putting in their information of a new task they want to insert. Tasks is where all of the data goes directly to be displayed.
A peek of whats going on with the CSS file:
I’ve explained my CSS in better detail in this blog. Thank you so much for giving this read for a small taste of what I’ve been doing with my projects! as always, Thank you. Keep coding on!