Skip to content

Commit 043ca6b

Browse files
ishir21ishir21
committed
inital commit
0 parents  commit 043ca6b

File tree

4 files changed

+263
-0
lines changed

4 files changed

+263
-0
lines changed

‎.vscode/settings.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"liveServer.settings.port": 5501
3+
}

‎index.html

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Task List 2022</title>
8+
9+
<link rel="stylesheet" href="style.css" />
10+
</head>
11+
<body>
12+
<header>
13+
<h1>Task List 2022</h1>
14+
<form id="new-task-form">
15+
<input type="text" name="new-task-input" id="new-task-input" placeholder="What do you have planned?" />
16+
<input type="submit" id="new-task-submit" value="Add task" />
17+
</form>
18+
</header>
19+
<main>
20+
<section class="task-list">
21+
<h2>Tasks</h2>
22+
23+
<div id="tasks">
24+
<!-- <div class="task">
25+
<div class="content">
26+
<input type="text" class="text" value="A new task" readonly />
27+
</div>
28+
<div class="actions">
29+
<button class="edit">Edit</button>
30+
<button class="delete">Delete</button>
31+
</div>
32+
</div> -->
33+
</div>
34+
</section>
35+
</main>
36+
<script src="scripts.js"></script>
37+
</body>
38+
</html>

‎scripts.js

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
window.addEventListener("load", () => {
2+
const form = document.querySelector("#new-task-form");
3+
4+
const input = document.querySelector("#new-task-input");
5+
6+
const list_el = document.querySelector("#tasks");
7+
8+
form.addEventListener("submit", (e) => {
9+
e.preventDefault();
10+
11+
const task = input.value;
12+
if (!task) {
13+
alert("Task cannot be empty");
14+
return;
15+
}
16+
const task_el = document.createElement("div");
17+
task_el.classList.add("task");
18+
19+
const task_content_el = document.createElement("div");
20+
task_content_el.classList.add("content");
21+
22+
task_el.appendChild(task_content_el);
23+
24+
const task_input_el = document.createElement("input");
25+
task_input_el.classList.add("text");
26+
task_input_el.type = "text";
27+
task_input_el.value = task;
28+
task_input_el.setAttribute("readonly", "ishir");
29+
30+
task_content_el.appendChild(task_input_el);
31+
32+
const task_actions_el = document.createElement("div");
33+
task_actions_el.classList.add("actions");
34+
35+
const task_edit_el = document.createElement("button");
36+
task_edit_el.classList.add("edit");
37+
task_edit_el.innerText = "Edit";
38+
39+
const task_delete_el = document.createElement("button");
40+
task_delete_el.classList.add("delete");
41+
task_delete_el.innerText = "Delete";
42+
43+
task_actions_el.appendChild(task_edit_el);
44+
task_actions_el.appendChild(task_delete_el);
45+
46+
task_el.appendChild(task_actions_el);
47+
48+
list_el.appendChild(task_el);
49+
50+
task_edit_el.addEventListener("click", (e) => {
51+
// e.preventDefault();
52+
if (task_edit_el.innerText.toLowerCase() == "edit") {
53+
task_edit_el.innerText = "Save";
54+
task_input_el.removeAttribute("readonly");
55+
} else {
56+
task_edit_el.innerText = "Edit";
57+
task_input_el.setAttribute("readonly", "ishir");
58+
}
59+
});
60+
61+
task_delete_el.addEventListener("click", (e) => {
62+
e.preventDefault();
63+
list_el.removeChild(task_el);
64+
});
65+
});
66+
});

‎style.css

+156
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
:root {
2+
--dark: #374151;
3+
--darker: #1f2937;
4+
--darkest: #111827;
5+
--grey: #6b7280;
6+
--pink: #ec4899;
7+
--purple: #8b5cf6;
8+
--light: #eee;
9+
}
10+
11+
* {
12+
margin: 0;
13+
font-family: sans-serif;
14+
}
15+
16+
body {
17+
display: flex;
18+
flex-direction: column;
19+
min-height: 100vh;
20+
color: #fff;
21+
background-color: var(--dark);
22+
}
23+
24+
header {
25+
padding: 2rem 1rem;
26+
max-width: 800px;
27+
width: 100%;
28+
margin: 0 auto;
29+
}
30+
31+
header h1 {
32+
font-size: 2.5rem;
33+
font-weight: 300;
34+
color: var(--grey);
35+
margin-bottom: 1rem;
36+
}
37+
38+
#new-task-form {
39+
display: flex;
40+
}
41+
42+
input,
43+
button {
44+
appearance: none;
45+
border: none;
46+
outline: none;
47+
background: none;
48+
}
49+
50+
#new-task-input {
51+
flex: 1 1 0%;
52+
background-color: var(--darker);
53+
padding: 1rem;
54+
border-radius: 1rem;
55+
margin-right: 1rem;
56+
color: var(--light);
57+
font-size: 1.25rem;
58+
}
59+
60+
#new-task-input::placeholder {
61+
color: var(--grey);
62+
}
63+
64+
#new-task-submit {
65+
color: var(--pink);
66+
font-size: 1.25rem;
67+
font-weight: 700;
68+
background-image: linear-gradient(to right, var(--pink), var(--purple));
69+
-webkit-background-clip: text;
70+
-webkit-text-fill-color: transparent;
71+
cursor: pointer;
72+
transition: 0.4s;
73+
}
74+
75+
#new-task-submit:hover {
76+
opacity: 0.8;
77+
}
78+
79+
#new-task-submit:active {
80+
opacity: 0.6;
81+
}
82+
83+
main {
84+
flex: 1 1 0%;
85+
max-width: 800px;
86+
width: 100%;
87+
margin: 0 auto;
88+
}
89+
90+
.task-list {
91+
padding: 1rem;
92+
}
93+
94+
.task-list h2 {
95+
font-size: 1.5rem;
96+
font-weight: 300;
97+
color: var(--grey);
98+
margin-bottom: 1rem;
99+
}
100+
101+
#tasks .task {
102+
display: flex;
103+
justify-content: space-between;
104+
background-color: var(--darkest);
105+
padding: 1rem;
106+
border-radius: 1rem;
107+
margin-bottom: 1rem;
108+
}
109+
110+
.task .content {
111+
flex: 1 1 0%;
112+
}
113+
114+
.task .content .text {
115+
color: var(--light);
116+
font-size: 1.125rem;
117+
width: 100%;
118+
display: block;
119+
transition: 0.4s;
120+
}
121+
122+
.task .content .text:not(:read-only) {
123+
color: var(--pink);
124+
}
125+
126+
.task .actions {
127+
display: flex;
128+
margin: 0 -0.5rem;
129+
}
130+
131+
.task .actions button {
132+
cursor: pointer;
133+
margin: 0 0.5rem;
134+
font-size: 1.125rem;
135+
font-weight: 700;
136+
text-transform: uppercase;
137+
transition: 0.4s;
138+
}
139+
140+
.task .actions button:hover {
141+
opacity: 0.8;
142+
}
143+
144+
.task .actions button:active {
145+
opacity: 0.6;
146+
}
147+
148+
.task .actions .edit {
149+
background-image: linear-gradient(to right, var(--pink), var(--purple));
150+
-webkit-background-clip: text;
151+
-webkit-text-fill-color: transparent;
152+
}
153+
154+
.task .actions .delete {
155+
color: crimson;
156+
}

0 commit comments

Comments
 (0)