title: What is the easiest way to change the JS code so that when I insert an entry separated with a comma it will display them as separate listings?
body: <ol>
  <li>In this application, you’ll make an enhancement that allows you to enter multiple tasks separated by commas in a single entry. </li>
  <li>Run the application and add two tasks, separated by a comma. Note that the tasks are stored as one task, exactly as you entered it.</li>
  <li>In the JavaScript file, find the code in the addToTaskList function that adds the task entered by the user to the tasks array. Comment out that code, and replace it with code that works for one task in an entry and also for more than one task in an entry.</li>
  </ol>
  
  <p><a href="https://i.stack.imgur.com/m04G8.png" rel="nofollow noreferrer">Picture of the problem</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>"use strict";
  var $ = function(id) { return document.getElementById(id); };
  
  var tasks = [];
  
  var displayTaskList = function() {
      var list = "";
      // if there are no tasks in tasks array, check storage
      if (tasks.length === 0) {
          // get tasks from storage or empty string if nothing in storage
          var storage = localStorage.getItem("tasks") || "";
          // if not empty, convert to array and store in global tasks variable
          if (storage.length &gt; 0) {
            tasks = storage.split("|");
          }
      }
      // if there are tasks in array, sort and create tasks string
      if (tasks.length &gt; 0) {
          tasks.sort();
          list = tasks.join("\n");
      }
      // display tasks string and set focus on task text box
      $("task_list").value = list;
      $("task").focus();
  };
  
  var addToTaskList = function() {
      var task = $("task");
      if (task.value === "") {
          alert("Please enter a task.");
      } else {
          // add task to array and local storage
          tasks.push(task.value);
          localStorage.tasks = tasks.join("|");
          // clear task text box and re-display tasks
          task.value = "";
          displayTaskList();
      }
  };
  
  // add task to array and local storage
  if(task.value.indexOf(',') == -1 ){
    tasks.push(task.value);
  }
  localStorage.tasks = tasks.join("|");
          // clear task text box and re-display tasks
          task.value = "";
          displayTaskList();
      }
  };
  
  var clearTaskList = function() {
      tasks.length = 0;
      localStorage.tasks = "";
      $("task_list").value = "";
      $("task").focus();
  };
  
  window.onload = function() {
      $("add_task").onclick = addToTaskList;
      $("clear_tasks").onclick = clearTaskList;
      displayTaskList();
  };</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 100%;
      background-color: white;
      width: 700px;
      margin: 0 auto;
      border: 3px solid blue;
   padding: 0 2em 1em;
  }
  h1 { 
      font-size: 150%;
      color: blue;
      margin-bottom: .5em;
  }
  label {
      float: left;
      width: 8em;
  }
  input {
      width: 22em;
      margin-right: 1em;
      margin-bottom: 1em;
  }
  #tasks {
      margin-top: 0;
      float: right;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Ch09 Task Manager&lt;/title&gt;
      &lt;link type="text/css" rel="stylesheet" href="task_list.css"&gt;
      &lt;script type="text/javascript" src="task_list.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;main&gt;
      &lt;h1&gt;Task Manager&lt;/h1&gt;
      &lt;div id="tasks"&gt;
          &lt;label for="tasks"&gt;Task List&lt;/label&gt;&lt;br&gt;
          &lt;textarea id="task_list" rows="6" cols="50"&gt;&lt;/textarea&gt;
      &lt;/div&gt;
  
      &lt;label for="task"&gt;Task&lt;/label&gt;&lt;br&gt;
      &lt;input type="text" name="task" id="task"&gt;&lt;br&gt;
  
      &lt;input type="button" name="add_task" id="add_task" value="Add Task"&gt;&lt;br&gt;
      &lt;input type="button" name="clear_tasks" id="clear_tasks" value="Clear Tasks"&gt;
    &lt;/main&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>