title: To Do List with priorities in JavaScript
body: <p>I am working on a T- Do list in JavaScript. It adds a new task to the list with delete and complete buttons. When the complete button is clicked, the task will be marked in red. There is also a tasks counter on the top and a remove all tasks button on the bottom. All of these features work fine. But I would like the tasks to be added based on the priority given. Priority should be an integer between 1 and 10, where 10 is top priority and 1 is least. Unfortunately, the code I wrote for that part doesn't seem to be working. I added a new variable called index that stores info where the new item should be added. Can you help me find out which part of the code has to be changed? Here it is:</p>
  
  <pre><code> document.addEventListener("DOMContentLoaded", function () {
       var add = document.getElementById("addTaskButton");
       var removeFinished = document.getElementById("removeFinishedTasksButton");
       var task = document.getElementById("taskInput");
       var list = document.getElementById("taskList");
       var body = document.querySelector("body");
       var prior = document.getElementById("taskPriority");
  
       //To do counter
       var toDo = document.createElement("span");
       body.insertBefore(toDo, list);
       var allTasks = document.querySelectorAll("li");
       var counter = allTasks.length;
       toDo.innerHTML = "Tasks to do: " + counter;
       //Add task
       add.addEventListener("click", function () {
           if (task.value.length &gt;= 5 &amp;&amp;
           task.value.length &lt;= 100 &amp;&amp;
           prior.value &gt; 0 &amp;&amp;
           prior.value &lt;= 10) {
  
       //Add task to the list
          var newTask = document.createElement("li");
          newTask.dataset.priority = prior.value;
          var all = document.querySelectorAll("li");
  
          for (var i = 0; i &lt; all.length; i++) {
              var index = all.length;
              if (parseInt(newTask.dataset.priority) &lt; parseInt(all[i].dataset.priority)) {
                  index = i;
                  break;
              }
          }
  
          list.insertBefore(newTask, list[index]);
  
          var taskName = document.createElement("h1");
          newTask.appendChild(taskName);
          taskName.innerHTML = task.value;
  
          //Add delete button
          var delBtn = document.createElement("button");
          newTask.appendChild(delBtn);
          delBtn.innerHTML = "Delete";
          delBtn.classList.add("delete");
  
          //Add complete button
          var complBtn = document.createElement("button");
          newTask.appendChild(complBtn);
          complBtn.innerHTML = "Complete";
          complBtn.classList.add("complete");
  
          counter++;
          toDo.innerHTML = "Tasks to do: " + counter;
  
          //Mark completed in red and adjust counter
          complBtn.addEventListener("click", function () {
              if (this.parentElement.style.color === "") {
                  this.parentElement.style.color = "red";
                  this.parentElement.setAttribute("done", "yes");
                  counter--;
                  toDo.innerHTML = "Tasks to do: " + counter;
              } else if (this.parentElement.style.color === "red") {
                  this.parentElement.style.color = "";
                  this.parentElement.removeAttribute("done");
                  counter++;
                  toDo.innerHTML = "Tasks to do: " + counter;
              }
          });
  
          //Delete selected item and adjust counter
          delBtn.addEventListener("click", function () {
              this.parentElement.parentNode.removeChild(this.parentElement);
              counter--;
              toDo.innerHTML = "Tasks to do: " + counter;
          });
  
          task.value = "";
          prior.value = "";
  
      } else {
          event.preventDefault();
          alert("Task should have from 5 to 100 characters. Priority should be an integer between 1 and 10");
      }
  });
  
  //Remove completed items
  removeFinished.addEventListener("click", function () {
      var tasks = document.querySelectorAll("li");
      for (var i = 0; i &lt; tasks.length; i++) {
          if (tasks[i].hasAttribute("done")) {
              tasks[i].parentNode.removeChild(tasks[i]);
          }
      }
  });
  
  });
  </code></pre>
  
  <p>And here is the HTML:</p>
  
  <pre><code>&lt;body&gt;
  
      &lt;input id="taskInput" placeholder="Place your task here"&gt;&lt;br&gt;
      &lt;input id="taskPriority" placeholder="Place task priority (1-10)"&gt;&lt;br&gt;
      &lt;button id="addTaskButton"&gt;Add task&lt;/button&gt;
  
      &lt;ul id="taskList"&gt;
  
      &lt;/ul&gt;
  
      &lt;button id="removeFinishedTasksButton"&gt;Remove finished tasks&lt;/button&gt;
  
   &lt;/body&gt;
  </code></pre>