JavaScript
Posted By Sebastian

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


Subscribe On YouTube

Episodes

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.

Adding The Header Logo

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.

Advertisement: The Complete JavaScript Course: Build Real Projects

Master JavaScript with the most complete course! Projects, challenges, quizzes, JavaScript ES6+, OOP, AJAX, Webpack

The Complete JavaScript Course: Build Real Projects *

  • Go from a total beginner to an advanced JavaScript developer
  • JavaScript and programming fundamentals: variables, boolean logic, if/else, loops, functions, arrays, etc.
  • Asynchronous JavaScript: The event loop, promises, async/await, AJAX and APIs
  • A true understanding of how JavaScript works behind the scenes
  • Practice your new skills with coding challenges (solutions included)

Go To Course*

* Affiliate Link / Advertisement: This blog post contains affiliate links, which means that if you click on one of the product links and buy a product, we’ll receive a small commission. There are no additional costs for you. This helps support the channel and allows us to continue to make videos like this. Thank you for the support!


Using and writing about best practices and latest technologies in web design & development is my passion.