Skip to content

Commit 7fbc10b

Browse files
AbubakarWebDevAbubakarWebDev
committed
Initial commit for the project setup
0 parents  commit 7fbc10b

File tree

9 files changed

+1195
-0
lines changed

9 files changed

+1195
-0
lines changed

‎.gitignore

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎index.html

Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>Indexed DB Todo Application</title>
5+
6+
<meta charset="UTF-8" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
9+
<link rel="stylesheet" href="./style.css" />
10+
11+
<!-- Include the Tailwind JS file -->
12+
<script src="https://cdn.tailwindcss.com"></script>
13+
</head>
14+
<body>
15+
<div class="p-10">
16+
<h1 class="text-center font-bold text-3xl pb-10">
17+
Indexed DB Todo Application
18+
</h1>
19+
20+
<div class="overflow-x-auto">
21+
<table class="min-w-full text-left text-sm font-light">
22+
<thead class="border-b font-medium dark:border-neutral-500">
23+
<tr>
24+
<th scope="col" class="px-6 py-4">#</th>
25+
<th scope="col" class="px-6 py-4">Name</th>
26+
<th scope="col" class="px-6 py-4">Image</th>
27+
<th scope="col" class="px-6 py-4">update</th>
28+
<th scope="col" class="px-6 py-4">Edit</th>
29+
</tr>
30+
</thead>
31+
32+
<tbody>
33+
<tr class="border-b dark:border-neutral-500">
34+
<td class="whitespace-nowrap px-6 py-4 font-medium">1</td>
35+
36+
<td class="whitespace-nowrap px-6 py-4">Todo 1</td>
37+
38+
<td class="whitespace-nowrap px-6 py-4">
39+
<img src="image-path" alt="Todo Attachment" />
40+
</td>
41+
42+
<td class="whitespace-nowrap px-6 py-4">
43+
<button
44+
type="button"
45+
id="update-btn"
46+
class="bg-blue-600 text-neutral-50 px-4 py-2 rounded-lg"
47+
>
48+
Update
49+
</button>
50+
</td>
51+
52+
<td class="whitespace-nowrap px-6 py-4">
53+
<button
54+
type="button"
55+
id="delete-btn"
56+
class="bg-red-600 text-neutral-50 px-4 py-2 rounded-lg"
57+
>
58+
Delete
59+
</button>
60+
</td>
61+
</tr>
62+
</tbody>
63+
</table>
64+
</div>
65+
66+
<div class="mx-auto w-full max-w-[550px] py-10">
67+
<input id="todo-id" type="hidden" />
68+
<div class="mb-5">
69+
<label
70+
for="todo-name"
71+
class="mb-3 block text-base font-medium text-[#07074D]"
72+
>
73+
Todo Name
74+
</label>
75+
<input
76+
type="text"
77+
id="todo-name"
78+
name="todo-name"
79+
placeholder="Todo Name"
80+
class="w-full rounded-md border border-[#e0e0e0] bg-white p-3 text-base font-medium text-[#6B7280] outline-none focus:border-[#6A64F1] focus:shadow-md"
81+
/>
82+
</div>
83+
84+
<div class="mb-5">
85+
<label
86+
for="todo-image"
87+
class="mb-3 block text-base font-medium text-[#07074D]"
88+
>
89+
Todo Image
90+
</label>
91+
<input
92+
type="file"
93+
id="todo-image"
94+
name="todo-image"
95+
class="w-full rounded-md border border-[#e0e0e0] bg-white p-3 text-base font-medium text-[#6B7280] outline-none focus:border-[#6A64F1] focus:shadow-md"
96+
/>
97+
</div>
98+
99+
<button
100+
id="submit-btn"
101+
class="hover:shadow-form rounded-md bg-[#6A64F1] py-3 px-8 text-base font-semibold text-white outline-none"
102+
>
103+
Submit
104+
</button>
105+
</div>
106+
</div>
107+
108+
<div
109+
class="main-modal fixed w-full h-100 inset-0 z-50 overflow-hidden flex justify-center items-center animated fadeIn faster"
110+
style="background: rgba(0, 0, 0, 0.7); display: none"
111+
>
112+
<div
113+
class="border border-teal-500 shadow-lg modal-container bg-white w-11/12 md:max-w-md mx-auto rounded shadow-lg z-50 overflow-y-auto"
114+
>
115+
<div class="modal-content py-4 text-left px-6">
116+
<!--Title-->
117+
<div class="flex justify-between items-center pb-3">
118+
<p class="text-2xl font-bold">Header</p>
119+
120+
<div class="modal-close cursor-pointer z-50">
121+
<svg
122+
width="18"
123+
height="18"
124+
viewBox="0 0 18 18"
125+
class="fill-current text-black"
126+
>
127+
<path
128+
d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"
129+
></path>
130+
</svg>
131+
</div>
132+
</div>
133+
134+
<!--Body-->
135+
<div class="my-5">
136+
<p>
137+
Inliberali Persius Multi iustitia pronuntiaret expeteretur sanos
138+
didicisset laus angusti ferrentur arbitrium arbitramur huic
139+
desiderent.?
140+
</p>
141+
</div>
142+
143+
<!--Footer-->
144+
<div class="flex justify-end pt-2">
145+
<button
146+
class="focus:outline-none modal-close px-4 bg-gray-400 p-3 rounded-lg text-black hover:bg-gray-300"
147+
>
148+
Cancel
149+
</button>
150+
<button
151+
class="focus:outline-none px-4 bg-teal-500 p-3 ml-3 rounded-lg text-white hover:bg-teal-400"
152+
>
153+
Confirm
154+
</button>
155+
</div>
156+
</div>
157+
</div>
158+
</div>
159+
160+
<script type="module" src="./src/main.ts"></script>
161+
</body>
162+
</html>

0 commit comments

Comments
 (0)