title: How to make a JavaScript To-Do list with keydown Function
body: <p>I am attempting to make a JavaScript To-Do list app with an Array, push method, removeChild method, and a keydown function. I want the user to be able to use both the add button and the enter key to enter input. I succeeded in making an app that ultimately has 2 functions with 2 similar sets of variables and DOM methods: one for add button and another for keydown function (when the user hits enter after adding input). This setup seems to work fine. However, I would like to know if it is possible to create a ONE function that facilitates both the Add button AND the keydown function with one set of DOM methods. If so, could someone please provide a potential demo? Thanks!</p>
  
  <p>(The following demo contains Bootstrap classes)</p>
  
  <p>JS:</p>
  
  <pre><code>var array = [];
  
  function add() {
    var task = document.getElementById("task").value;
    array.push(task);
    var text = document.createTextNode(task);
    var li = document.createElement("li");
    var btn = document.createElement("button");
    btn.appendChild(document.createTextNode("x"));
    btn.setAttribute("onclick", "remove()");
    btn.setAttribute("class", "btn-primary btn-sm newBtn");
    li.appendChild(text);
    li.appendChild(btn);
    document.getElementById("myUl").appendChild(li);
  }
  
  function remove() {
    var task = this.event.currentTarget.parentNode;
    document.getElementById("myUl").removeChild(task);
  }
  
  document.getElementById("task").addEventListener("keydown", function(event) {
    if (event.which == 13) {
      var task2 = document.getElementById("task").value;
      array.push(task2);
      var text2 = document.createTextNode(task2);
      var li2 = document.createElement("li");
      var btn2 = document.createElement("button");
      btn2.appendChild(document.createTextNode("x"));
      btn2.setAttribute("onclick", "remove()");
      btn2.setAttribute("class", "btn-primary btn-sm newBtn");
      li2.appendChild(text2);
      li2.appendChild(btn2);
      document.getElementById("myUl").appendChild(li2);
    }
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="mainDiv"&gt;
    &lt;input id="task" class="input-lg"&gt;
    &lt;button id="inputBtn" class="btn-primary btn-lg" onclick="add()"&gt;add&lt;/button&gt;
  &lt;/div&gt;
  &lt;ul id="myUl"&gt;&lt;/ul&gt;
  </code></pre>