Skip to content
This repository was archived by the owner on Dec 18, 2024. It is now read-only.

Commit b1637a6

Browse files
author
Sabella-8
committed
todolistweek4
1 parent 3511f66 commit b1637a6

File tree

3 files changed

+204
-28
lines changed

3 files changed

+204
-28
lines changed

‎week-3/todo-list/index.html

Lines changed: 32 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,40 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Title here</title>
6+
<title>Todo List app</title>
77
<link rel="stylesheet" href="style.css" />
8+
<link
9+
rel="stylesheet"
10+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
11+
integrity="sha384-pzjw8z+ua/cF9eUROoMVW3lvJxWvRWKGVSaEa07p4z3fZO6biHqo5L2fBL5Kb5Z6"
12+
crossorigin="anonymous"
13+
/>
814
</head>
915
<body>
10-
<form>
11-
<div>
12-
<input type="text" placeholder="New todo..." />
13-
</div>
14-
<div>
15-
<button type="submit">Add Todo</button>
16-
<button
17-
type="button"
18-
id="remove-all-completed"
19-
class="btn btn-primary mb-3"
20-
>
21-
Remove all completed
22-
</button>
23-
</div>
24-
</form>
25-
<script src="script.js"></script>
16+
<h1>To Do Lists</h1>
17+
<section>
18+
<ul id="todo-list"></ul>
19+
<form>
20+
<div>
21+
<input type="text" placeholder="New todo..." id="textboxinput" />
22+
</div>
23+
<div>
24+
<button type="submit">Add Todo</button>
25+
<button
26+
type="button"
27+
id="remove-all-completed"
28+
class="btn btn-primary mb-3"
29+
>
30+
Remove all completed
31+
</button>
32+
</div>
33+
</form>
34+
<script src="script.js"></script>
35+
</section>
2636
</body>
2737
</html>
38+
39+
40+
41+
42+

‎week-3/todo-list/script.js

Lines changed: 114 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,128 @@
11
function populateTodoList(todos) {
22
let list = document.getElementById("todo-list");
3-
// Write your code to create todo list elements with completed and delete buttons here, all todos should display inside the "todo-list" element.
4-
}
3+
todos.forEach((element) => {
4+
const listing = document.createElement("li");
5+
const rem = document.createElement("span");
6+
const add = document.createElement("span");
7+
const dateCale = document.createElement("span");
8+
const dateInput = document.createElement("input");
9+
dateInput.type = "date";
10+
dateInput.classList.add("inputing");
11+
dateInput.style.display = "none";
12+
rem.textContent = "🗑";
13+
add.textContent = "✅";
14+
dateCale.textContent = "📅";
15+
listing.appendChild(rem);
16+
listing.appendChild(add);
17+
listing.appendChild(dateCale);
18+
listing.appendChild(dateInput);
19+
const taskText = document.createTextNode(element.task);
20+
listing.appendChild(taskText);
21+
list.appendChild(listing);
22+
let clickCount = 0;
23+
dateCale.addEventListener("click", () => {
24+
if (dateInput.style.display === "none") {
25+
dateInput.style.display = "block";
26+
} else {
27+
dateInput.style.display = "none";
28+
}
29+
});
30+
31+
32+
add.addEventListener("click", () => {
33+
clickCount++;
34+
let isEvenClick = clickCount % 2 === 0;
35+
36+
37+
if (isEvenClick) {
38+
listing.style.textDecoration = "none";
39+
} else {
40+
listing.style.textDecoration = "line-through";
41+
}
42+
});
43+
44+
45+
rem.addEventListener("click", () => {
46+
listing.remove();
47+
});
48+
});
49+
}
550

6-
// These are the same todos that currently display in the HTML
7-
// You will want to remove the ones in the current HTML after you have created them using JavaScript
851
let todos = [
952
{ task: "Wash the dishes", completed: false },
1053
{ task: "Do the shopping", completed: false },
1154
];
1255

56+
1357
populateTodoList(todos);
1458

