Datum Javascript
Hej.
Helt ny på javascript och sitter fast med en uppgift där jag med hjälp av java ska skapa en Todo-app. Appen ska bla. skriva ut datum för skapad och avslutad aktivitet och här har jag kört fast. Jag vill inte ha någon lösning bara serverad på ett "silverfat" men om någon skulle kunna peka mig i rätt riktning eller ge tips på vart jag kan läsa mig till en lösning skulle det vara toppen för snart river jag av mig håret. Klistrar in min kod om den kan vara till hjälp. Tack på förhand.
document.addEventListener('DOMContentLoaded', () => {
//button to add new items
let addButton = document.querySelector('#add');
//inputfield to add new items
let addInput = document.querySelector('#item');
//icons for the buttons
let removeSVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M0 84V56c0-13.3 10.7-24 24-24h112l9.4-18.7c4-8.2 12.3-13.3 21.4-13.3h114.3c9.1 0 17.4 5.1 21.5 13.3L312 32h112c13.3 0 24 10.7 24 24v28c0 6.6-5.4 12-12 12H12C5.4 96 0 90.6 0 84zm416 56v324c0 26.5-21.5 48-48 48H80c-26.5 0-48-21.5-48-48V140c0-6.6 5.4-12 12-12h360c6.6 0 12 5.4 12 12zm-272 68c0-8.8-7.2-16-16-16s-16 7.2-16 16v224c0 8.8 7.2 16 16 16s16-7.2 16-16V208zm96 0c0-8.8-7.2-16-16-16s-16 7.2-16 16v224c0 8.8 7.2 16 16 16s16-7.2 16-16V208zm96 0c0-8.8-7.2-16-16-16s-16 7.2-16 16v224c0 8.8 7.2 16 16 16s16-7.2 16-16V208z"/></svg>`;
let completeSVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"/></svg>`;
//add item to todo-list when user klicks on the button (if there is text in the field)
addButton.addEventListener('click', function () {
addItem();
});
//add item to todo-list by pressing enter (if there is text in the field) (bugging, only works when the todo-part is marked)
addInput.addEventListener('keypress', function (e) {
if (e.key === 'Enter') {
addItem();
}
});
//add items to the todo-list
function addItem() {
let newItem = document.getElementById('item').value;
let newDes = document.getElementById('description').value;
if (newItem.trim() !== '') {
addItemToList(newItem, newDes);
document.getElementById('item').value = '';
document.getElementById('description').value = '';
}
}
//
function addItemToList(item, des) {
let ul = document.getElementById('todo');
let li = document.createElement('li');
li.appendChild(document.createTextNode(`${item}: ${des}`));
let buttonsDiv = document.createElement('div');
buttonsDiv.classList.add('buttons');
//create remove and complete buttons
let removeButton = document.createElement('button');
removeButton.classList.add('remove');
removeButton.innerHTML = removeSVG;
removeButton.addEventListener('click', removeItem);
let completeButton = document.createElement('button');
completeButton.classList.add('complete');
completeButton.innerHTML = completeSVG;
completeButton.addEventListener('click', completeItem);
buttonsDiv.appendChild(removeButton);
buttonsDiv.appendChild(completeButton);
li.appendChild(buttonsDiv);
ul.appendChild(li);
}
//function to remove item from the todo-list
function removeItem() {
let item = this.parentNode.parentNode;
let parent = item.parentNode;
parent.removeChild(item);
}
//function to move the item from the todo-section to the complete-section
function completeItem() {
let item = this.parentNode.parentNode;
let parent = item.parentNode;
let id = parent.id;
//check if the todo should "move" to the completed-section
let target = (id === 'todo')
? document.getElementById('completed')
: document.getElementById('todo');
parent.removeChild(item);
target.appendChild(item);
}
});
