Building A Vanilla JavaScript Todo App From Start To Finish | EP 2: Adding UI Elements

Written by Sebastian on July 13, 2020 · 2 min read

tutorial
Thumbnail for Building A Vanilla JavaScript Todo App From Start To Finish | EP 2: Adding UI Elements

Video on YouTube.com: Building A Vanilla JavaScript Todo App From Start To Finish | EP 2: Adding UI Elements

In the first part of the Building A Vanilla JavaScript Todo App From Start To Finish series we started to setup the project and prepared the basic HTML page by including things like Google Fonts, and the Font Awesome Icon library.

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:

<body class="container">
    <header class="logo">
    </header>

    <div class="main"> 
    </div>
    
    <script type="text/javascript" src="app.js"></script>
</body>

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.

Next we’re using the header section to add a logo and a headline:

    <header class="logo">
        <a href="https://codingthesmartway.com" target="_blank">
            <img class="logo" src="images/ctsw-logo.png" alt="CodingTheSmartWay.com">
        </a>

        <h2 class="headline">Vanilla JavaScript Todo App</h2>
    </header>

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:

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.