title: Creating Html table from array (Using prompt)
body: <p>I am new to Html. This is my first html javascript program and I have an issue with it. </p>
  
  <p>A user puts his/her gpa CS102 A 3, Math101 B 3. Then, I put the data into an Array. The problem is when I create the table. I want to create a table like</p>
  
  <pre><code>THL100  B+  3
  PHL107  A   3
  ENG120  C+  3
  MTH245  A   4
  CSC221  A   3
  </code></pre>
  
  <p>What kind of loop I should use? I tried to use a <code>for</code> loop but it just doesn't work.</p>
  
  <p>Here is my code:</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>function load(){
      var data = [];
      while(true) {
          line = prompt("Enter course name, grade, and credit hours or click OK with no data to terminate");
          if(line == null || line == "") {
              break;
          }
          var values = line.split(/\s/);
          var citem = values[0];
          data.push(citem);
  
          var gpa = parseFloat(values[1]);
          var cgpa = [gpa];
          data.push(cgpa);
          var unit = values[2];
          var cunit = [unit];
          data.push(cunit);
      }
      return data;
  }
  
  function display(data) {
      var table=document.getElementById('result');
      table.innerHTML= "&lt;tr&gt;&lt;th&gt; COURSE &lt;/th&gt;&lt;th&gt; GRADE &lt;/th&gt;&lt;th&gt; HOURS &lt;/th&gt;&lt;/tr&gt;";
  
      for(var i in data){
          table.innerHTML +="&lt;tr&gt;&lt;td&gt;" + data[i] + "&lt;/td&gt;&lt;td&gt;" + data[i]+1 + "&lt;/td&gt;&lt;td&gt;" + data[i]+2 + "&lt;/td&gt;&lt;/tr&gt;";
      }
  }
  data = load();
  display(data);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table id="result" border="1px" class="classy"&gt;
  &lt;/table&gt;
  &lt;span id="text"&gt;&lt;/span&gt;</code></pre>
  </div>
  </div>
  </p>