Skip to content

Commit a2268b7

Browse files
Samuel-othienoSamuel-othieno
authored
Merge pull request #1 from Samuel-othieno/develop
Add the index page, styles page and the JS page
2 parents 203f214 + 9a44885 commit a2268b7

File tree

3 files changed

+336
-0
lines changed

3 files changed

+336
-0
lines changed

‎dom.js‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
const listEl = document.getElementById("list");
2+
const create_btn_el = document.getElementById("create");
3+
4+
let todos = [];
5+
6+
create_btn_el.addEventListener("click", CreateNewTodo);
7+
8+
function CreateNewTodo () {
9+
const item = {
10+
id: new Date().getTime(),
11+
text: "",
12+
complete: false
13+
}
14+
15+
todos.unshift(item);
16+
17+
const { itemEl, inputEl } = createTodoElement(item);
18+
19+
listEl.prepend(itemEl);
20+
21+
inputEl.removeAttribute("disabled");
22+
inputEl.focus();
23+
24+
save();
25+
}
26+
27+
function createTodoElement(item) {
28+
const itemEl = document.createElement('div');
29+
itemEl.classList.add("item")
30+
31+
const checkbox = document.createElement("input");
32+
checkbox.type = "checkbox";
33+
checkbox.checked = item.complete;
34+
35+
if (item.complete) {
36+
itemEl.classList.add("complete");
37+
}
38+
39+
const inputEl = document.createElement("input");
40+
inputEl.type = "text";
41+
inputEl.value = item.text;
42+
inputEl.setAttribute("disabled", "");
43+
44+
const actionsEl = document.createElement("div");
45+
actionsEl.classList.add("actions");
46+
47+
const edit_btn_el = document.createElement("button");
48+
edit_btn_el.classList.add("FA-icons", "edit-btn");
49+
edit_btn_el.innerHTML = "<i class='fa fa-pen'></i>"
50+
51+
const remove_btn_el = document.createElement("button");
52+
edit_btn_el.classList.add("FA-icons", "remove-btn");
53+
remove_btn_el.innerHTML = "<i class='fa fa-circle-minus'></i>";
54+
55+
actionsEl.append(edit_btn_el);
56+
actionsEl.append(remove_btn_el);
57+
58+
itemEl.append(checkbox);
59+
itemEl.append(inputEl);
60+
itemEl.append(actionsEl);
61+
62+
// MY EVENTS
63+
checkbox.addEventListener("change", () => {
64+
item.complete = checkbox.checked;
65+
66+
if (item.complete) {
67+
itemEl.classList.add("complete");
68+
} else {
69+
itemEl.classList.remove("complete");
70+
}
71+
72+
save();
73+
});
74+
75+
inputEl.addEventListener('input', () => {
76+
item.text = inputEl.value;
77+
});
78+
79+
inputEl.addEventListener("blur", () => {
80+
inputEl.setAttribute("disabled", "");
81+
save();
82+
});
83+
84+
edit_btn_el.addEventListener("click", () => {
85+
inputEl.removeAttribute("disabled");
86+
inputEl.focus();
87+
});
88+
89+
remove_btn_el.addEventListener("click", () => {
90+
todos = todos.filter(t => t.id != item.id);
91+
92+
itemEl.remove();
93+
94+
save();
95+
})
96+
97+
return {itemEl, inputEl, edit_btn_el, remove_btn_el };
98+
}
99+
100+
function DisplayTodos(){
101+
load ();
102+
103+
for (let i = 0; i < todos.length; i++) {
104+
const item = todos[i];
105+
106+
const { itemEl } = createTodoElement(item);
107+
108+
listEl.append(itemEl);
109+
}
110+
}
111+
112+
DisplayTodos();
113+
114+
function save() {
115+
const save = JSON.stringify(todos);
116+
117+
localStorage.setItem("my_todos", save);
118+
}
119+
120+
function load() {
121+
const data = localStorage.getItem("my_todos");
122+
if (data) {
123+
todos = JSON.parse(data);
124+
}
125+
}

‎index.html‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>todos</title>
8+
<link rel="stylesheet" href="./styles.css">
9+
<script src="https://kit.fontawesome.com/bff5048a88.js" crossorigin="anonymous"></script>
10+
<script src="https://unpkg.com/boxicons@2.1.4/dist/boxicons.js"></script>
11+
</head>
12+
13+
<body>
14+
<main class="container">
15+
16+
<div class="todos">
17+
<header>
18+
<h1>todos</h1>
19+
<span><i class="fa-solid fa-clipboard-list"></i></span>
20+
<h2>Add your first todo</h2>
21+
<p>What do you want to get done today?</p>
22+
<button id="create"><i class="fa-solid fa-plus"></i></button>
23+
</header>
24+
25+
<div class="todo-list" id="list">
26+
<div class="item">
27+
28+
<input type="checkbox" />
29+
<input type="text" value="e.g. go to the gym" disabled />
30+
31+
<div class="actions">
32+
33+
<button class="FA-icons edit-btn">
34+
<i class='fa fa-pen'></i>
35+
</button>
36+
37+
<button class="FA-icons remove-btn">
38+
<i class='fa fa-circle-minus'></i>
39+
</button>
40+
41+
</div>
42+
43+
</div>
44+
</div>
45+
</div>
46+
47+
</main>
48+
<script src="./dom.js"></script>
49+
</body>
50+
51+
</html>

