First I created an input space here. Here you can input any text. Then there is an ‘Add’ button which can be found in a list after clicking on it.
Next to each task or routine, there is a delete button which if clicked on the text will be deleted. Undoubtedly todo list HTML CSS is a great project.
Now you create an HTML and CSS file. Then follow the complete information and tutorials below step by step.
Step 1: Basic structure of the project
I created a box on the webpage using the HTML and CSS code below. This is basically the basic structure of todo list.
Using the CSS below, I first added blue color to the background color of the webpage. I have used a min-width of 450 px and a min-height of 100px for this box.
Step 2: Create a place to input using HTML
I have created a space for input using the following HTML. With this, I have created a button that will help to input. The width of the input space is 75% and the height is 45 px.
I designed the button using the following CSS. Button width 20% and height 45 px are used. Here background color I have used blue and text color white.
Step 3: Make a list for viewing Todo text
I have also created a todo list view using the HTML and CSS codes below. All the information in this list can be found step by step. Since there is no set amount of information in this list, height is not specified here.
Now I have designed the cancel button in that list.
Below I have given the complete code together then I have explained step by step. If you do not understand the following codes, you may notice the explanations below.
First I have given the ‘if’ condition. If nothing is input in this input place, that is, if the input is 0, then a kind of alert will be seen here. This error message will ask you to input something.
➤ Now I have added the below conditions using else, which means what will happen if you add some information.
➤ First I used innerHTML which will help to see this information on the web page.
➤ Then I said to show the input text in the id called ‘taskname‘. I have already added the required CSS code for the ‘taskname‘.
➤ Then I created a delete button that will help to delete the information in the list. For this, I have added an icon here. I have already added the required CSS code for this button.
Now I have made arrangements to make the delete button effective. If you watch the demo you will understand that I have added a delete button in each list.
That button will help to delete that information. Here are the instructions to remove the information using a simple ‘onclick’.
There are many beginners who can’t put all these codes together. For them, I have put all the codes together and put them down. Copy the code below and then add it to your Html file.