Top Online Courses

For Beginners And Experts

Build your web development skills today. Find the right web development online courses on Udemy. Start learning JavaScript, Node.js, React, Vue, Svelte, Angular, and many more ...

~ 2 min read

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.

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:

  • 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.