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

Start styling output box. Remove readonly.

Browse Source
This commit is contained in:
CentreMetre
2026-05-31 14:29:51 +01:00
parent 45b4e0a106
commit bb16421a87
2 changed files with 17 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
public/index.html
View File

@@ -5,7 +5,7 @@
<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"> -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>CodeList</h1>
@@ -27,10 +27,6 @@
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>
@@ -39,7 +35,6 @@
</div>
<script>
const readOnlyCheckbox = document.getElementById("checkbox-read-only");
const gutter = document.getElementById("gutter");
const outputArea = document.getElementById("output-area");
@@ -53,10 +48,6 @@
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")

16
public/style.css Normal file
View File

@@ -0,0 +1,16 @@
#output-area {
border-right: 2px solid grey;
width: 30ch;
}
#output-area:focus {
outline: none;
}
#gutter {
background-color: rgb(230, 230, 230);
}
#output {
display: flex;
}