Improve Styling

Remove redundant div. Fix css
Add strikout functionality.
2026-06-01 21:29:56 +01:00 · 2026-05-31 15:59:49 +01:00 · 2026-05-31 15:17:37 +01:00 · 2026-05-31 14:29:51 +01:00 · 2026-05-31 14:15:53 +01:00 · 2026-05-31 13:34:22 +01:00
2 changed files with 147 additions and 3 deletions
--- a/public/index.html
+++ b/public/index.html
@@ -7,8 +7,98 @@
    <title>HTML 5 Boilerplate</title>
    <link rel="stylesheet" href="style.css">
  </head>
-  <body>
+  <body class="layer-0">
+    <div class="layer-1 content">
      <h1>CodeList</h1>
-    <script src="index.js"></script>
+      <div>
+        <h3>Generate new list</h3>
+          <div>
+            <label for="input-length">
+              Code Length (<i>n</i>)
+            </label>
+            <input id="input-length" placeholder="4" min="1" type="number">
+          </div>
+          <div>
+            <label>Character Set (<i>Σ</i>) <span title="Input comma seperated values. For example `1, 3, 6, 8` means that the code has 1, 3, 6, and 8 in it.">ⓘ</span></label>
+            <input id="input-char-set" placeholder="1, 2, 3, 4" min="1" type="text">
+          </div>
+      </div>
+      <div>
+        <h3>
+          Output
+        </h3>
+        <div id="output">
+          <div id="output-area" class="output-area"></div>
+        </div>
+      </div>
+        
+    </div>
+
+    <script>
+
+      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
+
+      function getLineCount() {
+        if (outputArea.children.length === 0) {
+          return 1
+        }
+        return outputArea.children.length;
+      }
+
+      /**
+       * Sets the rows to the output
+       * @param {string[]} codes - The array of codes to set the output to
+       */ 
+      function setRows(codes) {
+        for (let i = 0; i < codes.length; i++) {
+          appendRow(codes[i], i+1)
+        }
+
+      }
+
+      function appendRow(code, lineNumber) {
+
+        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(["0123","4567","89Aa","BbCC","DdEe"])
+    </script>
  </body>
 </html>
--- a/public/style.css
+++ b/public/style.css
@@ -0,0 +1,54 @@
+body {
+    font-family: sans-serif;
+}
+
+.layer-0 {
+    background-color: #F2F4F6;
+}
+
+.layer-1 {
+    background-color: #F7F9FB;
+}
+
+.content {
+    padding-left: 2rem;
+    padding-right: 2rem;
+
+    margin-left: 1rem;
+    margin-right: 1rem;
+    border: 1px solid #dcd9e5;
+    border-radius: .5rem;
+}
+
+#output-area {
+    border-right: 2px solid #DCDBE6;
+    border-top: 1px solid #DCDBE6;
+    border-bottom: 1px solid #DCDBE6;
+    border-left: 1px solid #DCDBE6;
+    /* border-radius: .5rem; */
+
+    width: 30ch;
+
+    font-family: 'Courier New', Courier, monospace;
+}
+
+.gutter-row {
+    background-color: #F2F4F6;
+    height: 4ch;
+    padding-right: 0.4rem;
+    padding-left: 2rem;
+}
+
+.output-row {
+    display: flex;
+    background-color: white;
+}
+
+.strike {
+    text-decoration: line-through;
+}
+
+.content-row {
+    padding-top: 0.1rem;
+    padding-left: .5rem;
+}
Author	SHA1	Message	Date
CentreMetre	ed7efdcaa3	Improve Styling	2026-06-01 21:29:56 +01:00
CentreMetre	3ba7d94441	Remove redundant div. Fix css	2026-05-31 15:59:49 +01:00
CentreMetre	37207cff97	Add strikout functionality.	2026-05-31 15:17:37 +01:00
CentreMetre	bb16421a87	Start styling output box. Remove readonly.	2026-05-31 14:29:51 +01:00
CentreMetre	45b4e0a106	Fix to use contenteditable div for individual line styling	2026-05-31 14:15:53 +01:00
CentreMetre	bc8a3c2090	Add output. Add gutter lines and checkboxes.	2026-05-31 13:34:22 +01:00
CentreMetre	2737ea0054	Create inputs for char set and code length.	2026-05-31 10:21:01 +01:00