Skip to content

Commit 91d9adf

Browse files
cashewcodingcashewcoding
committed
Code and style improvements
1 parent c7ce792 commit 91d9adf

File tree

3 files changed

+140
-54
lines changed

3 files changed

+140
-54
lines changed

‎index.html

Lines changed: 33 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -15,45 +15,50 @@
1515
</head>
1616
<body>
1717
<main class="container my-5">
18-
<div id="header">
18+
<div id="heading" class="container">
1919
<div class="row">
2020
<div class="col-12">
2121
<h1 class="text-center">ToDo List</h1>
2222
</div>
2323
</div>
24-
<div class="row">
25-
<div class="col-12 text-center">
26-
<form id="toDoInputForm">
27-
<input
28-
type="text"
29-
id="toDoInput"
30-
name="toDoInput"
31-
value=""
32-
placeholder="What needs to be done?"
33-
style="width: 300px; height: 50px; font-size: 16px"
34-
/>
35-
<button
36-
type="submit"
37-
name="addToDoBtn"
38-
id="addToDoBtn"
39-
style="height: 50px"
40-
>
41-
+
42-
</button>
43-
</form>
44-
</div>
45-
</div>
4624
</div>
4725

4826
<div id="itemContainer" class="row">
4927
<div class="col">
50-
<form action="" id="itemForm" name="itemForm"></form>
51-
<ul id="itemList"></ul>
52-
</form>
28+
<ul id="itemList">
29+
<li id="toDoInputLi">
30+
<i class="bi bi-plus-square"></i>
31+
<form action="" id="toDoInputForm">
32+
<input
33+
type="text"
34+
id="toDoInput"
35+
name="toDoInput"
36+
value=""
37+
placeholder="What do you want to do?"
38+
autofocus="autofocus"
39+
/>
40+
</form>
41+
</li>
42+
</ul>
5343
</div>
5444
</div>
5545

56-
<div id="progress" class="row justify-content-between align-items-center">
46+
<!-- <div id="inputContainer" class="row">
47+
<div class="col">
48+
<form id="toDoInputForm">
49+
<input
50+
type="text"
51+
id="toDoInput"
52+
name="toDoInput"
53+
value=""
54+
placeholder="What needs to be done?"
55+
autofocus="autofocus"
56+
/>
57+
</form>
58+
</div>
59+
</div> -->
60+
61+
<!-- <div id="progress" class="row justify-content-between align-items-center">
5762
<div class="col-6 py-3 text-start">
5863
<button>Remove checked items</button>
5964
</div>
@@ -73,7 +78,7 @@ <h1 class="text-center">ToDo List</h1>
7378
></div>
7479
</div>
7580
</div>
76-
</div>
81+
</div> -->
7782
</main>
7883
<script
7984
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"

‎script.js

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
toDoInputForm.reset(); // Reset input form when loading DOM
2-
let toDos = []; // Create empty toDos[] array
3-
const toDoInput = document.getElementById("toDoInput"); // Input field for new ToDos
2+
const toDoInput = document.getElementById("toDoInput"); // Get input field for new ToDos
43

