-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
136 lines (131 loc) · 4.91 KB
/
index.html
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
132
133
134
135
136
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TODO Tasks</title>
<!-- Metadata -->
<meta
name="description"
content="TODO Tasks - is a JavaScript based web-app in which you can keep your todo-jobs in an organized way. Your tasks-list will be saved in your device locally even after you close the tab. 'Edit-Delete-Prioritize' features are available with dark and light mode activated according to your preference."
/>
<meta name="robots" content="index, follow" />
<meta property="og:title" content="TODO Tasks App by Shah Samin Yasar" />
<meta
property="og:description"
content="TODO Tasks - is a JavaScript based web-app in which you can keep your todo-jobs in an organized way. Your tasks-list will be saved in your device locally even after you close the tab. 'Edit-Delete-Prioritize' features are available with dark and light mode activated according to your preference."
/>
<meta
name="keywords"
content="todo, todo-tasks, todo-list, javascript app, todo tasks web app, todo tasks app"
/>
<meta
property="og:image"
itemprop="image"
content="https://shahsaminyasar.github.io/todo-tasks/og_image.png"
/>
<meta property="og:type" content="website" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="250" />
<meta property="og:image:height" content="138" />
<meta
property="og:url"
content="https://shahsaminyasar.github.io/todo-tasks/"
/>
<!-- Favicon -->
<link rel="shortcut icon" href="favicon.png" type="image/x-icon" />
<!-- Google Fonts Icons -->
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0"
/>
<!-- Stylesheets -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Header -->
<header id="header">
<div class="container">
<h1>TODO Tasks</h1>
</div>
<!-- Dark - Light Mode Toggler -->
<button id="theme_toggler">
<span class="material-symbols-outlined"> settings_night_sight </span>
</button>
</header>
<!-- Main -->
<main id="main">
<div class="container">
<!-- TODO Input Form -->
<form id="todo_input_form">
<input id="todo_input" type="text" placeholder="Type a TODO" />
<button onclick="addTodo(event)">
<span class="material-symbols-outlined">add</span>
</button>
</form>
<!-- TODO Tasks Container -->
<div id="todo_tasks_container">
<!-- <div class="todo_task">
<div class="move_buttons">
<button>
<span class="material-symbols-outlined"> arrow_drop_up </span>
</button>
<button>
<span class="material-symbols-outlined"> arrow_drop_down </span>
</button>
</div>
<div class="todo_text">Sample TODO Task</div>
<button class="edit_button">
<span class="material-symbols-outlined"> edit </span>
</button>
<button class="delete_button">
<span class="material-symbols-outlined"> delete </span>
</button>
</div> -->
</div>
<!-- Modals -->
<div id="modals_container">
<!-- Edit Modal -->
<div id="edit_modal" class="modal">
<h3>Edit task</h3>
<form id="edit_input_form">
<input type="text" id="edit_input" placeholder="Edit TODO" />
<div class="buttons_group">
<button onclick="updateTask(event)">Update</button>
<button onclick="cancelOperation(event)">Cancel</button>
</div>
</form>
</div>
<!-- Delete Modal -->
<div id="delete_modal" class="modal">
<h3>
Are you sure to delete the task? This action CANNOT be UNDONE!
</h3>
<div class="buttons_group">
<button
onclick="deleteTask()"
style="background-color: rgb(255, 68, 35)"
>
YES
</button>
<button onclick="cancelOperation(event)">NO</button>
</div>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer id="footer">
<div class="container">
<p>
Copyright 2023 ©
<a href="https://shahsaminyasar.github.io/portfolio" target="_blank"
>SHAH SAMIN YASAR</a
>
</p>
</div>
</footer>
<!-- Scripts -->
<script src="script.js"></script>
</body>
</html>