I have a question: There is a layout and styles and a block created on jQuery - In the first cell, You need to transfer the same block to the next Help please

$(function() { var newTasks = []; // Создания ТАССКОВ function addTaskToDOM(task, progress) { var blocks = $('<div class="blocks"></div>') var newSpan = $('<span>x</span>').addClass('exit'); var newTitle = $('<h1 id="newTitle"></h1>').text(task); var newButton = $('<button>').addClass('newBtn').text('In Progress >>>'); blocks.append(newSpan, newTitle, newButton); $('.task-' + progress).append(blocks); }; // Сохранение в LOCALSTORAGE function saveTaskToLocal(arr, task, localKey) { arr.push(task); var arrStr = JSON.stringify(arr); localStorage.setItem(localKey, arrStr); }; // Получение Элементов от LocalStorage function getTasksFromLocalstorage(arr, progress, localKey) { arr = JSON.parse(localStorage.getItem(localKey)) || []; for (var i = 0; i < arr.length; i++) { addTaskToDOM(arr[1], progress); } } // Действие на кнопку Add $('form').on('submit', function(event) { event.preventDefault(); var task = $('#taskName').val(); addTaskToDOM(task, 'new'); saveTaskToLocal(newTasks, task, 'new'); }); getTasksFromLocalstorage(newTasks, 'new', 'new'); // Progress }); 
 html, body { margin: 0; padding: 0; width: 100%; height: 100%; /* background: url(../img/gif.gif) */ } .wrapper { margin: 0 auto; max-width: 1000px; min-height: 100vh; } .header { padding: .5rem; background: #ccc; } .add-task { display: flex; } .task-name { flex-grow: 1; padding: .5rem; } .btn-add { padding: .5rem 2rem; border: none; background: #333; color: #fff; cursor: pointer; } .task-list { padding: 2rem; display: grid; grid-template-columns: repeat(3, 1fr); grid-column-gap: 2rem; background: #f2f2f2; } .task-body { padding: .5rem; border: 1px solid #999; background: #fff; min-height: 300px; } .newBtn { cursor: pointer; padding: 10px 20px; margin-left: 50%; transform: translateX(-50%); background: green; box-shadow: 2px 2px 1px black; } .exit { cursor: pointer; font-size: 40px; float: right; margin-right: 10px; font-weight: 800; } 
 <!DOCTYPE html> <html lang=""> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="wrapper"> <header class="header"> <form class="add-task"> <input type="text" class="task-name" id="taskName" placeholder="Enter task name" required> <button type="submit" class="btn-add">Add</button> </form> </header> <div class="task-list"> <div class="task-item"> <h3 class="task-title">To DO</h3> <div class="task-body task-new"></div> </div> <div class="task-item"> <h3 class="task-title">In progress</h3> <div class="task-body task-progress"></div> </div> <div class="task-item"> <h3 class="task-title">Done</h3> <div class="task-body task-done"></div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="./js/script.js"></script> </body> </html>

  • What to copy, where to copy, when to copy, what does it mean to copy? Well, with localStorage, the example given by you here in the sandbox will not work, because Failed to read the 'localStorage' property from 'Window': The document is sandboxed and lacks the 'allow-same-origin' flag. i.e. domain "sandbox" is different from the current. In addition to this, try in your example to delete everything that is not relevant to the task. Otherwise, the number of people who want to understand it will tend to zero. - XelaNimed 7:01 pm

1 answer 1

 $(function() { var newTasks = []; const $taskList = $(".task-list"); const $tasksInProgress = $(".task-progress"); // Создания ТАССКОВ function addTaskToDOM(task, progress) { var blocks = $('<div class="blocks"></div>'); var newSpan = $("<span>x</span>").addClass("exit"); var newTitle = $('<h1 id="newTitle"></h1>').text(task); var newButton = $("<button>") .addClass("newBtn") .text("In Progress >>>"); blocks.append(newSpan, newTitle, newButton); $(".task-" + progress).append(blocks); } // Сохранение в LOCALSTORAGE function saveTaskToLocal(arr, task, localKey) { arr.push(task); var arrStr = JSON.stringify(arr); localStorage.setItem(localKey, arrStr); } // Получение Элементов от LocalStorage function getTasksFromLocalstorage(arr, progress, localKey) { arr = JSON.parse(localStorage.getItem(localKey)) || []; for (var i = 0; i < arr.length; i++) { addTaskToDOM(arr[1], progress); } } // Действие на кнопку Add $("form").on("submit", function(event) { event.preventDefault(); var task = $("#taskName").val(); addTaskToDOM(task, "new"); saveTaskToLocal(newTasks, task, "new"); }); getTasksFromLocalstorage(newTasks, "new", "new"); // Progress $taskList.on("click", ".newBtn", function() { const $blocks = $(this).parents(".blocks"); $tasksInProgress.append($blocks); }); }); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Added that by clicking on the button In progress the block was moved to the task in progress