54
// Read from local storage and fill array with toDos[]
6-
const storedItems = localStorage.getItem("toDos");
7-
if (storedItems) {
5+
let toDos = JSON.parse(localStorage.getItem("toDos")) || []; // Fill toDos[] array with values from local storage or create an empty toDos[] array
6+
if (toDos) {
87
// If there are any stored items in local storage
9-
toDos = JSON.parse(storedItems); // Then convert string from local storage back to array
108
for (i = 0; i < toDos.length; i++) {
119
// And loop through that array
1210
if (toDos[i]) {
@@ -32,23 +30,31 @@ function createToDoItems(curIndex) {
3230

3331
// Delete item event listener on click of Delete button
3432
const delBtn = document.createElement("button"); //Create delete button
35-
delBtn.textContent = "X"; // Text for delete button
33+
delBtn.className = "delBtn";
34+
delBtn.innerHTML = '<i class="bi bi-x"></i>'; // Text (x) for delete button
3635
delBtn.addEventListener("click", (e) => {
3736
// Event listener for delete button click
3837
itemList.removeChild(liEle); // Remove li ToDo item from DOM
3938
delete toDos[curIndex]; // Delete from toDos[] array at index $curIndex
4039
storeLocal(); // Delete from local storage
4140
});
4241

43-
// Actually append the elements earlier
42+
// Actually append the elements created earlier
4443
liEle.appendChild(delBtn); // Append the delete button to the li element
45-
itemList.appendChild(liEle); // Append the li element to the ul
44+
itemList.insertBefore(liEle, toDoInputLi);
45+
// itemList.insertBefore(liEle, toDoInputLi); // Append the li element to the ul
4646

4747
// Edit item event listener on blur (focus lost) of input field
4848
const inputItem = document.getElementById("inputItem" + curIndex); // Get the input item to edit
4949
inputItem.addEventListener("blur", (e) => {
5050
// And add an event listener to it for blur event
51-
toDos[curIndex] = inputItem.value; // Change toDos[] array at index $curIndex with edit
51+
if (inputItem.value != "") {
52+
// If value of input field is NOT empty
53+
toDos[curIndex] = inputItem.value; // Change toDos[] array at index $curIndex with edit
54+
} else {
55+
delete toDos[curIndex]; // Else (when empty) delete from toDos[] array at index $curIndex
56+
// itemList.removeChild(liEle); // Uncomment this to immediately delete the input field on blur event as well
57+
}
5258
storeLocal(); // Save to local storage after edit
5359
});
5460
}
@@ -65,9 +71,8 @@ const addToDo = (e) => {
6571
createToDoItems(toDos.length - 1); // Create ToDo item at the end of list
6672
storeLocal(); // Save to local storage after add
6773
toDoInputForm.reset(); // Reset input form
68-
} else {
69-
alert("Don't try adding empty ToDos, you lazy bastard!"); // Alert when ToDo input field is empty
7074
}
7175
};
7276

73-
addToDoBtn.addEventListener("click", addToDo); // Event listener for Add button (+) click
77+
toDoInput.addEventListener("blur", addToDo); // Event listener for Add button (+) click
78+
toDoInputForm.addEventListener("submit", addToDo); // Event listener for Add button (+) click

‎style.css

Lines changed: 90 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,110 @@
1+
@import url("https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css");
2+
3+
body {
4+
background-color: #222;
5+
}
16
main.container {
27
max-width: 500px;
38
margin: auto;
4-
background-color: darkgrey;
9+
background-color: #3446a0;
10+
color: #dedede;
11+
border-radius: 20px;
512
}
6-
713
h1 {
814
text-align: center;
915
margin: 20px 0;
1016
}
11-
1217
ul {
1318
list-style: none;
1419
margin-left: 0;
1520
padding: 0;
1621
}
17-
1822
form {
19-
margin: 20px 0;
23+
margin: 0;
2024
display: inline-block;
2125
}
22-
23-
button {
24-
padding: 10px 20px;
25-
background-color: #4caf50;
26-
color: white;
27-
border: none;
28-
border-radius: 5px;
26+
button.delBtn {
27+
height: 100%;
28+
background-color: transparent;
29+
border: 0;
2930
cursor: pointer;
31+
font-size: 1.3em;
3032
}
31-
32-
[type="checkbox"] {
33+
button.delBtn .bi-x {
34+
color: #dedede;
35+
}
36+
button.delBtn .bi-x:hover {
37+
color: #fff;
38+
}
39+
input[type="checkbox"] {
40+
margin-right: 5px;
41+
width: 20px;
42+
height: 20px;
43+
}
44+
input[type="checkbox"]:checked {
45+
accent-color: #43c03f;
46+
}
47+
input[type="text"] {
48+
box-sizing: border-box;
49+
margin-right: -2em;
50+
width: 449px;
51+
height: 2em;
52+
background-color: transparent;
53+
border: 0 solid transparent;
54+
outline: none;
55+
color: #dedede;
56+
transition: 0.5s;
57+
-webkit-transition: 0.5s;
58+
}
59+
input[type="text"]:focus {
60+
background-color: transparent;
61+
border: 0;
62+
border-top: 1px solid #ffd444;
63+
border-right: 1px solid #ffd444;
64+
border-bottom: 1px solid #ffd444;
65+
border-left: 1px solid #ffd444;
66+
border-radius: 5px;
67+
outline: none;
68+
transition: 0.5s;
69+
-webkit-transition: 0.5s;
70+
color: #fff;
71+
}
72+
#toDoInput::placeholder {
73+
color: #ffd444;
74+
opacity: 0.8;
75+
transition: 0.5s;
76+
-webkit-transition: 0.5s;
77+
}
78+
#toDoInput::-ms-input-placeholder {
79+
color: #ffd444;
80+
opacity: 0.8;
81+
transition: 0.5s;
82+
-webkit-transition: 0.5s;
83+
}
84+
#toDoInput:-ms-input-placeholder {
85+
color: #ffd444;
86+
opacity: 0.8;
87+
transition: 0.5s;
88+
-webkit-transition: 0.5s;
89+
}
90+
#toDoInput:focus::placeholder {
91+
opacity: 1;
92+
transition: 0.5s;
93+
-webkit-transition: 0.5s;
94+
}
95+
#toDoInput:focus::-ms-input-placeholder {
96+
opacity: 1;
97+
transition: 0.5s;
98+
-webkit-transition: 0.5s;
99+
}
100+
#toDoInput:focus:-ms-input-placeholder {
101+
opacity: 1;
102+
transition: 0.5s;
103+
-webkit-transition: 0.5s;
104+
}
105+
.bi-plus-square {
106+
font-size: 20px;
33107
margin-right: 5px;
108+
color: #ffd444;
109+
opacity: 0.8;
34110
}

0 commit comments

Comments
 (0)