sfja/karlkoder-playground
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: sfja:f37bd3b7bd448cb7b5803d0ddf4a72a7d54aaf4e
Branches Tags
sfja:main
..
compare: sfja:7940cf70f433b95ec99e952e887000626d8c145a
Branches Tags
sfja:main

No commits in common. "f37bd3b7bd448cb7b5803d0ddf4a72a7d54aaf4e" and "7940cf70f433b95ec99e952e887000626d8c145a" have entirely different histories.
f37bd3b7bd ... 7940cf70f4

3 changed files with 10 additions and 12 deletions
Show Stats Expand all files Collapse all files

9
index.html
View File

@ -2,7 +2,10 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<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,chrome=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Karlkoder Playground</title> <title>Karlkoder Playground</title>
@ -60,10 +63,10 @@
<section> <section>
<div class="section-header">Output</div> <div class="section-header">Output</div>
<canvas id="canvas-area" width="480" height="360"></canvas> <canvas id="canvas-area"> </canvas>
</section> </section>
<section id="console-section"> <section>
<div class="section-header"> <div class="section-header">
Console Console
</div> </div>

3
index.js
View File

@ -62,8 +62,7 @@ editor.addEventListener("change", (ev) => {
runButton.onclick = (ev) => { runButton.onclick = (ev) => {
const code = editor.getValue(); const code = editor.getValue();
runCode(code, consoleCode); runCode(code, consoleCode);
runButton.textContent = "◼ Stop"; runButton.textContent = "⚙️ Running...";
runButton.classList.add("active");
}; };
function downloadFile(content, mime, extension) { function downloadFile(content, mime, extension) {

10
style.css
View File

@ -35,6 +35,7 @@ section {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: black; background-color: black;
overflow-y: auto;
} }
section canvas { section canvas {
@ -80,17 +81,13 @@ div#buttons > * > button {
#canvas-area { #canvas-area {
background-color: black; background-color: black;
} width: 480px;
height: 360px;
#console-section {
min-height: 0;
flex: 0 1 100%;
} }
#console { #console {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow-y: scroll;
} }
#console pre { #console pre {
@ -125,7 +122,6 @@ div#buttons > * > button {
#editor-area { #editor-area {
width: 100%; width: 100%;
overflow-y: auto;
} }
#editor { #editor {