Блог

 // --------------------------- // Global variables // ---------------------------  // Add button const AddToDoButton = document.getElementById('new-to-do');  // Columns const ToDoColumn = document.getElementById('to-do-column'); const InProgressColumn = document.getElementById('in-progress-column'); const CompleteColumn = document.getElementById('complete-column');  var Tasks = document.querySelectorAll('.task');  // --------------------------- // Add new task structure // ---------------------------  AddToDoButton.addEventListener('click', AddNewTask);  function AddNewTask(){  // all HTML task parts  const NewTaskContainer = document.createElement('div');  const NewTaskHead = document.createElement('div');  const NewTaskName = document.createElement('h3');  const NewTaskDeleteButton = document.createElement('button');  const NewTaskDescription = document.createElement('p');   // adding drag  NewTaskContainer.setAttribute('draggable', 'true');   // adding all the classes  NewTaskContainer.classList.add('task');  NewTaskHead.classList.add('task-head');  NewTaskDeleteButton.classList.add('delete-task');  NewTaskDescription.classList.add('task-description');   // adding all the content  NewTaskName.innerHTML = "Task name";  NewTaskDescription.innerHTML = "task description"  NewTaskDeleteButton.innerHTML = "X"   // HTML structure  ToDoColumn.appendChild(NewTaskContainer);  NewTaskContainer.appendChild(NewTaskHead);  NewTaskHead.appendChild(NewTaskName);  NewTaskHead.appendChild(NewTaskDeleteButton);  NewTaskContainer.appendChild(NewTaskDescription); }  // --------------------------- // dragable functionality // ---------------------------  // dragable tasks function NewTasksCheck(){  var Tasks = document.querySelectorAll('.task');  console.log(Tasks); }  setInterval(NewTasksCheck, 1000);  Tasks.forEach(draggable =gt; {  draggable.addEventListener('dragstart', () =gt; {  draggable.classList.add('dragging');  console.log("dragstart");  });   draggable.addEventListener('dragend', () =gt; {  draggable.classList.remove('dragging');  console.log("dragend");  }); }); 

 * {  margin: 0;  padding: 0;  box-sizing: border-box; }  body {  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; }  header {  height: 8vh;  background-color: rgb(175, 175, 175);  display: flex;  align-items: center;  justify-content: space-between; }  header gt; h1 {  margin-left: 50px; }  main {  background-color: rgb(206, 234, 243);  display: flex;  justify-content: space-around;  }  .task-column {  background-color: lightcoral;  min-height: fit-content;  margin: 10px;  width: 400px;  display: flex;  flex-direction: column;  align-items: center;  border-radius: 10px; }  .task-column gt; * {  margin: 10px; }  .task {  background-color: white;  padding: 10px;  width: 90%;  border-radius: 10px;  cursor: move; }  .task-head {  display: flex;  justify-content: space-between;  align-items: center;  font-size: 1.1rem;  padding-bottom: 10px;  margin-bottom: 10px;  border-bottom: solid black 1px; }  .delete-task {  background-color: red;  border: none;  height: 30px;  width: 30px;  border: solid black 1px;  border-radius: 50%;  font-size: 1.1rem;  font-weight: bold; }  .add-to-do {  margin-right: 50px;  padding: 15px 30px;  border-radius: 10px;  border: solid black 1px;  background-color: rgb(140, 233, 2);  font-size: 1.1rem;  font-weight: bold;  transition: ease-in-out 100ms; }  .add-to-do:hover {  transform: scale(110%); }  .add-to-do:active {  background-color: darkseagreen; }  .task.dragging {  opacity: 0.5; } 

 lt;!DOCTYPE htmlgt; lt;html lang="en"gt; lt;headgt;  lt;meta charset="UTF-8"gt;  lt;meta http-equiv="X-UA-Compatible" content="IE=edge"gt;  lt;meta name="viewport" content="width=device-width, initial-scale=1.0"gt;  lt;link rel="stylesheet" href="main.css"gt;  lt;titlegt;Planninglt;/titlegt; lt;/headgt; lt;bodygt;    lt;headergt;  lt;h1gt;planninglt;/h1gt;  lt;button id="new-to-do" class="add-to-do"gt;Add To Dolt;/buttongt;  lt;/headergt;   lt;maingt;  lt;div id="to-do-column" class="task-column"gt;  lt;h2gt;To Dolt;/h2gt;   lt;!-- example task --gt;  lt;div draggable="true" class="task"gt;  lt;div class="task-head"gt;  lt;h3gt;ExampleTasklt;/h3gt;  lt;button class="delete-task"gt;Xlt;/buttongt;  lt;/divgt;  lt;p class="task-description"gt;  This is an example  lt;/pgt;  lt;/divgt;    lt;/divgt;  lt;div id="in-progress-column" class="task-column"gt;  lt;h2gt;In Progresslt;/h2gt;  lt;/divgt;  lt;div id="complete-column" class="task-column"gt;  lt;h2gt;Completelt;/h2gt;  lt;/divgt;  lt;/maingt;   lt;script src="script.js"gt;lt;/scriptgt; lt;/bodygt; lt;/htmlgt;