feat: #9 input and output editor areas side by side

Author: thescientist13

src/index.html

@@ -30,11 +30,23 @@
     <!-- <script type="module" src="./scripts/editor.ts"></script> -->
 
     <style>
+      #playground-container {
+        display: flex;
+        gap: 2%;
+        width: 100%;
+        height: 80vh;
+      }
+
       #input-container,
       #output-container {
-        width: 48%;
+        flex: 1;
+        width: 100%;
+      }
+
+      #input-content,
+      #output-content {
+        width: 100%;
         height: 100%;
-        display: inline-block;
       }
     </style>
   </head>
@@ -43,11 +55,17 @@
 
     <h1>WCC Playground</h1>
 
-    <h2>Input</h2>
-    <div id="input-container"></div>
+    <div id="playground-container">
+      <div id="input-container">
+        <h2>Input</h2>
+        <div id="input-content"></div>
+      </div>
 
-    <h2>Output</h2>
-    <div id="output-container"></div>
+      <div id="output-container">
+        <h2>Output</h2>
+        <div id="output-content"></div>
+      </div>
+    </div>
 
     <wcc-footer></wcc-footer>
   </body>

src/scripts/repl-init.ts

@@ -1,7 +1,7 @@
 import * as monaco from "monaco-editor/esm/vs/editor/editor.main.js";
 
-const inputContainer = document.getElementById("input-container") as HTMLDivElement;
-const outputContainer = document.getElementById("output-container") as HTMLDivElement;
+const inputContainer = document.getElementById("input-content") as HTMLDivElement;
+const outputContainer = document.getElementById("output-content") as HTMLDivElement;
 const workerUrl = new URL("./repl.ts", import.meta.url);
 const worker = new Worker(workerUrl, { type: "module" });
 
@@ -17,7 +17,7 @@ const inputContents = `
     </style>
 
     <footer class="footer">
-      <h4>My Blog &copy; ${new Date().getFullYear()}</h4>
+      <h4>My Blog &copy; \${new Date().getFullYear()}</h4>
     </footer>
   \`;