Skip to content

to do list empty list feedback #1953

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
mitchelladell wants to merge 1 commit into from
Closed

to do list empty list feedback #1953

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
207 changes: 98 additions & 109 deletions projects/to-do-list/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,122 +1,111 @@
// Create a "close" button and append it to each list item
var myNodelist = document.getElementsByTagName('LI');
var i;
for (i = 0; i < myNodelist.length; i++) {
var division = document.createElement('div');
var span = document.createElement('SPAN');
var txt = document.createTextNode('\u00D7');
var editSpan = document.createElement('SPAN');
editSpan.innerHTML = ('&#9998');
division.appendChild(span);
division.appendChild(editSpan);
editSpan.className = 'edit';
editSpan.onclick = function () {
editList(this);
};
span.className = 'close';
span.appendChild(txt);
myNodelist[i].appendChild(division);
// Check if list is empty
function updateEmptyMessage() {
const list = document.getElementById("myUL");
const message = document.getElementById("emptyMessage");
message.style.display = list.children.length === 0 ? "block" : "none";
}

// Click on a close button to hide the current list item
var close = document.getElementsByClassName('close');
var i;
for (i = 0; i < close.length; i++) {
close[i].onclick = function () {
var div = this.parentElement.parentElement;
div.style.display = 'none';
};
// Attach close and edit buttons
function attachCloseAndEdit(li) {
var division = document.createElement("div");

var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");

var editSpan = document.createElement("SPAN");
editSpan.innerHTML = "&#9998";

division.appendChild(span);
division.appendChild(editSpan);

editSpan.className = "edit";
editSpan.onclick = function () {
editList(this);
};

span.className = "close";
span.appendChild(txt);
li.appendChild(division);

span.onclick = function () {
this.parentElement.parentElement.remove();
updateEmptyMessage();
};
}

// Add a "checked" symbol when clicking on a list item
var list = document.querySelector('ul');
list.addEventListener('click', function (ev) {
console.log('clicked on ' + ev.target.tagName);
if (ev.target.tagName === 'DIV') {
ev.target.parentElement.classList.toggle('checked');
}
if (ev.target.tagName === 'LI') {
ev.target.classList.toggle('checked');
}
}, false);

// Create a new list item when clicking on the "Add" button
function newElement () {
var li = document.createElement('li');
var division = document.createElement('div');
var inputValue = document.getElementById('myInput').value;
var t = document.createTextNode(inputValue);
li.appendChild(t);
if (inputValue === '') {
alert('You must write something!');
} else {
document.getElementById('myUL').appendChild(li);
// Mark checked
var list = document.querySelector("ul");
list.addEventListener(
"click",
function (ev) {
if (ev.target.tagName === "DIV") {
ev.target.parentElement.classList.toggle("checked");
}
document.getElementById('myInput').value = '';
var item = document.createElement('div');
item.classList.add('val');
item.appendChild(t);
var span = document.createElement('SPAN');
var txt = document.createTextNode('\u00D7');
var editSpan = document.createElement('SPAN');
editSpan.innerHTML = ('&#9998');
division.appendChild(span);
division.appendChild(editSpan);
editSpan.className = 'edit';
editSpan.onclick = function () {
editList(this);
};
span.className = 'close';
span.appendChild(txt);
li.appendChild(item);
li.appendChild(division);

for (i = 0; i < close.length; i++) {
close[i].onclick = function () {
var div = this.parentElement.parentElement;
div.style.display = 'none';
};
if (ev.target.tagName === "LI") {
ev.target.classList.toggle("checked");
}
var currentDate = new Date();
var formattedDate = formatDate(currentDate);
var dateElement = document.createElement('span');
dateElement.textContent = formattedDate;
li.appendChild(dateElement);
},
false
);

// Add item
function newElement() {
var inputValue = document.getElementById("myInput").value;
if (!inputValue) {
alert("You must write something!");
return;
}

var li = document.createElement("li");
li.appendChild(document.createTextNode(inputValue));
document.getElementById("myUL").appendChild(li);
document.getElementById("myInput").value = "";

attachCloseAndEdit(li);

// Date
var dateElement = document.createElement("span");
dateElement.textContent = formatDate(new Date());
li.appendChild(dateElement);

updateEmptyMessage();
}

//Edit the list whenever the pencil icon is clicked
function editList (division) {
var editButtons = document.getElementsByClassName('editBtn');
for (let i = 0; i < editButtons.length; i++) {
editButtons[i].style.display = 'none';
}
var item = division.parentElement.parentElement.firstElementChild;
console.log(item);
var inputDivision = document.getElementById('myInput');
inputDivision.value = item.innerHTML;
var addBtn = document.getElementsByClassName('addBtn');
addBtn[0].style.display = 'none';
var myDiv = document.getElementById('myDIV');
var editBtn = document.createElement('span');
editBtn.innerHTML = 'Edit';
editBtn.classList.add('editBtn');
myDiv.appendChild(editBtn);
editBtn.onclick = function () {
item.innerHTML = inputDivision.value;
inputDivision.value = '';
editBtn.remove();
addBtn[0].style.display = 'block';
};
// Edit item
function editList(division) {
var item = division.parentElement.parentElement.firstChild;
var inputDivision = document.getElementById("myInput");
inputDivision.value = item.textContent;

var addBtn = document.getElementsByClassName("addBtn")[0];
addBtn.style.display = "none";

var myDiv = document.getElementById("myDIV");
var editBtn = document.createElement("span");
editBtn.innerHTML = "Edit";
editBtn.classList.add("editBtn");
myDiv.appendChild(editBtn);

editBtn.onclick = function () {
item.textContent = inputDivision.value;
inputDivision.value = "";
editBtn.remove();
addBtn.style.display = "inline-block";
};
}
document.getElementById('myInput').addEventListener('keyup', function(event) {
if (event.key === 'Enter') {
newElement();
}

// Enter key
document.getElementById("myInput").addEventListener("keyup", function (event) {
if (event.key === "Enter") newElement();
});
document.getElementById('myInput').value = '';

// Format date
function formatDate(date) {
const options = { year: 'numeric', month: 'long', day: 'numeric' };
return date.toLocaleDateString(undefined, options);
return date.toLocaleDateString(undefined, {
year: "numeric",
month: "long",
day: "numeric",
});
}

// Add this code inside your `newElement` function, after creating the `t` variable.
updateEmptyMessage();