Solution 1 :

You didn’t close the li tag in function that adds new todos:

$("ul").append("<li><span><i class='fa fa-trash' aria-hidden='true'></i></span> " + todosText + "<li>")

should be

$("ul").append("<li><span><i class='fa fa-trash' aria-hidden='true'></i></span> " + todosText + "</li>")

Problem :

I have made this Todo project wherein one can add todos, delete them and line-through the ones that have been completed but I am facing problem in adding a new todo to the list i.e it every time on the addition of a new todo leaves an alternative space blank, unable to find the bug.

Following is the js file:

$("ul").on("click", "li", function(){




    if(event.which === 13)
        var todosText=$(this).val();
        $("ul").append("<li><span><i class='fa fa-trash' aria-hidden='true'></i></span> " + todosText + "<li>")




html file:

<!DOCTYPE html>

    <title>To Do List</title>
    <script type="text/javascript" src="assests/js/lib/jquery-2.1.4.min.js"></script>
    <link rel="stylesheet" type="text/css" href="assests/css/todos.css">
    <link href="|Open+Sans:600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="assests/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <link href="" rel="stylesheet">

    <div id="container">
    <h1 >TO-DO LIST <i class="fa fa-pencil-square" aria-hidden="true"></i></h1>
    <input type="text" placeholder="Add New Todo">
        <li><span><i class="fa fa-trash" aria-hidden="true"></i></span> Check the theme</li>
        <li><span><i class="fa fa-trash" aria-hidden="true"></i></span> Go to the store</li>
        <li><span><i class="fa fa-trash" aria-hidden="true"></i></span> Select dress </li>
<script type="text/javascript" src="assests/js/todos.js"></script>


Comment posted by Gangadhar Gandi

Paste your css as well.

Comment posted by Roko C. Buljan

Closing question as Typo (Missing