We now ready to go on and extend the application by bringing in the UI element we need.
Structuring The Body Section
In the body section of index.html start by adding a header section and a div element like you can see in the following listing:
Here we’re already assigning the CSS classes logo and main. Of course these classes are not existing yet. Later on, when styling the application we’ll need to define these CSS classes in styles.css.
Adding The Header Logo
Next we’re using the header section to add a logo and a headline:
Furthermore we’re adding a form into the div section:
<div class="main"> <form> <input type="text" placeholder="New Todo ..."> <button type="submit"><i class="fas fa-plus-square"></i></button> </form> </div>
The form is used to let the user input and create new tasks and therefore is containing two elements:
- input: the input element is of type text and used to enter the task description
- button: the button is of type submit and used to submit the form. The button contains an icon which is coming from the Font Awesome library by using classes fas and fa-plus-square.
Last thing to add is another div element with a class of todoList assigned:
<div class="main"> <form> <input type="text" placeholder="New Todo ..."> <button type="submit"><i class="fas fa-plus-square"></i></button> </form> <div class="todoList"> <ul> </ul> <a class="clearAll" id="clearAll">Clear All</a> </div> </div>
This div block will be used to output the list of tasks (therefore an empty ul element is already inserted). Furthermore the Clear All link is printed out, which will be used to clear the complete list tasks at once.