Playground partial

Author: slowcheetah

web/src/js/sandbox.js

@@ -5,6 +5,8 @@ hljs.registerLanguage('javascript', javascript);
 
 const codeInput = document.querySelector('#code-input');
 const codeOutput = document.querySelector('#code-output');
+const runButton = document.querySelector('.run-button');
+const resultBlock = document.querySelector('.result');
 
 codeOutput.textContent = codeInput.value;
 hljs.highlightElement(codeOutput);
@@ -32,4 +34,20 @@ const resizeObserver = new ResizeObserver((entries) => {
   }
 });
 
+// const originalConsoleLog = console.log;
+console.log = function (...args) {
+  args.forEach(function (arg) {
+    resultBlock.innerHTML += `<div class="console-log">${arg}</div>`;
+  });
+}
+runButton.addEventListener('click', (event) => {
+  resultBlock.innerHTML = '';
+  const code = codeInput.value;
+  try {
+    Function(code)();
+  } catch (e) {
+    console.log(e);
+  }
+})
+
 resizeObserver.observe(codeInput);

web/src/sandbox.html

@@ -51,9 +51,15 @@
 <main>
     <div class="main box">
         <h1>Sandbox</h1>
-        <div class="editor">
-            <textarea id="code-input" class="input" spellcheck="false"></textarea>
-            <div id="code-output" class="output language-javascript"></div>
+        <div class="sandbox-wrapper">
+            <div class="editor">
+                <textarea id="code-input" class="input" spellcheck="false"></textarea>
+                <div id="code-output" class="output language-javascript"></div>
+            </div>
+            <div class="result"></div>
+        </div>
+        <div>
+            <button class="run-button">Run</button>
         </div>
     </div>
 </main>

web/src/scss/includes/forms.scss

@@ -2,16 +2,18 @@
 
 button {
     background-color: $button-color;
-    border: none;
-    border-radius: 1rem;
+    border: 1px solid $button-color;
+    border-radius: 0.5rem;
     cursor: pointer;
     padding: 1rem;
 
     font-weight: 600;
-    color: $font-color;
+    color: $font-color-dark;
 
     &:hover {
         background-color: $button-color-hover;
+        border-color: $font-color;
+        color: $font-color;
     }
 
     &.big {

web/src/scss/includes/theme.scss

@@ -3,9 +3,10 @@
 
 $font-color: $foreground;
 $font-color-light: $white;
+$font-color-dark: $dark;
 
-$button-color: $green;
-$button-color-hover: $green;
+$button-color: $foreground;
+$button-color-hover: $selection;
 
 $box-color: $bg;
 $box-light: $selection;

web/src/scss/parts/editor.scss

@@ -1,42 +1,54 @@
 @use "../includes/variables" as *;
 @use "../includes/mixins" as *;
 
-.editor {
-  position: relative;
-  height: 30rem;
-  padding: 0;
-  border: none;
+.sandbox-wrapper {
+  display: flex;
+  gap: 1rem;
   margin: 2rem 0;
 
-  .input, .output {
-    box-sizing: border-box;
-    position: absolute;
-    height: 100%;
-    width: 90%;
+  .editor {
+    position: relative;
+    flex-basis: 800px;
+    flex-grow: 1;
 
-    font-family: monospace;
-    padding: 0.5em;
+    height: 30rem;
+    padding: 0;
     border: none;
-    font-size: 0.85rem;
-    line-height: 1.375rem;
-    white-space: pre;
-    word-wrap: break-word;
-    overflow: auto;
-
-    scrollbar-color: $secondary $highlight;
-    scrollbar-width: thin;
-  }
 
-  .input {
-    z-index: 1;
-    color: transparent;
-    caret-color: $foreground;
-    background-color: transparent;
-  }
+    .input, .output {
+      box-sizing: border-box;
+      position: absolute;
+      height: 100%;
+      width: 100%;
+
+      font-family: monospace;
+      padding: 0.5em;
+      border: none;
+      font-size: 0.85rem;
+      line-height: 1.375rem;
+      white-space: pre;
+      word-wrap: break-word;
+      overflow: auto;
 
-  .output {
-    z-index: 0;
-    background-color: $bg;
-    padding-bottom: 7px;
+      scrollbar-color: $secondary $highlight;
+      scrollbar-width: thin;
+    }
+
+    .input {
+      z-index: 1;
+      color: transparent;
+      caret-color: $foreground;
+      background-color: transparent;
+    }
+
+    .output {
+      z-index: 0;
+      background-color: $bg;
+      padding-bottom: 7px;
+    }
+  }
+  .result {
+    flex-basis: 400px;
+    flex-shrink: 0;
   }
 }