Skip to content

Commit cbb2f56

Browse files
codewarsfxcodewarsfx
committed
built a todolist application with html css and js
1 parent 0ae5049 commit cbb2f56

File tree

9 files changed

+478
-14
lines changed

9 files changed

+478
-14
lines changed

‎easy/to_do_list/figma design prototypes/to do list home.png‎

129 KB
Loading

‎easy/to_do_list/figma design prototypes/todo list design (1).png‎

153 KB
Loading

‎easy/to_do_list/images/README.md‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎easy/to_do_list/images/Vector.png‎

12.1 KB
Loading

‎easy/to_do_list/images/confetti.png‎

18.6 KB
Loading

‎easy/to_do_list/images/files-and-folders.png‎

14.2 KB
Loading

‎easy/to_do_list/index.html‎

Lines changed: 109 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,110 @@
11
<!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>Document</title>
8-
</head>
9-
<body>
10-
11-
</body>
12-
</html>
2+
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
3+
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
4+
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
5+
<!--[if gt IE 8]><!-->
6+
<html class="no-js">
7+
<!--<![endif]-->
8+
<head>
9+
<meta charset="utf-8" />
10+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
11+
<title>LIPE To-do List</title>
12+
<meta name="description" content="" />
13+
<meta name="viewport" content="width=device-width, initial-scale=1" />
14+
<link rel="stylesheet" href="style.css" />
15+
<link
16+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;700&display=swap"
17+
rel="stylesheet"
18+
/>
19+
<script
20+
src="https://kit.fontawesome.com/f673f835d1.js"
21+
crossorigin="anonymous"
22+
></script>
23+
</head>
24+
<body>
25+
<div class="wrapper">
26+
<div class="top__section">
27+
<!-- <h2 class="top__section__heading">Thursday,19th March</h2> -->
28+
<input
29+
type="text"
30+
placeholder="enter activity"
31+
class="top__section__input"
32+
required
33+
/>
34+
<button class="input__type__button"><i class="fas fa-plus"></i></button>
35+
</div>
36+
<div class="presentation">
37+
<img src="./images/files-and-folders.png" alt="files-and-folders.png" />
38+
<h1>To-do list</h1>
39+
</div>
40+
<div class="main">
41+
<main>
42+
<h3 class="main__header">5 tasks</h3>
43+
<h3 class="main__header completed">2 tasks completed</h3>
44+
<div class="main__list">
45+
<ul>
46+
<!-- <li class="main__list__item">
47+
visit Chidera's Kitchen
48+
<div class="btn-wrapper">
49+
<button class="button-marker">
50+
<i class="fas fa-check"></i>
51+
</button>
52+
<button class="button-marker button-marker--modified">
53+
<i class="fas fa-times"></i>
54+
</button>
55+
</div>
56+
</li>
57+
<li class="main__list__item">
58+
visit Chidera's Kitchen
59+
<div class="btn-wrapper">
60+
<button class="button-marker">
61+
<i class="fas fa-check"></i>
62+
</button>
63+
<button class="button-marker button-marker--modified">
64+
<i class="fas fa-times"></i>
65+
</button>
66+
</div>
67+
</li>
68+
<li class="main__list__item">
69+
visit Chidera's Kitchen
70+
<div class="btn-wrapper">
71+
<button class="button-marker">
72+
<i class="fas fa-check"></i>
73+
</button>
74+
<button class="button-marker button-marker--modified">
75+
<i class="fas fa-times"></i>
76+
</button>
77+
</div>
78+
</li>
79+
<li class="main__list__item">
80+
visit Chidera's Kitchen
81+
<div class="btn-wrapper">
82+
<button class="button-marker">
83+
<i class="fas fa-check"></i>
84+
</button>
85+
<button class="button-marker button-marker--modified">
86+
<i class="fas fa-times"></i>
87+
</button>
88+
</div>
89+
</li>
90+
<li class="main__list__item">
91+
visit Chidera's Kitchen
92+
<div class="btn-wrapper">
93+
<button class="button-marker">
94+
<i class="fas fa-check"></i>
95+
</button>
96+
<button class="button-marker button-marker--modified">
97+
<i class="fas fa-times"></i>
98+
</button>
99+
</div>
100+
</li> -->
101+
</ul>
102+
</div>
103+
</main>
104+
</div>
105+
</div>
106+
<div class="background rectangle2"></div>
107+
<div class="background rectangle3"></div>
108+
<script src="script.js" async defer></script>
109+
</body>
110+
</html>

