Todo-lLst-Using-Javaqscript/index.html at main · R0LEX7/Todo-lLst-Using-Javaqscript · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!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>Document</title>
    <link rel="stylesheet" href="app.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,700;0,900;1,400&display=swap" rel="stylesheet">
</head>
<body>
    <main class="app">

        <!-- Greeting -->
        <section class="greeting">
            <h2 class="title">
                What`s up , <input type="text" id="name" placeholder="Name here"/>
            </h2>
        </section>
        <!-- End of Greeting -->

        <!-- New Todo -->
        <section class="create-todo">
            <h3>CREATE A TODO</h3>
            <form id="new-todo-form">
                <h4>What`s on your todo?</h4>
                <input type="text" name = "content" placeholder="e.g. Get some milk" id="content"/>
                <!-- <h4>Pick a category</h4>
                <div class="options">
                    <label>
                        <input type="radio" name="category" id = "category1" value = "business"/>
                        <span class="bubble business"></span>
                        <div>Business</div>
                    </label>
                    <label>
                        <input type="radio" name="category" id = "category2" value = "business"/>
                        <span class="bubble personal"></span>
                        <div>Personal</div>
                    </label>

                </div> -->
                <input type="submit" value = "Add todo"/>
                <input type="button" onclick="removeAll()" class=" btn" value = "Remove All"/>

            </form>
        </section>
        <!-- End of todo -->

        <!-- Todo List -->
        <section class="todo-list">


               <h3  id ="my">TODO LIST</h3>

            <div class="list" id="todo-list">
                <div class="todo-item">
                    <label>
                        <input type="checkbox"/>
                        <span class="business bubble "></span>

                    </label>
                    <div class="todo-content">
                        <input type="text" value ="Make a video" readonly>
                    </div>

                    <div class="actions">
                        <button class="edit">Edit</button>
                        <button class="delete">Delete</button>
                    </div>
                </div>
                <div class="todo-item">
                    <label>
                        <input type="checkbox"/>
                        <span class="bubble personal"></span>

                    </label>
                    <div class="todo-content">
                        <input type="text" value ="get milk" readonly>
                    </div>

                    <div class="actions">
                        <button class="edit">Edit</button>
                        <button class="delete">Delete</button>
                    </div>
                </div>
            </div>
        </section>
    </main>

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