Skip to content

Commit 5c42e09

Browse files
solygambassolygambas
committedJan 22, 2021
add todo list
1 parent dc9ac8b commit 5c42e09

File tree

3 files changed

+150
-0
lines changed

3 files changed

+150
-0
lines changed
 

‎49-todo list/index.html

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="stylesheet" href="style.css" />
7+
<title>Todo List</title>
8+
</head>
9+
<body>
10+
<h1>todos</h1>
11+
<form id="form">
12+
<input
13+
type="text"
14+
class="input"
15+
id="input"
16+
placeholder="Enter your todo"
17+
autocomplete="off"
18+
/>
19+
20+
<ul class="todos" id="todos"></ul>
21+
</form>
22+
<small
23+
>Left click to toggle completed.<br />
24+
Right click to delete todo</small
25+
>
26+
27+
<script src="script.js"></script>
28+
</body>
29+
</html>

‎49-todo list/script.js

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
const form = document.getElementById("form");
2+
const input = document.getElementById("input");
3+
const todosList = document.getElementById("todos");
4+
const todos = JSON.parse(localStorage.getItem("todos"));
5+
6+
const updateLocalStorage = () => {
7+
const todosElements = document.querySelectorAll("li");
8+
const todos = [];
9+
todosElements.forEach((todoElement) => {
10+
todos.push({
11+
text: todoElement.innerText,
12+
completed: todoElement.classList.contains("completed"),
13+
});
14+
});
15+
localStorage.setItem("todos", JSON.stringify(todos));
16+
};
17+
18+
const addTodo = (todo) => {
19+
let todoText = input.value;
20+
if (todo) todoText = todo.text;
21+
if (todoText) {
22+
const todoElement = document.createElement("li");
23+
if (todo && todo.completed) {
24+
todoElement.classList.add("completed");
25+
}
26+
todoElement.innerText = todoText;
27+
todoElement.addEventListener("click", () => {
28+
todoElement.classList.toggle("completed");
29+
updateLocalStorage();
30+
});
31+
todoElement.addEventListener("contextmenu", (e) => {
32+
e.preventDefault();
33+
todoElement.remove();
34+
updateLocalStorage();
35+
});
36+
todosList.appendChild(todoElement);
37+
input.value = "";
38+
updateLocalStorage();
39+
}
40+
};
41+
42+
if (todos) {
43+
todos.forEach((todo) => addTodo(todo));
44+
}
45+
46+
form.addEventListener("submit", (e) => {
47+
e.preventDefault();
48+
addTodo();
49+
});

‎49-todo list/style.css

+72
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap");
2+
3+
* {
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
background-color: #f5f5f5;
9+
color: #444;
10+
font-family: "Poppins", sans-serif;
11+
display: flex;
12+
flex-direction: column;
13+
align-items: center;
14+
justify-content: center;
15+
height: 100vh;
16+
margin: 0;
17+
}
18+
19+
h1 {
20+
color: rgb(179, 131, 226);
21+
font-size: 10rem;
22+
text-align: center;
23+
opacity: 0.4;
24+
}
25+
26+
form {
27+
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
28+
max-width: 100%;
29+
width: 400px;
30+
}
31+
32+
.input {
33+
border: none;
34+
color: #444;
35+
font-size: 2rem;
36+
padding: 1rem 2rem;
37+
display: block;
38+
width: 100%;
39+
}
40+
41+
.input::placeholder {
42+
color: #d5d5d5;
43+
}
44+
45+
.input:focus {
46+
outline-color: rgb(179, 131, 226);
47+
}
48+
49+
.todos {
50+
background-color: #fff;
51+
padding: 0;
52+
margin: 0;
53+
list-style-type: none;
54+
}
55+
56+
.todos li {
57+
border-top: 1px solid #e5e5e5;
58+
cursor: pointer;
59+
font-size: 1.5rem;
60+
padding: 1rem 2rem;
61+
}
62+
63+
.todos li.completed {
64+
color: #b6b6b6;
65+
text-decoration: line-through;
66+
}
67+
68+
small {
69+
color: #b5b5b5;
70+
margin-top: 3rem;
71+
text-align: center;
72+
}

0 commit comments

Comments
 (0)