index.html

<!DOCTYPE html>
    <head>
        <title>Your Basic ToDo List</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
        <link rel="stylesheet" href="todo-style.css">
    </head>
    <body>
        <h1 class="main-heading">To-Do </h1>
        <!-- Container for input holder that adds to the list on pressing the add button  -->

        <div class="to-do-input-container">
            <!-- input for what you want to add -->
            <input class="user-input" type="text" placeholder="What you wanna add ?">
            <button class = "add-task"><i class="fas fa-plus"></i></button>
        </div>
        
        <div class="task-container">
            <!-- <div class="tasks">
                <input type="checkbox" class="task-check">
                <input type="text" class="task-input" disabled>
                <button class="edit-task"><i class="fas fa-edit"></i></button>
                <button class="delete-task"><i class="far fa-trash-alt"></i></button>
            </div> -->
            <!-- <div class="tasks">
                <input type="text" class="task-input" disabled>
                <button class="edit-task"><i class="fas fa-edit"></i></button>
                <button class="delete-task"><i class="far fa-trash-alt"></i></button>
            </div> -->
            <!-- Firstly i styled these containers and then added them by javascrript -->
        </div>
        <p id="counter"> You have 0 pending tasks</p>



        
        <script src="script.js"></script>
    </body>
</html>