taskWebApp/index.html at main · VidalGB/taskWebApp · 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>
<html lang = "en" data-theme = "dark">

    <!-- Head -->
    <head>

        <!-- Meta section -->
        <meta charset = "UTF-8" />
        <meta name = "viewport" content = "width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <meta name = "keywords" content = "Task, To-Do, Productivity, Organization" />
        <meta name = "robots" content = "index, follow" />
        <meta name = "author" content = "VidalGB" />
        <meta name = "description" content = "This is To-Do application in the browser, easy and fast." />
        <meta name = "copyright" content = "Copyright by VidalGB" />

        <title>To-Do | Tasks App</title>

        <!-- Pico css -->
        <link rel = "stylesheet" href = "https://unpkg.com/@picocss/pico@latest/css/pico.min.css"/>

        <!-- Font awesome icons -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer" onerror="errorIcon()"/>

        <!-- Custom css -->
        <link rel = "stylesheet" href = "./style.css"/>

        <!-- Google AdSense -->
        <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9541417223565779" crossorigin="anonymous"></script>
    </head>

    <!-- Body -->
    <body>

        <!-- Navigation section -->
        <nav id = "navigation">
            <ul>
                <li>
                    <a class = "contrast" href="#conteiner"><strong>Tasks App</strong></a>
                </li>
                <li>
                    <a id="newTask" class = "contrast"><i class="fa-solid fa-plus"></i></a>
                </li>
            </ul>
                <a class = "contrast" id = "btnOpenSideBar"><i class="fa-solid fa-bars"></i></a>
        </nav>

        <!-- Side bar -->
        <div id="sideBar">

            <!-- Theme element -->
            <li id = 'theme'>
                <p>Theme Dark</p>
                <label class="switch">
                    <input type="checkbox" id = 'switchTheme' checked>
                    <div class="slider round"></div>
                </label>
            </li>

            <!-- Open modal button -->
            <li>
                <a class = "contrast" id = "btnOpenModal"><i class="fa-solid fa-trash" ></i> Delete all tasks</a>
            </li>

            <!-- Task Indicator -->
            <li id="taskIndicator">
                <div class = "contrast">
                    <p id="createdTask">0/150 Tasks</p>
                </div>
            </li>
        </div>

        <!-- Main section -->
        <div id = "conteiner">

            <!-- Form section -->
            <section id = "form">
                <article>
                    <form id = "formTasks" onsubmit="event.preventDefault();">

                        <!-- Input task title -->
                        <input type = "text" id = "title" placeholder = "Add a To-Do" autofocus autocomplete="off" onkeypress="nextFocus('title', 'description')"/>

                        <!-- Input task description -->
                        <input type = "text" id = "description" placeholder = "Add a Description..." autocomplete = "off" onkeypress="nextFocus('description', '')"/>
                    </form>

                    <!-- Buttons task section -->
                    <section>
                        <button class = "secondary" id = "cancelTask">Cancel</button>
                        <button id = "btnSaveTask" disabled="true">Save <i class="fa-solid fa-floppy-disk"></i></button>
                    </section>
                </article>
            </section>

            <div class = "secondarys" id="taskCreated">
                <p class = "secondary" id="createdTask2">0/150 Tasks</p>
            </div>

            <!-- Tasks section -->
            <section id = "tasks"></section>
        </div>

        <!-- Modal section -->
        <!-- Clear tasks modal -->
        <dialog id = "modalClearTasks">
            <article class = "conteinerModal">
                <h2>Delate all Tasks</h2>
                <button id = "btnCancelModal">Cancel</button>
                <button id = "btnOkeyModal" class = "secondary">Ok</button>
            </article>
        </dialog>

        <!-- Modal on full localStorage -->
        <dialog id = "modalFullLocalStorage">
            <article class = "conteinerModal">
                <h2>Full Storage</h2>
                <button id = "btnOkFullStorageModal">Ok</button>
            </article>
        </dialog>

        <!-- LocalStorge error modal -->
        <dialog id = "modalErrorLocalStorage" data-keyboard="false">
            <article class = "conteinerModal">
                <h1>Sorry, this page is not compatible with your browser &#1F615</h1>
            </article>
        </dialog>

    <!-- Scripts -->
    <script src = "./app.js"></script>
    </body>
</html>