‎styles.css‎

Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
2+
*{
3+
padding: 0;
4+
text-decoration: none;
5+
box-sizing: border-box;
6+
}
7+
body {
8+
background-color: rgb(56, 52, 52);
9+
}
10+
11+
main{
12+
height: 100vh;
13+
display: flex;
14+
justify-content: center;
15+
padding: center;
16+
}
17+
18+
.container .todos header span i {
19+
appearance: none;
20+
appearance: none;
21+
background: none;
22+
border: none;
23+
outline: none;
24+
font-size: 10rem;
25+
margin-bottom: 0.1rem;
26+
color: whitesmoke;
27+
}
28+
29+
.todos{
30+
width: 100%;
31+
max-width: 770px;
32+
}
33+
34+
.todos header{
35+
display: flex;
36+
align-items: center;
37+
flex-direction: column;
38+
justify-content: space-between;
39+
margin-bottom: 0.6rem;
40+
}
41+
.todos header h1{
42+
color: rgb(255, 255, 255);
43+
text-align: center;
44+
font-size: 8rem;
45+
font-family: arial;
46+
font-weight: 900;
47+
margin-top: -2.5rem;
48+
margin-bottom: -0.2rem;
49+
}
50+
51+
.container .todos header h2{
52+
color: rgb(173, 173, 182);
53+
font-size: 2rem;
54+
border: none;
55+
font-weight: 900;
56+
font-family: arial;
57+
margin-bottom: 0.2rem;
58+
}
59+
.container .todos header p{
60+
color:rgb(161, 206, 196);
61+
font-size: 1.3rem;
62+
font-family: 'Times New Roman';
63+
margin-top: -0.2rem;
64+
transition: 0.5s;
65+
}
66+
67+
.todos header button {
68+
display: flex;
69+
flex-direction: row;
70+
color: rgb(89, 177, 89);
71+
font-size: 2rem;
72+
background: none;
73+
border: none;
74+
outline: none;
75+
cursor: pointer;
76+
font-weight: 800;
77+
transition: 0.5s;
78+
animation: 3s linear 1s slidein;;
79+
80+
}
81+
.item{
82+
display: flex;
83+
align-items: center;
84+
justify-content: space-between;
85+
padding: 0.6rem;
86+
background-color: black;
87+
margin-bottom: 1rem;
88+
border-radius: 1rem;
89+
transition: 1s;
90+
91+
}
92+
.item:last-of-type{
93+
margin-bottom: 0;
94+
95+
}
96+
.item input[type="checkbox"] {
97+
margin-right: 2rem;
98+
}
99+
.item input[type="text"] {
100+
appearance: none;
101+
background: none;
102+
border: none;
103+
outline: none;
104+
color: rgb(241, 231, 231);
105+
font-size: 21px;
106+
flex: 1 1 0%;
107+
margin-right: 1rem;
108+
}
109+
.item input[type="text"]:not(:disabled) {
110+
border-bottom: 3px solid rgb(211, 208, 12);
111+
}
112+
113+
item.complete:not(:enabled) {
114+
color: blue;
115+
}
116+
117+
.item.complete {
118+
opacity: 0.4;
119+
}
120+
.item.complete input[type="text"] {
121+
text-decoration: line-through;
122+
}
123+
.item:hover,
124+
.item:focus-within {
125+
outline: 2px solid rgb(0, 0, 0);
126+
}
127+
128+
.actions button {
129+
color: rgb(32, 224, 7);
130+
margin-right: 1rem;
131+
opacity: 0.8;
132+
transform: 0.2s;
133+
appearance: none;
134+
background: none;
135+
border: none;
136+
outline: none;
137+
cursor: pointer;
138+
}
139+
.actions button i {
140+
font-size: 1.3rem;
141+
appearance: none;
142+
border: none;
143+
144+
}
145+
.actions button.remove-btn {
146+
color: rgb(248, 5, 5);
147+
148+
}
149+
.actions button.edit-btn {
150+
color: rgb(62, 248, 5);
151+
152+
}
153+
154+
.actions button:hover {
155+
opacity: 2;
156+
}
157+
158+
.actions button:last-of-type{
159+
margin-right: 0;
160+
}

0 commit comments

Comments
 (0)