Skip to content

Commit 3cb6759

Browse files
StrangealStrangeal
committed
Add funtionalities
1 parent b7f5f52 commit 3cb6759

File tree

6 files changed

+203
-192
lines changed

6 files changed

+203
-192
lines changed

‎dist/index.html

+14-10
Original file line numberDiff line numberDiff line change
@@ -4,24 +4,28 @@
44
<meta charset="UTF-8">
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>ToDo List</title>
7+
<script src="https://kit.fontawesome.com/a4f3734cb0.js" crossorigin="anonymous"></script>
8+
<title>TODO List</title>
89
<script defer src="runtime.js"></script><script defer src="index.js"></script></head>
910
<body>
10-
<h1>Welcome back to webpack</h1>
1111
<main>
1212
<div class="todo">
1313
<div class="todo__header">
1414
<div class="todo__title">
15-
<h3>Today's To Do</h3>
16-
<a href="#"><img src="./Img/refresh.svg" alt="Refresh icon"></a>
17-
</div>
18-
<label for="todo input">
19-
<input class="todo__input" type="text" placeholder="Add to your list">
20-
</label>
15+
<h3>TODO</h3>
16+
<a href="#"><i class="fa-solid fa-arrows-rotate"></i></a>
17+
</div><hr>
18+
<div class="todo__input__item">
19+
<input class="todo__input" type="text" placeholder="Add to your list">
20+
<a href="#"><i class="fa-solid fa-turn-down"></i></a>
21+
</div><hr>
2122
</div>
23+
<!-- todo-body -->
2224
<div class="todo__body">
23-
<input class="todo__item" type="button" value="">
24-
<label for="input1" class="todo__label">Code to sections into the app</label>
25+
<form class="todo__form"></form> <!--Dedicated placeholder for dynamic rendring-->
26+
</div>
27+
<div class="todo-btn">
28+
<button type="button" class="todo__clear">Clear all completed</button>
2529
</div>
2630
</div>
2731
</main>

‎dist/index.js

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

‎dist/runtime.js

