Add strikout functionality.

public/index.html

@@ -28,15 +28,13 @@
       </h3>
       <div>
         <div id="output">
-          <div id="gutter"></div>
+          <div id="output-area" class="output-area"></div>
-          <div contenteditable="true" id="output-area" class="output-area"></div>
         </div>
       </div>
     </div>
 
     <script>
 
-      const gutter = document.getElementById("gutter");
       const outputArea = document.getElementById("output-area");
 
       let lineCount = getLineCount(); // 1 by default even though theres no \n because its splits by \n so its just 1 line
@@ -48,34 +46,58 @@
         return outputArea.children.length;
       }
 
-      function updateGutterLineCount() { // TODO: Refactor so its not slow when theres more
+      /**
-        gutter.innerHTML = ""
+       * Sets the rows to the output
-        console.log("update gutter line count")
+       * @param {string[]} codes - The array of codes to set the output to
-
+       */ 
-        for (let i = 0; i < lineCount; i++) {
+      function setRows(codes) {
-
+        for (let i = 0; i < codes.length; i++) {
-          const gutterRow = document.createElement("div")
+          appendRow(codes[i], i+1)
-          gutterRow.className = "gutter-row"
-
-          const checkbox = document.createElement("input")
-          checkbox.type = "checkbox"
-
-          const lineNumber = document.createElement("span")
-          lineNumber.textContent = i+1
-          
-          gutterRow.append(checkbox, lineNumber)
-          
-          gutter.append(gutterRow)
         }
-        console.log(lineCount)
+
       }
 
-      outputArea.addEventListener("input", (event) => {
+      function appendRow(code, lineNumber) {
-        lineCount = getLineCount()
-        updateGutterLineCount()
-      });
 
-      updateGutterLineCount()
+        const row = document.createElement("div")
+        row.classList.add("output-row")
+
+        /**
+         * GUTTER
+         * **/
+        const gutterRow = document.createElement("div")
+        gutterRow.classList.add("gutter-row")
+
+        const gutterCheckBox = document.createElement("input")
+        gutterCheckBox.type = "checkbox"
+        gutterCheckBox.dataset.lineNumber = lineNumber
+
+
+        const gutterNumber = document.createElement("span")
+        gutterNumber.textContent = lineNumber
+
+        gutterRow.append(gutterCheckBox, gutterNumber)
+
+        /**
+         * OUTPUT
+         * **/
+
+        const contentRow = document.createElement("div")
+        contentRow.classList.add("content-row")
+        contentRow.dataset.lineNumber = lineNumber
+        contentRow.textContent = code
+
+        gutterCheckBox.addEventListener("change", (e) => {
+          console.log(`event line number: ${lineNumber}`)
+          contentRow.classList.toggle("strike")
+        })
+         
+        row.append(gutterRow, contentRow)
+
+        outputArea.append(row)
+      }
+
+      setRows(["1","2","3","4","5"])
     </script>
   </body>
 </html>

public/style.css

@@ -11,6 +11,10 @@
     background-color: rgb(230, 230, 230);
 }
 
-#output {
+#output-row {
     display: flex;
+}
+
+.strike {
+    text-decoration: line-through;
 }