millro04.github.io/todolist.html at master · millro04/millro04.github.io · 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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<html>
<head>
    <style>

        body {background-color: rgb(232,232,232);
        }
        .line {text-decoration: line-through;
        }

        li {list-style-type: none;
        }


        .Low {color: black;
        }

        .Medium {color:lightblue;
        }

        .High {color: green;
        }


        section {position:absolute;
                 right:475px;
                 top: 120px;
        }


    </style>
</head>

<body>
    <label for="item">Item</label>
    <input type="text" id="item">

    <select id="priority">
        <option>Low</option>
        <option>Medium</option>
        <option>High</option>
    </select>

    <button onclick="add()">Add It</button>
    <button onclick="clearlist()">Clear List</button>


    <h1>To-Do List</h1>
    <ul id="list"></ul>


    <section>
        <p>Black Font = Low Priority</p>
        <p>Blue Font = Medium Priority</p>
        <p>Green Font = High Priority</p>
    </section>


<script>
    add = function(){
        item = document.getElementById("item");
        thevalue = document.createTextNode(item.value);
        list = document.getElementById("list");
        listitem = document.createElement("li");


        box = document.createElement("input");
        box.type = "checkbox";
        box.onclick = checkmark;

        listitem.appendChild(box);
        listitem.appendChild(thevalue);
        list.appendChild(listitem);

        prioritylevel = document.querySelector("#priority");
        index = prioritylevel.selectedIndex;
        theindex = prioritylevel.options[index];
        indexvalue = theindex.value;
        listitem.classList.add(indexvalue);


         }

    checkmark = function() {
        if (this.checked)
            this.parentNode.classList.add("line");
        else
            this.parentNode.classList.remove("line");

            }


    clearlist = function() {
       list = document.getElementById("list");
       list.innerHTML="";

    }


</script>

    </body>


</html>