index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!---------------- Scout Icons ---------------->
    <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.8/css/line.css">
    <!---------------- CSS ---------------->
    <link rel="stylesheet" href="style.css">
    <!------------------------------------->
    <title>ToDO App </title>
</head>
<body>
    <div class="wrapper">
        <div class="task-input">
            <i class="uil uil-bars"></i>
            <input type="text" placeholder="Add a New Task">
        </div>

        <div class="controls">
            <div class="filters">
                <span id="all" class="active">
                    All
                </span>
                <span id="pending">Pending</span>
                <span id="completed">Completed</span>
            </div>

            <button class="clear-btn">Clear All</button>
        </div>

        <ul class="task-box"></ul>

    </div>
    <!------------- Js ------------->
    <script src="script.js"></script>
</body>
</html>