‎easy/to_do_list/script.js‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
let firstTimeClick = true;
2+
let tasks = 0;
3+
let completed = 0;
4+
5+
//selectors of the dom nodes even in the dosument manipulation in this project
6+
7+
let uiNodes = {
8+
mainItem: 'main',
9+
presentation: '.presentation',
10+
topHeading: '.top__section__heading',
11+
topInput: '.top__section__input',
12+
inputButton: '.input__type__button',
13+
parentList: 'ul',
14+
mainHeader: '.main__header',
15+
mainHeaderCompleted: '.completed',
16+
ballon: '.ballon',
17+
};
18+
19+
//function responsible for readin input value text
20+
let readInputValue = () => document.querySelector(uiNodes.topInput).value;
21+
22+
//function responsible for formatting header text
23+
let updateTaskMessage = () => {
24+
document.querySelector(uiNodes.mainHeader).textContent = `${
25+
tasks > 0 ? tasks : 'No'
26+
} task${tasks <= 1 ? '' : 's'} recorded`;
27+
document.querySelector(uiNodes.mainHeaderCompleted).textContent = `${
28+
completed > 0 ? completed : 'No'
29+
} task${completed <= 1 ? '' : 's'} completed`;
30+
};
31+
32+
//function responsible for addition of new task
33+
let addNewTaskInterface = (task) => {
34+
let listSnippet = `<li class="main__list__item">
35+
${task}
36+
<div class="btn-wrapper">
37+
<button class="button-marker check">
38+
<i class="fas fa-check"></i>
39+
</button>
40+
<button class="button-marker button-marker--modified">
41+
<i class="fas fa-times"></i>
42+
</button>
43+
</div>
44+
</li>`;
45+
document
46+
.querySelector(uiNodes.parentList)
47+
.insertAdjacentHTML('beforeend', listSnippet);
48+
};
49+
50+
//function responsible for updating task number
51+
let updateTasks = () => {
52+
tasks++;
53+
};
54+
55+
//function responsible for clearing input field
56+
let clearInput = () => {
57+
document.querySelector(uiNodes.topInput).value = '';
58+
};
59+
60+
//event listener for trigerring animation and handlin button input
61+
document.querySelector(uiNodes.inputButton).addEventListener('click', (e) => {
62+
if (firstTimeClick) {
63+
Array.from(
64+
document.querySelectorAll(
65+
`${uiNodes.mainItem},${uiNodes.presentation},${uiNodes.topHeading},${uiNodes.topInput}`
66+
)
67+
).forEach((e) => {
68+
e.style.animationPlayState = 'running';
69+
});
70+
firstTimeClick = false;
71+
updateTaskMessage();
72+
}
73+
let input = readInputValue();
74+
if (input) {
75+
addNewTaskInterface(input);
76+
updateTasks();
77+
updateTaskMessage();
78+
clearInput();
79+
}
80+
});
81+
82+
let date = () => {
83+
let months = [
84+
' January',
85+
' February',
86+
'March',
87+
' April',
88+
'May',
89+
' June',
90+
'July',
91+
' August',
92+
' September',
93+
' October',
94+
'November',
95+
' December',
96+
];
97+
let daysWeek = [
98+
'Monday',
99+
'Tuesday',
100+
'Wednesday',
101+
'Thursday',
102+
'Friday',
103+
'Saturday',
104+
'Sunday',
105+
];
106+
107+
let currentDate = new Date();
108+
console.log(currentDate.getUTCDate());
109+
let htmlSnippet = `<h2 class="top__section__heading">${
110+
daysWeek[currentDate.getDay() - 1]
111+
},${currentDate.getUTCDate()}th ${months[currentDate.getUTCMonth()]}</h2>`;
112+
console.log(htmlSnippet);
113+
document
114+
.querySelector('.top__section')
115+
.insertAdjacentHTML('afterbegin', htmlSnippet);
116+
};
117+
date();
118+
//event listener for completing and deleting tasks
119+
120+
document.querySelector('ul').addEventListener('click', (e) => {
121+
if (e.target.closest('.check')) {
122+
document
123+
.querySelector('.check')
124+
.parentNode.parentNode.parentNode.removeChild(
125+
document.querySelector('.check').parentNode.parentNode
126+
);
127+
completed += 1;
128+
tasks -= 1;
129+
updateTaskMessage();
130+
} else if (e.target.closest('.button-marker--modified')) {
131+
document
132+
.querySelector('.button-marker--modified')
133+
.parentNode.parentNode.parentNode.removeChild(
134+
document.querySelector('.button-marker--modified').parentNode.parentNode
135+
);
136+
tasks -= 1;
137+
updateTaskMessage();
138+
}
139+
});

0 commit comments

Comments
 (0)