index.htm

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TODO Project</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div id="head">
        <h1>TO-DO List</h1>
        <p>By divyesh vyas</p>
    </div>
    <section id="container">
        <div id="todo">
            <div id="nav">
                <input type="date" id="datepick">

                <label for="colorpicker"> Pick Color</label>
                <input type="color" id="colorpicker" value="#000000">
            </div>

            <div id="input">
                <input type="text" placeholder="  To do...">
                <button id="btn">ADD</button>
            </div>

            <div id="title">
                <h2>Task List</h2>
            </div>
            <div id="clrAll">
                <p> You have 0 Task To Do... </p>
                <button id="clear">Clear All</button>
            </div>
            <div id="list">
                <!-- <div class="lists">
                    <span>Task To be done...</span>
                    <div>
                        <button class="done">Done</button>
                        <button class="delbtn">X</button>
                    </div>
                </div> -->
            </div>
        </div>
    </section>
    <script src="todo.js"></script>

</body>

</html>