todolist/to do.html at master · Learnlearningplatform/todolist · 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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>

<head>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

    <!-- for icons font awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

    <!-- Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


    <meta name="viewport" content="width=device-width, initial-scale=1">


    <title>TO DO LIST APP </title>


</head>

<body>

    <div class="container-fluid" id="main">
        <br><br><br><br><br>
        <div class="container bg-black text-center" id="header">
            <br><br>
            <span style="font-size: 40px;color: whitesmoke;font-family: 'Times New Roman', Times, serif"> TO DO LIST
                APP</span>
            <br><br>

            <div class="row">
                <div class='col-md-4'></div>
                <div class='col-md-4'>
                    <div class="input-group">
                        <input type="text" class="form-control" id="myinput" placeholder="ENTER YOUR ITEM NAME">
                        <div class="input-group-append">
                            <button class=" btn btn-danger">ADD</button>
                        </div>
                    </div>
                </div>
            </div>

            <br><br><br>
        </div>
        <br>
        <div class="container ">
            <ul id="myul" class="list-group">
                <li class="list-group-item list">My books <span class="close">X</span></li>
                <li class="list-group-item list">Class timmings<span class="close">X</span></li>
                <li class="list-group-item list">Hobbies<span class="close">X</span></li>

            </ul>
        </div>
        <br><br><br><br><br>
    </div>
</body>

<script>
    //to add new element
    $("button").click(function () {
        var val = $("#myinput").val();
        if (val == "") { alert("YOU MUST ENTER SOMETHING"); }
        else {
            $("#myul").append(`<li class="list-group-item list">${val}<span class="close">X</span></li> `);
        }

        $(".close").click(function () {
            $(this).parent().hide();
        });

        var li = $("li");
        for (i = 0; i <= li.length; i++) {
            $("li:even").addClass("bg-black");
            $("span:odd").addClass("close-white");

        }
       $("#myinput").val("");
    });


    $(".close").click(function () {
        $(this).parent().hide();
    });

    var li = $("li");
    for (i = 0; i <= li.length; i++) {
        $("li:even").addClass("bg-black");
        $("span:odd").addClass("close-white");


    }


</script>


<style>
    #main {
        background-image: linear-gradient(rgba(26, 25, 25, 0.74), rgba(14, 13, 13, 0.637));
        background-position: absolute;
        background-size: cover;
        height: 800px;
    }

    .bg-black {
        background-color: rgba(10, 10, 10, 0.582);
        color: whitesmoke;
    }

    .list {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    }

    .close {
        font-family: cursive !important;
        color: black !important;
    }

    .close-white {
        font-family: cursive !important;
        color: whitesmoke !important;
    }
</style>