<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/css/main.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<form action="#" method="post" class="main-form">
<input type="text" placeholder="Enter task" class="task-input">
<input type="submit" value="Save" class="add-task-button">
</form>
<ul class="task-list"></ul>
</div>
<script src="assets/js/libs.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>
localStorage.clear() // временно
let emptyFieldError = 'The field cannot be empty! Please, enter a valid task!'
let taskInput = $('.task-input')
let taskList = $('.task-list')
$('.add-task-button').on('click', function (event) {
event.preventDefault()
let valueTask = taskInput.val()
if (!valueTask) {
alert(emptyFieldError)
return false
}
let itemTask = '<li class="task-item"><span>' + valueTask + '</span><a href="#" class="delete-task-button">Delete</a><a href="#" class="edit-task-button">Edit</a></li>'
taskList.append(itemTask)
taskInput.val('')
localStorage.setItem(($('.task-item').length), valueTask)
})
taskList.on('click', '.delete-task-button', function () {
let key = ($(this).parents('.task-item').index() + 1)
localStorage.removeItem(key) // или это
$(this).parents('.task-item').remove() // или это
// по отдельности работает
//подозреваю, что в некоторый момент .remove() срабатывает быстрее чем let key = ($(this).parents('.task-item').index() + 1)
//после чего индекс не записывается и соотвественно не срабатывает должным образом удаление с локал сторедж
})
taskList.on('click', '.edit-task-button', function () {
let currentTask = $(this).siblings('span').text()
$(this).siblings('span').html('<form class="edit-form"><input type="text" value="' + currentTask + '" class="update-task-input"><a href="#" class="update-task-button">Update</a></form>')
})
taskList.on('click', '.update-task-button', function () {
let updatedTaskValue = $(this).siblings('.update-task-input').val()
if (!updatedTaskValue) {
alert(emptyFieldError)
return false
}
localStorage.setItem(($(this).parents('.task-item').index() + 1), updatedTaskValue)
$(this).parents('span').text(updatedTaskValue)
})
$(document).ready(function () {
for (let i = 0; i < localStorage.length; i++) {
let key = localStorage.key(i)
let taskValue = localStorage.getItem(key.toString())
let taskItem = '<li class="task-item" data-index="' + key + '"><div class="task-text">' + taskValue + '</div>' +
'<button class="delete-task-button">Delete</button><button class="edit-task-button">Edit</button></li>'
taskList.append(taskItem)
}
})
let emptyFieldError = 'The field cannot be empty! Please, enter a valid task!'
let taskInput = $('.task-input')
let taskList = $('.task-list')
$('.add-task-button').on('click', function (event) {
event.preventDefault()
let taskValue = taskInput.val()
let index = $('.task-item').length
if (!taskValue) {
alert(emptyFieldError)
return false
}
let taskItem = '<li class="task-item" data-index="' + index + '"><div class="task-text">' + taskValue + '</div>' +
'<button class="delete-task-button">Delete</button><button class="edit-task-button">Edit</button></li>'
taskList.append(taskItem)
taskInput.val('')
localStorage.setItem(index, taskValue)
})
taskList.on('click', '.delete-task-button', function () {
let taskItem = $(this).parents('.task-item')
let key = taskItem.attr('data-index')
localStorage.removeItem(key)
taskItem.remove()
})
taskList.on('click', '.edit-task-button', function () {
let currentTask = $(this).siblings('.task-text').text()
$(this).siblings('.task-text').html('<form action="#" method="post" class="edit-form" name="edit-form" id="edit-form">' +
'<input type="checkbox" name="task-complete" value="done" class="task-complete">' +
'<input type="text" value="' + currentTask + '" class="update-task-input">' +
'<button class="update-task-button">Update</button></form>')
})
taskList.on('click', '.update-task-button', function () {
let updatedTaskValue = $(this).siblings('.update-task-input').val()
let taskItem = $(this).parents('.task-item')
let key = taskItem.attr('data-index')
if (!updatedTaskValue) {
alert(emptyFieldError)
return false
}
localStorage.setItem(key, updatedTaskValue)
$(this).parents('.task-text').text(updatedTaskValue)
})
taskList.on('change', '.task-complete', function () {
let taskValue = $(this).siblings('.update-task-input').val()
if (!taskValue) {
alert(emptyFieldError)
return false
}
$(this).parents('.task-item').addClass('completed')
$(this).addClass('hidden')
$(this).siblings('.update-task-button').addClass('hidden')
$(this).parents('.task-text').siblings('.edit-task-button').addClass('hidden')
$(this).parents('.task-text').siblings('.delete-task-button').addClass('hidden')
})
Если Вы уже зарегистрированы на Портале - войдите в систему, если Вы еще не регистрировались - пройдите простую процедуру регистрации.