SchoolWork/test.html at main · kelseafunwi/SchoolWork · 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
<!doctype html>
<html>
    <head>
        <title>Course example</title>
        <style>
            body {
                background-color: #85cff7;
                font-family: 'Helvetica', 'Arial', sans-serif;
            }
            #list_section {
                text-align: center;
            }
            h1 {
                color: white;
                margin: 0px auto;
                padding: 20px;}
            ul {
                padding: 0;
            }
            li {
                background-color: #fff;
                color: #000;
                font-size: 20px;
                list-style-type: none;
                width: 20%;
                margin: 0px auto;
                border-radius: 3px;
                border: 1px solid #000;
                padding: 10px;
                margin-bottom: 10px;
            }
            p {
                background-color: #fff;
                color: #666;
                padding: 10px;
                display: inline-block;
                margin: 20px auto 20px auto;
                width: 80%;
                border-radius: 5px;
                text-align: center;}
            .item {
                background-color: #fff;
                color: #000;
            }
            input[type='text'] {
                font-size: 12px;
                padding: 6px;
                border: 1px solid #000;
                border-radius: 3px;
            }
            input[type='submit'] {
                background-color: #fff;
                color: #000;
                border-radius: 8px;
                border: none;
                padding: 5px;
            }
            #newItemButton {
                display: none;
            }
            #itemField {
                margin-top: 60px;
                width: 10%;
            }
        </style>
    </head>
    <body>
        <div id="list_section">
            <h1 id="header">To-do list</h1>
            <ul>
                <li class="item">Buy movie tickets</li>
            </ul>
            <form id="newItemForm">
                <input type="text" id="itemField" placeholder="Item" />
                <input type="submit" id="add" value="add" />
            </form>
        </div>
        <script src="./jquery.min.js"></script>
        <script>
            $(function() {
                var $list, $newItemForm;
                $list = $('ul');
                $newItemForm = $('#newItemForm');
                $newItemForm.on('submit', function(e) {
                    e.preventDefault();
                    var text = $('input:text').val();
                    $list.append('<li>' + text + '</li>');
                    $('input:text').val('');
                });
                $list.on('click', 'li', function() {
                    var $this = $(this);
                    $this.remove();
                });
            });
        </script>
    </body>
</html>