Add output. Add gutter lines and checkboxes.

2026-05-31 13:34:22 +01:00
parent 2737ea0054
commit bc8a3c2090
1 changed files with 70 additions and 10 deletions
--- a/public/index.html
+++ b/public/index.html
@@ -5,13 +5,12 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML 5 Boilerplate</title>
-    <link rel="stylesheet" href="style.css">
+    <!-- <link rel="stylesheet" href="style.css"> -->
  </head>
  <body>
    <h1>CodeList</h1>
    <div>
      <h3>Generate new list</h3>
-    <div>
        <div>
          <label for="input-length">
            Code Length (<i>n</i>)
@@ -23,5 +22,66 @@
          <input id="input-char-set" placeholder="1, 2, 3, 4" min="1" type="text">
        </div>
    </div>
+    <div>
+      <h3>
+        Output
+      </h3>
+      <div>
+        <div>
+          <label for="checkbox-read-only">Read-only?</label>
+          <input id="checkbox-read-only" type="checkbox">
+        </div>
+        <div id="output">
+          <div id="gutter"></div>
+          <textarea id="output-area" class="output-area"></textarea>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      const readOnlyCheckbox = document.getElementById("checkbox-read-only");
+
+      const gutter = document.getElementById("gutter");
+      const outputArea = document.getElementById("output-area");
+
+      let lineCount = outputArea.value.split('\n').length; // 1 by default even though theres no \n because its splits by \n so its just 1 line
+
+      function getLineCount() {
+        return outputArea.value.split('\n').length;
+      }
+
+      readOnlyCheckbox.addEventListener("change", (event) => {
+        outputArea.readOnly = readOnlyCheckbox.checked;
+      })
+
+      function updateGutterLineCount() { // TODO: Refactor so its not slow when theres more
+        gutter.innerHTML = ""
+
+
+        for (let i = 0; i < lineCount; i++) {
+
+          const gutterRow = document.createElement("div")
+          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) => {
+        lineCount = getLineCount()
+        updateGutterLineCount()
+      });
+
+      updateGutterLineCount()
+    </script>
  </body>
 </html>