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 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>
@@ -27,10 +27,6 @@
Output Output
</h3> </h3>
<div> <div>
<div>
<label for="checkbox-read-only">Read-only?</label>
<input id="checkbox-read-only" type="checkbox">
</div>
<div id="output"> <div id="output">
<div id="gutter"></div> <div id="gutter"></div>
<div contenteditable="true" id="output-area" class="output-area"></div> <div contenteditable="true" id="output-area" class="output-area"></div>
@@ -39,7 +35,6 @@
</div> </div>
<script> <script>
const readOnlyCheckbox = document.getElementById("checkbox-read-only");
const gutter = document.getElementById("gutter"); const gutter = document.getElementById("gutter");
const outputArea = document.getElementById("output-area"); const outputArea = document.getElementById("output-area");
@@ -53,10 +48,6 @@
return outputArea.children.length; return outputArea.children.length;
} }
readOnlyCheckbox.addEventListener("change", (event) => {
outputArea.readOnly = readOnlyCheckbox.checked;
})
function updateGutterLineCount() { // TODO: Refactor so its not slow when theres more function updateGutterLineCount() { // TODO: Refactor so its not slow when theres more
gutter.innerHTML = "" gutter.innerHTML = ""
console.log("update gutter line count") 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;
}