Mam pewien problem. Otóż jak sprawdzić czy użytkownik wprowadził już jakieś zadanie i uniemożliwić mu wprowadzenie ponownie tego samego zadania.
- Rejestracja:ponad 7 lat
- Ostatnio:2 miesiące
- Postów:639
JavaScript - Rejestracja:ponad 7 lat
- Ostatnio:2 miesiące
- Postów:639
0
const taskInput = document.getElementById('enter-task');
const addTaskBtn = document.querySelector('[data-submit-task]');
const toDoContainer = document.querySelector('[data-todo]');
addTaskBtn.addEventListener('click', addTask);
function addTask() {
if (taskInput.value == '') {
return;
}
const taskContainer = document.createElement('div');
taskContainer.classList.add('task-container');
taskContainer.innerHTML = `<input type="checkbox" data-complete><p class="task-date">Data utworzenia: <span data-task-date>${getDate()}</span></p><div class="content-edit"><span data-task-title>${taskInput.value}</span><button type="button" data-edit>Edycja</button></div><button type="button" data-delete>X</button>`;
const completeTaskBtn = taskContainer.querySelector('[data-complete]');
const deleteTaskBtn = taskContainer.querySelector('[data-delete]');
const editTaskBtn = taskContainer.querySelector('[data-edit]');
completeTaskBtn.addEventListener('click', markAsDone);
deleteTaskBtn.addEventListener('click', deleteTask);
editTaskBtn.addEventListener('click', editTask);
toDoContainer.appendChild(taskContainer);
}
function markAsDone() {
const taskTitle = this.parentNode.querySelector('[data-task-title]');
if (this.checked) {
taskTitle.style.textDecoration = 'line-through';
return;
}
taskTitle.style.textDecoration = 'none';
}
function deleteTask() {
toDoContainer.removeChild(this.parentNode);
}
function editTask() {
const taskContainer = this.parentNode.parentNode;
if (taskContainer.contains(taskContainer.querySelector('.task-edit-container'))) {
return;
}
const currentTaskTitle = this.previousElementSibling;
const editTaskContainer = document.createElement('div');
editTaskContainer.classList.add('task-edit-container');
editTaskContainer.innerHTML = `<label>Wprowadź treść zadania</label><input type="text"><button type="button">OK</button>`;
const submitTitleBtn = editTaskContainer.querySelector('button');
submitTitleBtn.addEventListener('click', function() {
const newTitle = editTaskContainer.querySelector('input').value;
if(newTitle == '') {
return;
}
const currentDate = document.querySelector('[data-task-date]');
currentDate.innerHTML = `<p class="task-date">Data modyfikacji: <span data-task-date>${getDate()}</span></p>`;
currentTaskTitle.innerHTML = newTitle;
taskContainer.removeChild(editTaskContainer);
});
taskContainer.appendChild(editTaskContainer);
}
function getDate() {
let date = new Date();
let day = date.getDate();
let monthIndex = date.getMonth();
let year = date.getFullYear();
let hours = date.getHours();
let minutes = date.getMinutes();
let seconds = date.getSeconds();
if(minutes < 10) minutes = "0" + minutes;
if(seconds < 10) seconds = "0" + seconds;
const months = ["Styczeń", "Luty", "Marzec", "Kwiecień", "Maj", "Czerwiec", "Lipiec", "Sierpień", "Wrzesień", "Październik", "Listopad", "Grudzień"];
return `${day} ${months[monthIndex]} ${year} ${hours} : ${minutes} : ${seconds}`;
}
- Rejestracja:ponad 5 lat
- Ostatnio:około rok
- Postów:374
1
coś takiego
const titleExists = !!document.querySelector(`[data-key=${taskInput.value}]`);
if (taskInput.value == '' || titleExists) {
return;
}
const taskContainer = document.createElement('div');
taskContainer.classList.add('task-container');
taskContainer.innerHTML = `<input type="checkbox" data-complete>
<p class="task-date">Data utworzenia:
<span data-task-date>${getDate()}</span></p><div class="content-edit">
<span data-task-title>${taskInput.value}</span><button type="button" data-edit data-key=${taskInput.value}>Edycja</button>
</div><button type="button" data-delete>X</button>`;
piotrek1998
nie działa
phanc
to raczej pseudokod. Zobacz co nie działa.prosta logika, jeśli element z tytułem już istniej zwracasz funkcję.