+3-47
Original file line numberDiff line numberDiff line change
@@ -23,15 +23,12 @@
2323
/******/ // Create a new module (and put it into the cache)
2424
/******/ var module = __webpack_module_cache__[moduleId] = {
2525
/******/ id: moduleId,
26-
/******/ loaded: false,
26+
/******/ // no module.loaded needed
2727
/******/ exports: {}
2828
/******/ };
2929
/******/
3030
/******/ // Execute the module function
31-
/******/ __webpack_modules__[moduleId].call(module.exports, module, module.exports, __webpack_require__);
32-
/******/
33-
/******/ // Flag the module as loaded
34-
/******/ module.loaded = true;
31+
/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
3532
/******/
3633
/******/ // Return the exports of the module
3734
/******/ return module.exports;
@@ -97,18 +94,6 @@
9794
/******/ };
9895
/******/ })();
9996
/******/
100-
/******/ /* webpack/runtime/global */
101-
/******/ (() => {
102-
/******/ __webpack_require__.g = (function() {
103-
/******/ if (typeof globalThis === 'object') return globalThis;
104-
/******/ try {
105-
/******/ return this || new Function('return this')();
106-
/******/ } catch (e) {
107-
/******/ if (typeof window === 'object') return window;
108-
/******/ }
109-
/******/ })();
110-
/******/ })();
111-
/******/
11297
/******/ /* webpack/runtime/hasOwnProperty shorthand */
11398
/******/ (() => {
11499
/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
@@ -125,38 +110,9 @@
125110
/******/ };
126111
/******/ })();
127112
/******/
128-
/******/ /* webpack/runtime/node module decorator */
129-
/******/ (() => {
130-
/******/ __webpack_require__.nmd = (module) => {
131-
/******/ module.paths = [];
132-
/******/ if (!module.children) module.children = [];
133-
/******/ return module;
134-
/******/ };
135-
/******/ })();
136-
/******/
137-
/******/ /* webpack/runtime/publicPath */
138-
/******/ (() => {
139-
/******/ var scriptUrl;
140-
/******/ if (__webpack_require__.g.importScripts) scriptUrl = __webpack_require__.g.location + "";
141-
/******/ var document = __webpack_require__.g.document;
142-
/******/ if (!scriptUrl && document) {
143-
/******/ if (document.currentScript)
144-
/******/ scriptUrl = document.currentScript.src
145-
/******/ if (!scriptUrl) {
146-
/******/ var scripts = document.getElementsByTagName("script");
147-
/******/ if(scripts.length) scriptUrl = scripts[scripts.length - 1].src
148-
/******/ }
149-
/******/ }
150-
/******/ // When supporting browsers where an automatic publicPath is not supported you must specify an output.publicPath manually via configuration
151-
/******/ // or pass an empty string ("") and set the __webpack_public_path__ variable from your code to use your own logic.
152-
/******/ if (!scriptUrl) throw new Error("Automatic publicPath is not supported in this browser");
153-
/******/ scriptUrl = scriptUrl.replace(/#.*$/, "").replace(/\?.*$/, "").replace(/\/[^\/]+$/, "/");
154-
/******/ __webpack_require__.p = scriptUrl;
155-
/******/ })();
156-
/******/
157113
/******/ /* webpack/runtime/jsonp chunk loading */
158114
/******/ (() => {
159-
/******/ __webpack_require__.b = document.baseURI || self.location.href;
115+
/******/ // no baseURI
160116
/******/
161117
/******/ // object to store loaded and loading chunks
162118
/******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched

‎src/index.html

+14-17
Original file line numberDiff line numberDiff line change
@@ -8,26 +8,23 @@
88
<title>TODO List</title>
99
</head>
1010
<body>
11-
<main>
12-
<div class="todo">
13-
<div class="todo__header">
14-
<div class="todo__title">
15-
<h3>TODO</h3>
16-
<a href="#"><i class="fa-solid fa-arrows-rotate"></i></a>
17-
</div><hr>
18-
<div class="todo__input__item">
19-
<input class="todo__input" type="text" placeholder="Add to your list">
20-
<a href="#"><i class="fa-solid fa-turn-down"></i></a>
21-
</div><hr>
22-
</div>
23-
<!-- todo-body -->
24-
<div class="todo__body">
25-
<form class="todo__form"></form> <!--Dedicated placeholder for dynamic rendring-->
26-
</div>
11+
<main class="container">
12+
<section class="create-todo">
13+
<div class="todo-header">
14+
<h3>TODO LIST</h3>
15+
</div><hr>
16+
<form id="new-todo-form">
17+
<input type="text" placeholder="Add to list" name="content" id="content"/>
18+
</form><hr>
19+
</section>
20+
<!-- Todo List -->
21+
<section class="todo-list">
22+
23+
<div class="list" id="todo-list"></div>
24+
</section>
2725
<div class="todo-btn">
2826
<button type="button" class="todo__clear">Clear all completed</button>
2927
</div>
30-
</div>
3128
</main>
3229
</body>
3330
</html>

‎src/index.js

+108-40
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,110 @@
1+
import { endsWith } from 'lodash';
12
import './style.css';
3+
window.addEventListener('load', () => {
4+
let todos = JSON.parse(localStorage.getItem('localStore')) || [];
5+
const newTodoForm = document.querySelector('#new-todo-form');
26

3-
const todoListArray = [{
4-
description: 'SetUp webpack',
5-
completed: true,
6-
index: 1,
7-
},
8-
{
9-
description: 'Code to sections into the app',
10-
completed: false,
11-
index: 5,
12-
},
13-
{
14-
description: 'Take a walk for 45mins',
15-
completed: true,
16-
index: 4,
17-
},
18-
{
19-
description: 'Learn two subtopics each day after classes hours',
20-
completed: true,
21-
index: 3,
22-
},
23-
{
24-
description: 'Read 5 pages of personal development everyday',
25-
completed: false,
26-
index: 2,
27-
},
28-
];
29-
30-
todoListArray.sort((a, b) => a.index - b.index);
31-
// console.log(todoListArray);
32-
33-
const todoFormEl = document.querySelector('.todo__form');
34-
todoListArray.forEach((each) => {
35-
todoFormEl.innerHTML += `
36-
<div class="todo__form__list">
37-
<input class="todo__item" type="checkbox">
38-
<label for="input1" class="todo__label">${each.description}</label>
39-
<i class="fa-solid fa-ellipsis"></i>
40-
</div><hr>
41-
`;
42-
});
7+
newTodoForm.addEventListener('submit', e => {
8+
// e.preventDefault();
9+
10+
const todo = {
11+
content: e.target.elements.content.value,
12+
completed: false,
13+
}
14+
15+
todos.push(todo);
16+
localStorage.setItem('localStore', JSON.stringify(todos));
17+
18+
// Reset the form
19+
e.target.reset();
20+
DisplayTodos()
21+
})
22+
23+
DisplayTodos()
24+
})
25+
let todos = JSON.parse(localStorage.getItem('localStore')) || [];
26+
function DisplayTodos () {
27+
const todoList = document.querySelector('#todo-list');
28+
todoList.innerHTML = "";
29+
30+
todos.forEach(todo => {
31+
const todoItem = document.createElement('div');
32+
todoItem.classList.add('todo-item');
33+
34+
const label = document.createElement('label');
35+
const input = document.createElement('input');
36+
37+
const content = document.createElement('div');
38+
const actions = document.createElement('div');
39+
const trashIcon = document.createElement('i')
40+
trashIcon.classList.add('fa-regular')
41+
trashIcon.classList.add('fa-trash-can')
42+
43+
44+
input.type = 'checkbox';
45+
input.checked = todo.completed;
46+
47+
content.classList.add('todo-content');
48+
actions.classList.add('actions');
49+
50+
content.innerHTML = `<input class="edit" type="text" value="${todo.content}" readonly>`;
51+
52+
label.appendChild(input);
53+
actions.appendChild(trashIcon);
54+
todoItem.appendChild(label);
55+
todoItem.appendChild(content);
56+
todoItem.appendChild(actions);
57+
todoList.appendChild(todoItem);
58+
59+
if (todo.completed) {
60+
todoItem.classList.add('done');
61+
}
62+
const inputEl = content.querySelector('input');
63+
input.addEventListener('change', (e) => {
64+
todo.completed = e.target.checked;
65+
localStorage.setItem('localStore', JSON.stringify(todos));
66+
67+
if (todo.completed) {
68+
todoItem.classList.add('done');
69+
} else {
70+
todoItem.classList.remove('done');
71+
}
72+
DisplayTodos()
73+
74+
})
75+
76+
// Content edit
77+
inputEl.addEventListener('click', (e) => {
78+
inputEl.removeAttribute('readonly');
79+
inputEl.focus();
80+
inputEl.style.background = 'transparent';
81+
82+
// Save edited content by clicking away
83+
inputEl.addEventListener('blur', (e) => {
84+
inputEl.setAttribute('readonly', true);
85+
todo.content = e.target.value;
86+
localStorage.setItem('localStore', JSON.stringify(todos));
87+
DisplayTodos()
88+
89+
})
90+
})
91+
92+
// click to delete
93+
trashIcon.addEventListener('click', (e) => {
94+
todos = todos.filter(t => t != todo);
95+
localStorage.setItem('localStore', JSON.stringify(todos));
96+
DisplayTodos()
97+
})
98+
99+
// delete all marked todos
100+
const allDone = document.querySelector('.todo__clear');
101+
allDone.addEventListener('click', () => {
102+
if(todo.completed == true) {
103+
todos = todos.filter(n => n != todo)
104+
localStorage.setItem('localStore', JSON.stringify(todos));
105+
DisplayTodos()
106+
}
107+
})
108+
109+
})
110+
}

0 commit comments

Comments
 (0)