Skip to content

Commit 5b4dfc1

Browse files
author
devbyali
committed
local storage
1 parent edbccfb commit 5b4dfc1

File tree

4 files changed

+109
-4
lines changed

4 files changed

+109
-4
lines changed

‎app.js

+58-3
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ const todoList = document.querySelector(".todo-list");
55
const filterOption = document.querySelector(".filter-todo");
66

77
//Event Listeners
8-
//document.addEventListener("DOMContentLoaded", getTodos);
8+
document.addEventListener("DOMContentLoaded", getTodos);
99
todoButton.addEventListener("click", addTodo);
1010
todoList.addEventListener("click", deleteTodo);
1111
filterOption.addEventListener("click", filterTodo);
@@ -23,8 +23,8 @@ function addTodo(e) {
2323
newTodo.innerText = todoInput.value;
2424
//Save to local - do this last
2525
//Save to local
26-
//saveLocalTodos(todoInput.value);
27-
//
26+
saveLocalTodos(todoInput.value);
27+
2828
newTodo.classList.add("todo-item");
2929
todoDiv.appendChild(newTodo);
3030
todoInput.value = "";
@@ -49,6 +49,7 @@ function deleteTodo(e) {
4949
const todo = item.parentElement;
5050
//Animation
5151
todo.classList.add("fall");
52+
removeLocalTodos(todo);
5253
todo.addEventListener("transitionend", function () {
5354
todo.remove();
5455
});
@@ -84,3 +85,57 @@ function filterTodo(e) {
8485
}
8586
});
8687
}
88+
89+
function saveLocalTodos(todo) {
90+
//Check---Hye do i already have thing in there?
91+
let todos;
92+
if (localStorage.getItem("todos") === null) {
93+
todos = [];
94+
} else {
95+
todos = JSON.parse(localStorage.getItem("todos"));
96+
}
97+
todos.push(todo);
98+
localStorage.setItem("todos", JSON.stringify(todos));
99+
}
100+
101+
function getTodos() {
102+
let todos;
103+
if (localStorage.getItem("todos") === null) {
104+
todos = [];
105+
} else {
106+
todos = JSON.parse(localStorage.getItem("todos"));
107+
}
108+
todos.forEach(function (todo) {
109+
const todoDiv = document.createElement("div");
110+
todoDiv.classList.add("todo");
111+
//Create list
112+
const newTodo = document.createElement("li");
113+
newTodo.innerText = todo;
114+
newTodo.classList.add("todo-item");
115+
todoDiv.appendChild(newTodo);
116+
//Create Completed Button
117+
const completedButton = document.createElement("button");
118+
completedButton.innerHTML = `<i class="fas fa-check"></i>`;
119+
completedButton.classList.add("complete-btn");
120+
todoDiv.appendChild(completedButton);
121+
//Create trash button
122+
const trashButton = document.createElement("button");
123+
trashButton.innerHTML = `<i class="fas fa-trash"></i>`;
124+
trashButton.classList.add("trash-btn");
125+
todoDiv.appendChild(trashButton);
126+
//attach final Todo
127+
todoList.appendChild(todoDiv);
128+
});
129+
}
130+
131+
function removeLocalTodos(todo) {
132+
let todos;
133+
if (localStorage.getItem("todos") === null) {
134+
todos = [];
135+
} else {
136+
todos = JSON.parse(localStorage.getItem("todos"));
137+
}
138+
const todoIndex = todo.children[0].innerText;
139+
todos.splice(todos.indexOf(todoIndex), 1);
140+
localStorage.setItem("todos", JSON.stringify(todos));
141+
}

‎fonts/all.min.css

+5
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎fonts/css2.css

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
/* latin-ext */
2+
@font-face {
3+
font-family: 'Lato';
4+
font-style: normal;
5+
font-weight: 400;
6+
font-display: swap;
7+
src: url(https://fonts.gstatic.com/s/lato/v20/S6uyw4BMUTPHjxAwXjeu.woff2) format('woff2');
8+
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
9+
}
10+
/* latin */
11+
@font-face {
12+
font-family: 'Lato';
13+
font-style: normal;
14+
font-weight: 400;
15+
font-display: swap;
16+
src: url(https://fonts.gstatic.com/s/lato/v20/S6uyw4BMUTPHjx4wXg.woff2) format('woff2');
17+
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
18+
}
19+
/* devanagari */
20+
@font-face {
21+
font-family: 'Poppins';
22+
font-style: normal;
23+
font-weight: 400;
24+
font-display: swap;
25+
src: url(https://fonts.gstatic.com/s/poppins/v15/pxiEyp8kv8JHgFVrJJbecmNE.woff2) format('woff2');
26+
unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
27+
}
28+
/* latin-ext */
29+
@font-face {
30+
font-family: 'Poppins';
31+
font-style: normal;
32+
font-weight: 400;
33+
font-display: swap;
34+
src: url(https://fonts.gstatic.com/s/poppins/v15/pxiEyp8kv8JHgFVrJJnecmNE.woff2) format('woff2');
35+
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
36+
}
37+
/* latin */
38+
@font-face {
39+
font-family: 'Poppins';
40+
font-style: normal;
41+
font-weight: 400;
42+
font-display: swap;
43+
src: url(https://fonts.gstatic.com/s/poppins/v15/pxiEyp8kv8JHgFVrJJfecg.woff2) format('woff2');
44+
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
45+
}

‎index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<meta http-equiv="X-UA-Compatible" content="IE=edge">
77
<meta name="viewport" content="width=device-width, initial-scale=1.0">
88
<meta name="robots" content="index,follow" />
9-
<link href="https://fonts.googleapis.com/css2?family=Lato&family=Poppins&display=swap" rel="stylesheet">
9+
<link href="./fonts/css2.css" rel="stylesheet">
1010
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css"
1111
integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA=="
1212
crossorigin="anonymous" referrerpolicy="no-referrer" />

0 commit comments

Comments
 (0)