91 lines
2.7 KiB
HTML
91 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<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"> -->
|
|
</head>
|
|
<body>
|
|
<h1>CodeList</h1>
|
|
<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>
|
|
<div>
|
|
<label for="checkbox-read-only">Read-only?</label>
|
|
<input id="checkbox-read-only" type="checkbox">
|
|
</div>
|
|
<div id="output">
|
|
<div id="gutter"></div>
|
|
<div contenteditable="true" id="output-area" class="output-area"></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 = 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;
|
|
}
|
|
|
|
readOnlyCheckbox.addEventListener("change", (event) => {
|
|
outputArea.readOnly = readOnlyCheckbox.checked;
|
|
})
|
|
|
|
function updateGutterLineCount() { // TODO: Refactor so its not slow when theres more
|
|
gutter.innerHTML = ""
|
|
console.log("update gutter line count")
|
|
|
|
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>
|