title: Creating a task list with pure js and moving items up and down
body: <p>I am developing A tasks list app with pure js. I am trying to add a functionality that help user to move tasks up and down. User shold be able to move a particular task one step up or down when they click on the certain button. I can do this with jquery but have no idea about how to do this with pure js. Here is the <a href="https://jsfiddle.net/vrLLd2cb/" rel="nofollow"><strong>DEMO</strong></a> </p>
  
  <p>Could someone please help me and how can i improve the quality of my code</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="task-list-app"&gt;
  
          &lt;header class="main-header"&gt;
              &lt;h1&gt;Tasks list &lt;span class="version"&gt;&lt;/span&gt;&lt;/h1&gt;
  
          &lt;/header&gt;
  
          &lt;section class="main-section"&gt;
  
              &lt;div&gt;
                  &lt;input type="text"  id="add-new-task" name="add-new-task" placeholder="Type task name and hit Enter "&gt;
              &lt;/div&gt;
  
             &lt;ul id="tasks-list"&gt;&lt;/ul&gt;
  
          &lt;/section&gt;
  
          &lt;div class="status-bar"&gt;
              &lt;span class="app-status"&gt;&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>function TaskList() {
      "use strict";
      var appVersion = '1.0.0v';
  
      function setAppStatus($status) {
  
          var $appStatusElm = document.querySelector(".app-status");
  
          $appStatusElm.textContent = $status;        
  
  
      }
  
      function addTask() {
  
          var $addNewTask = document.querySelector("#add-new-task");
  
          $addNewTask.addEventListener("keypress", function (e) {
  
  
  
              if (e.which == 13) {
                  var taskName = this.value;
  
                  appendNewTask(taskName);
  
                  this.value = '';
              }
  
              return false;
  
          });
  
  
      }
  
      function appendNewTask (taskName) {
  
          var $taskList = document.querySelector("#tasks-list");
          var $taskElm = document.createElement("li");
          var $btnsWrapper = document.createElement("div");
          var $deleteBtn = document.createElement('a');        
          var $moveUpBtn = document.createElement('a');       
          var $moveDownBtn = document.createElement('a');
          var $taskNameElm = document.createElement('span');
          var hrefAttr = document.createAttribute("href");
          var buttons = [];
  
          hrefAttr.nodeValue ="#";
  
          $taskElm.appendChild($taskNameElm);        
          $taskNameElm.textContent = taskName;        
          $taskList.appendChild($taskElm);
          $taskElm.appendChild($btnsWrapper);
  
          setTimeout(function () {
              $taskElm.classList.add("remove-border");
          }, 300);
  
  
          $deleteBtn.textContent = "Delete";        
          var $deleteBtnHref = hrefAttr.cloneNode(true);
          $deleteBtn.setAttributeNode($deleteBtnHref);
  
  
  
          $moveUpBtn.textContent = "Move up";  
          var $moveUpBtnHref = hrefAttr.cloneNode(true);
          $moveUpBtn.setAttributeNode($moveUpBtnHref);
  
          $moveDownBtn.textContent = "Move down";  
          var $moveDownBtnHref = hrefAttr.cloneNode(true);
          $moveDownBtn.setAttributeNode($moveDownBtnHref);
  
          buttons = [$deleteBtn, $moveDownBtn, $moveUpBtn];
  
          buttons.forEach(function (btn) {
              $taskElm.querySelector('div').appendChild(btn);
          });
  
          $deleteBtn.addEventListener('click', function (e) {
              e.path[3].removeChild(e.path[2]);
              setAppStatus("Task " + taskName + " has been removed");
          })
  
          setAppStatus("Task " + taskName + " has been recorded");
  
      }
  
      this.start = function () {
          var $versionElm = document.querySelector(".main-header  .version");
  
  
          $versionElm.textContent = appVersion;
  
          addTask();
  
          setAppStatus("Ready To Use");
  
      };
  }
  
  
  var app = new TaskList();
  app.start();
  </code></pre>