alpinejs-lite/index.html at master · basu-dev/alpinejs-lite · 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
<!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">
    <meta name="description" content="Todo application built with alpinejs clone.">
    <meta name="keywords" content="Basu Dev Adhikari, alpine, alpinejs clone, alpinejs lite, todo">
    <meta name="author" content="Basu Dev Adhikari">
    <title>Alpinejs Lite Todo Application</title>
    <link rel="stylesheet" href="./src/assets/style.css">
</head>

<body x-data>
    <nav>
        <h1>Todo Manager</h1>
        <a target="_blank" href="https://github.com/basu-dev/alpinejs-lite">
            <img src="./src/assets/github.png" height="50">
        </a>
    </nav>

    <main>
        <section class="image-section" x-data='imageComponent'>
            <button x-on:click="changeImage()">View Another Image</button>
            <template x-if="loadingImage">
                <small> Loading...</small>
            </template>

            <img x-ref="image" id="change-img" x-bind:src="src">
        </section>

        <section class="todo-section" x-data='todoComponent'>

            <input type="text" x-bind:value="name" placeholder="Todo Title" x-on:input="name=$event.target.value">
            <button x-cloak x-bind:disabled="name.length==0" x-on:click="addTodo()">Add
                Todo</button>

            <section class="todo-grid">
                <aside>
                    <h3 class="grid-title">Incomplete Todos
                        <span x-bind:class="incompleteTodos.length>4?'red':''" x-show="incompleteTodos.length>0"
                            x-text="`(`+incompleteTodos.length+`)`"></span>
                    </h3>
                    <ol>
                        <template x-for="(todo,index) in incompleteTodos">
                            <li>
                                <div>
                                    <span x-text="index+1+') '"></span>
                                    <span x-text="todo"></span>
                                </div>
                                <input title="Mark As Complete" type='checkbox'
                                    x-on:change="markDone(incompleteTodos.indexOf(todo))">
                            </li>
                        </template>
                    </ol>
                </aside>

                <aside>
                    <h3 class="grid-title">Completed Todos
                        <span x-bind:class="completedTodos.length>4?'red':''" x-show="completedTodos.length>0"
                            x-text="`(`+completedTodos.length+`)`"></span>
                        </span>
                    </h3>
                    <ol>
                        <!-- This below template is  over completed to test nested for loop and if statements-->
                        <template x-for="(todo,index) in completedTodos">
                            <li>
                                <div>
                                    <span x-text="index+1+') '"></span>
                                    <span x-text="todo"></span>
                                </div>
                                <input title="Remove" type='checkbox'
                                    x-on:change="removeTodo(completedTodos.indexOf(todo))">
                            </li>
                        </template>
                    </ol>
                </aside>
            </section>
        </section>
    </main>

    <div class="info" x-data='{link:" https://github.com/basu-dev/alpinejs-lite",target:"_blank"}'>
        This todo application is built with my <a x-bind:target="target" x-bind:href="link">alpinejs lite</a> library
    </div>


    <script defer type="module" src="./src/index.js"></script>
    <script defer type="module" src="./lib/index.js"></script>
</body>

</html>