Skip to content

Commit 493c4c9

Browse files
AlkaisonAlkaison
committed
Feat: Structure for ToDo
1 parent 10078f6 commit 493c4c9

File tree

1 file changed

+82
-1
lines changed

1 file changed

+82
-1
lines changed

‎index.html‎

Lines changed: 82 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,89 @@
99
<link rel="stylesheet" href="./style.css">
1010
</head>
1111
<body>
12+
13+
<div class="container">
14+
<h1 id="todoTitle">ToDo App</h1>
1215

13-
<h1>ToDo App</h1>
16+
<div class="enterTask">
17+
<input type="text" placeholder="Add your new todo" id="taskInput">
18+
<!-- PLus ICON -->
19+
<svg xmlns="http://www.w3.org/2000/svg" id="addSvg" height="1em" viewBox="0 0 448 512">
20+
<path
21+
d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z" />
22+
</svg>
23+
</div>
24+
25+
<div class="task-container">
26+
<div class="task">
27+
<!-- Pending Task -->
28+
<svg xmlns="http://www.w3.org/2000/svg" class="pendingSvg" height="1em" viewBox="0 0 512 512">
29+
<path d="M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256z" />
30+
</svg>
31+
32+
<span class="taskText">Follow @Alkaison on Twitter</span>
33+
34+
<!-- Edit ICON -->
35+
<svg xmlns="http://www.w3.org/2000/svg" class="editSvg" height="1em" viewBox="0 0 512 512">
36+
<path
37+
d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z" />
38+
</svg>
39+
40+
<!-- Delete ICON -->
41+
<svg xmlns="http://www.w3.org/2000/svg" class="deleteSvg" height="1em" viewBox="0 0 448 512">
42+
<path
43+
d="M135.2 17.7L128 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H320l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7zM416 128H32L53.2 467c1.6 25.3 22.6 45 47.9 45H346.9c25.3 0 46.3-19.7 47.9-45L416 128z" />
44+
</svg>
45+
</div>
46+
47+
<div class="task">
48+
<!-- Pending Task -->
49+
<svg xmlns="http://www.w3.org/2000/svg" class="pendingSvg" height="1em" viewBox="0 0 512 512">
50+
<path d="M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256z" />
51+
</svg>
52+
53+
<span class="taskText">Complete the first task</span>
54+
55+
<!-- Edit ICON -->
56+
<svg xmlns="http://www.w3.org/2000/svg" class="editSvg" height="1em" viewBox="0 0 512 512">
57+
<path
58+
d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z" />
59+
</svg>
60+
61+
<!-- Delete ICON -->
62+
<svg xmlns="http://www.w3.org/2000/svg" class="deleteSvg" height="1em" viewBox="0 0 448 512">
63+
<path
64+
d="M135.2 17.7L128 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H320l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7zM416 128H32L53.2 467c1.6 25.3 22.6 45 47.9 45H346.9c25.3 0 46.3-19.7 47.9-45L416 128z" />
65+
</svg>
66+
</div>
67+
68+
<div class="task">
69+
<!-- Pending Task -->
70+
<svg xmlns="http://www.w3.org/2000/svg" class="pendingSvg" height="1em" viewBox="0 0 512 512">
71+
<path d="M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256z" />
72+
</svg>
73+
74+
<span class="taskText">Thank you for visiting here</span>
75+
76+
<!-- Edit ICON -->
77+
<svg xmlns="http://www.w3.org/2000/svg" class="editSvg" height="1em" viewBox="0 0 512 512">
78+
<path
79+
d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z" />
80+
</svg>
81+
82+
<!-- Delete ICON -->
83+
<svg xmlns="http://www.w3.org/2000/svg" class="deleteSvg" height="1em" viewBox="0 0 448 512">
84+
<path
85+
d="M135.2 17.7L128 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H320l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7zM416 128H32L53.2 467c1.6 25.3 22.6 45 47.9 45H346.9c25.3 0 46.3-19.7 47.9-45L416 128z" />
86+
</svg>
87+
</div>
88+
</div>
89+
90+
<div class="clearAllTask">
91+
<span id="clearAllTaskText">You have 3 pending tasks</span>
92+
<button type="button" id="clearAllTaskBtn">Clear All</button>
93+
</div>
94+
</div>
1495

1596
<!-- Javascript -->
1697
<script src="./script.js" defer></script>

0 commit comments

Comments
 (0)