Clear table when uploading new bom

src/bom2table.js

@@ -11,6 +11,10 @@ function isJunk(element) {
   return !rejectedParts.includes(element.Part);
 }
 
+function clearTable() {
+  document.querySelector('table').innerHTML = '';
+}
+
 function generateTableHead(table, data) {
   const thead = table.createTHead();
   const row = thead.insertRow();
@@ -38,8 +42,7 @@ function generateTableBody(table, data) {
 function displayMarkup() {
   const tableCode = document.querySelector('table').outerHTML;
   const markup = document.getElementById('markup');
-  const beautifulCode = pretty(tableCode);
-  markup.innerText = beautifulCode;
+  markup.innerText = pretty(tableCode);
 }
 
 function makeTable(csvString) {
@@ -62,10 +65,14 @@ function makeTable(csvString) {
 }
 
 function handleFiles() {
+
   const csvFilePath = this.files[0];
   const reader = new FileReader();
   reader.readAsText(csvFilePath);
-  reader.onload = () => makeTable(reader.result);
+  reader.onload = () => {
+    clearTable();
+    makeTable(reader.result);
+  };
 }
 
 const csvPicker = document.getElementById('csvFile');

src/index.html

@@ -20,7 +20,7 @@
       <section>
         <h2>Table HTML</h2>
         <!-- <textarea id="markup" cols="30" rows="10"></textarea> -->
-        <pre><code id="markup" class="language-html"></code></pre>
+        <pre contenteditable=""><code id="markup" class="language-html"></code></pre>
       </section>
     </main>
 

src/style.css

@@ -1,7 +1,7 @@
 header {
   margin: 1.5rem;
 }
-header h1 {
+header h1, h2 {
   text-align: center;
 }
 main {
@@ -10,9 +10,9 @@ main {
   flex-flow: wrap;
   min-width: 500px;
   max-width: 80vw;
-  justify-content: space-evenly;
+  justify-content: space-between;
 }
 
 section {
-  flex 0 0 50%;
+  flex: 0 0 45%;
 }