15-
// This function will take the value of the input field and add it as a new todo to the bottom of the todo list. These new todos will need the completed and delete buttons adding like normal.
1659
function addNewTodo(event) {
17-
// The code below prevents the page from refreshing when we click the 'Add Todo' button.
18-
event.preventDefault();
19-
// Write your code here... and remember to reset the input field to be blank after creating a todo!
20-
}
60+
const inputTodo = document.getElementById("textboxinput");
61+
const buttonTodo = document.querySelector("button");
62+
buttonTodo.addEventListener("click", (event) => {
63+
event.preventDefault();
64+
const newList = document.createElement("li");
65+
let list = document.getElementById("todo-list");
66+
const tex = document.createTextNode(inputTodo.value);
67+
inputTodo.value = "";
68+
const rem = document.createElement("span");
69+
const add = document.createElement("span");
70+
const dateCale = document.createElement("span");
71+
const dateInput = document.createElement("input");
72+
dateInput.type = "date";
73+
dateInput.classList.add("inputing");
74+
dateInput.style.display = "none";
75+
rem.textContent = "🗑";
76+
add.textContent = "✅";
77+
dateCale.textContent = "📅";
78+
newList.appendChild(rem);
79+
newList.appendChild(add);
80+
newList.appendChild(dateCale);
81+
newList.appendChild(dateInput);
82+
newList.append(tex);
83+
list.appendChild(newList);
84+
85+
86+
let clickCount = 0;
2187

22-
// Advanced challenge: Write a fucntion that checks the todos in the todo list and deletes the completed ones (we can check which ones are completed by seeing if they have the line-through styling applied or not).
88+
89+
dateCale.addEventListener("click", () => {
90+
if (dateInput.style.display === "none") {
91+
dateInput.style.display = "block";
92+
} else {
93+
dateInput.style.display = "none";
94+
}
95+
});
96+
add.addEventListener("click", () => {
97+
clickCount++;
98+
let isEvenClick = clickCount % 2 === 0;
99+
100+
101+
if (isEvenClick) {
102+
newList.style.textDecoration = "none";
103+
} else {
104+
newList.style.textDecoration = "line-through";
105+
}
106+
});
107+
108+
109+
rem.addEventListener("click", () => {
110+
newList.remove();
111+
});
112+
});
113+
114+
115+
}
116+
addNewTodo();
23117
function deleteAllCompletedTodos() {
24-
// Write your code here...
118+
const del = document.getElementById("remove-all-completed");
119+
let list = document.getElementById("todo-list");
120+
del.addEventListener("click", () => {
121+
list.textContent = "";
122+
});
123+
25124
}
125+
deleteAllCompletedTodos();
126+
127+
128+

‎week-3/todo-list/style.css

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,59 @@
11

2+
body {
3+
background-color: aquamarine;
4+
5+
6+
font-size: 2rem;
7+
}
8+
#todo-list li {
9+
display: flex;
10+
align-items: center;
11+
}
12+
.inputing {
13+
position: fixed;
14+
left: 600px;
15+
}
16+
17+
18+
section {
19+
background-color: beige;
20+
width: 78%;
21+
margin-right: 10%;
22+
margin-top: 10%;
23+
margin-left: 20%;
24+
}
25+
h1 {
26+
text-align: center;
27+
}
28+
div {
29+
background-color: beige;
30+
}
31+
32+
33+
li {
34+
list-style-type: none;
35+
}
36+
span {
37+
position: relative;
38+
left: 350px;
39+
cursor: pointer;
40+
}
41+
input {
42+
padding: 0.5rem;
43+
margin-left: 20%;
44+
display: block;
45+
}
46+
button {
47+
padding: 0.5rem;
48+
border-radius: 10px;
49+
background-color: aquamarine;
50+
margin-top: 30px;
51+
margin-left: 15%;
52+
margin-bottom: 10%;
53+
}
54+
55+
56+
57+
58+
59+

0 commit comments

Comments
 (0)