index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <!-- skeleton cdn -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css"
        integrity="sha512-EZLkOqwILORob+p0BXZc+Vm3RgJBOe1Iq/0fiI7r/wJgzOFZMlsqTa29UEl6v6U6gsV4uIpsNZoV32YZqrCRCQ=="
        crossorigin="anonymous" />


    <title>Task-list</title>


</head>

<body class="container" style="background-color: bisque; padding: 30px 0">
    <div class="container" style="margin-top: 10px; margin-bottom: 10px; padding-top: 20px; padding-bottom:20px">
        <h4>Task List</h4>
        <form action="" id="task_form">
            <input type="text" id="new_task" placeholder="New Task">
            <input type="submit" value="Add Task" class="button button-primary">
        </form>
        <hr>
        <h4>Tasks</h4>
        <input type="text" id="task_filter" placeholder="Filter Task">
        <ul id="tasks">

        </ul>
        <button id="clear_task_btn" class="btn btn-danger btn-lg btn-block"
            style="border-radius: 10px; background: #ff7f50">Clear
            Task</button>
    </div>


    <script src="/js/script.js"></script>
</body>

</html>