ToDoApp

you should set "Load Type" to "No wrap - bottom of head" in order to have the code work.

by shahryar saljoughi

HTML

<!DOCTYPE html>
<html lang="fa">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="styles.css" rel="stylesheet" type="text/css">
  <script  src='scripts/mainScript.js' type="text/javascript"></script>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
  <title>کارات</title>
</head>
<body>

  <div class="trash" ondragover="allowDrop(event)" ondrop="drop(event)">
    <i class="far fa-trash-alt"></i>
  </div>
  <div class="createNew" onclick="showModal()">
    <i class="fas fa-plus-circle"></i>
  </div>
 
  
  <div class="items-container" id="todoList">

  </div>
 

  <div class="modal">
    <div class="modal-content">
      <input type="text" id="descriptionInput">
      <button onclick="addItem()">اضافه کن</button>
    </div>
  </div>


</body>

</html>

CSS

* {
  box-sizing: border-box;
}
.items-container {
  display: flex;
  flex-direction: column;
  width: 50%;
  min-width: 400px;
  margin: auto;
  background-color: teal;
  border-radius: 5%;
}

.item {
  padding: 15px;
  background-color: rgba(240, 242, 247, 0.7);;
  margin: 20px;
  border-radius: 3%;
}

.createNew {
  display: inline-block;
  width: 50px;
  margin-bottom: 25px;
  margin-top: 50px;
  font-size: 50px;
  color: rgb(59, 141, 110);
  position: relative; 
  left: 50%;
  transform: translate(-50%, 0);
}
.trash {
  display: inline-block;
  border-style: dashed;
  border-width: 3px;
  font-size: 35px;
  width: 100px;
  height: 50px;
  color: rgba(255, 5, 5, 1);
  position: relative; 
  left: 50%;
  transform: translate(-50%, -15%);
  text-align: center;
}
.createNew :hover {
  color: rgb(59, 111, 141);
  cursor: pointer;
}

.modal {
  position: fixed;
  top: 0px;

  z-index: 1;
  background-color: rgba(5, 53, 53, 0.8);
  width: 100%;
  height: 100%;
  display: none;
}

.modal-content {
  background-color: whitesmoke;
  width: 400px;
  margin: 20% auto;
  border-style: solid;
  border-width: 5px;
}
.modal-content input, .modal-content button {
  display: block;
  width: 90%;
  margin: 10px auto;
  padding: 10px;
}

JavaScript

function uuidv4() {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
    var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
    return v.toString(16);
  });
}

class Task {
  constructor(description, deadline, order) {
    this.description = description;
    this._deadline = deadline;
    this.id = uuidv4();
  }
  get deadline() {   }
  set deadline(value) {   }
}

let items = [];
function addItem(description=document.getElementById("descriptionInput").value) {
  let item= new Task(description)
  items.push(item);
  renderItemOnPage(item);
}

function renderItemOnPage(item) {
  let container = document.getElementById("todoList");
  let newItemDiv = document.createElement("div");
  newItemDiv.classList += "item";
  newItemDiv.setAttribute("id", item.id)
  newItemDiv.innerText = item.description;
  newItemDiv.setAttribute("draggable", "true");
  newItemDiv.setAttribute("ondragstart", "drag(event)");
  container.appendChild(newItemDiv);

}

window.onclick = function(event) {
  let modal = document.getElementsByClassName("modal")[0];
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

function showModal() {
  document.getElementsByClassName("modal")[0].style.display = "block";
}


function drag(ev) {
  ev.dataTransfer.setData("item_id", ev.target.id);
}

function allowDrop(ev) {
  ev.preventDefault();
}

function drop(event) {
  event.preventDefault();
  let item_id = event.dataTransfer.getData("item_id");
  let node = document.getElementById(item_id);
  node.parentElement.removeChild(node);
  removeFromArray(item_id)
}

function removeFromArray(item_id) {
  let index = items.findIndex(x => x.id === item_id);
  if (index > -1) {
    items.splice(index, 1);
  }
}