105 lines
2.9 KiB
HTML
105 lines
2.9 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 class="layer-0">
|
|
<div class="layer-1 content">
|
|
<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 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>
|