Compare commits
7 Commits
2990452b3b
...
webpage
| Author | SHA1 | Date | |
|---|---|---|---|
|
ed7efdcaa3 | ||
|
|
3ba7d94441 | ||
|
|
37207cff97 | ||
|
|
bb16421a87 | ||
|
|
45b4e0a106 | ||
|
|
bc8a3c2090 | ||
|
|
2737ea0054 |
@@ -7,8 +7,98 @@
|
|||||||
<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 class="layer-0">
|
||||||
<h1>CodeList</h1>
|
<div class="layer-1 content">
|
||||||
<script src="index.js"></script>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
54
public/style.css
Normal file
54
public/style.css
Normal file
@@ -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;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user