CentreMetre/CodeList
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Add output. Add gutter lines and checkboxes.

Browse Source
This commit is contained in:
CentreMetre
2026-05-31 13:34:22 +01:00
parent 2737ea0054
commit bc8a3c2090
1 changed files with 70 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
public/index.html
View File

@@ -5,23 +5,83 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML 5 Boilerplate</title> <title>HTML 5 Boilerplate</title>
<link rel="stylesheet" href="style.css"> <!-- <link rel="stylesheet" href="style.css"> -->
</head> </head>
<body> <body>
<h1>CodeList</h1> <h1>CodeList</h1>
<div> <div>
<h3>Generate new list</h3> <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> <div>
<h3>
Output
</h3>
<div> <div>
<label for="input-length"> <div>
Code Length (<i>n</i>) <label for="checkbox-read-only">Read-only?</label>
</label> <input id="checkbox-read-only" type="checkbox">
<input id="input-length" placeholder="4" min="1" type="number"> </div>
</div> <div id="output">
<div> <div id="gutter"></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> <textarea id="output-area" class="output-area"></textarea>
<input id="input-char-set" placeholder="1, 2, 3, 4" min="1" type="text"> </div>
</div> </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> </body>
</html> </html>