index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>JavaScript Playground</title>
    <style>
      :root {
        --primary-color: #007bff;
        --hover-color: #0056b3;
        --success-color: #28a745;
        --background-color: #f7f7f7;
        --container-bg: #fff;
        --border-color: #ddd;
        --text-color: #333;
        --input-bg: #f4f4f4;
        --font-family: "Arial", sans-serif;
      }

      body {
        font-family: var(--font-family);
        background-color: var(--background-color);
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        height: 100vh;
        box-sizing: border-box;
      }

      header {
        text-align: center;
        padding: 10px;
        width: 100%;
      }

      h1 {
        color: var(--text-color);
        font-size: clamp(1.5rem, 5vw, 2.5rem);
        margin: 0;
      }

      .container {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: stretch;
        max-width: 900px;
        margin: 0 auto;
        padding: 15px;
        background-color: var(--container-bg);
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        width: 100%;
        height: 100%; /* Ensures the container takes the full height */
        box-sizing: border-box;
      }

      textarea {
        width: 100%;
        height: 100px; /* Make textarea smaller initially */
        font-family: monospace;
        font-size: 16px;
        padding: 10px;
        border: 1px solid var(--border-color);
        border-radius: 4px;
        background-color: var(--input-bg);
        margin-bottom: 10px;
        resize: vertical; /* Allow vertical resizing */
        box-sizing: border-box;
        flex-grow: 1; /* Make it take available space */
      }

      button {
        width: 100%;
        padding: 10px;
        background-color: var(--primary-color);
        color: white;
        font-size: 16px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        box-sizing: border-box;
        transition: background-color 0.3s ease;
      }

      button:hover {
        background-color: var(--hover-color);
      }

      .output {
        margin-top: 10px;
        padding: 15px;
        background-color: var(--container-bg);
        border: 1px solid var(--border-color);
        border-radius: 4px;
        min-height: 80px; /* Increased minimum height for better visibility */
        font-family: monospace;
        font-size: 14px;
        white-space: pre-wrap;
        color: var(--text-color);
        overflow-y: auto;
        max-height: 200px; /* Increased max height for larger output */
        box-sizing: border-box;
      }

      .copy-btn {
        margin-top: 10px;
        background-color: var(--success-color);
        width: auto;
        padding: 8px 16px; /* Reduced padding for better sizing */
        font-size: 14px; /* Smaller font size */
        cursor: pointer;
      }

      @media (max-width: 768px) {
        .container {
          padding: 10px;
        }

        textarea {
          height: 120px; /* Slightly taller textarea for smaller devices */
        }

        h1 {
          font-size: clamp(
            1.5rem,
            8vw,
            2.5rem
          ); /* Larger header for small devices */
        }

        button {
          padding: 12px; /* Slightly larger buttons on mobile */
        }

        .output {
          max-height: 150px; /* Smaller output box for mobile */
        }

        .copy-btn {
          font-size: 12px; /* Even smaller button on mobile */
          padding: 6px 12px; /* Smaller button size */
        }
      }
    </style>
  </head>

  <body>
    <header>
      <h1>JavaScript Playground</h1>
    </header>

    <main class="container">
        <textarea id="jsCode" placeholder="Write your JavaScript code here..." aria-label="JavaScript code editor"></textarea>
        <button id="runBtn" aria-label="Run JavaScript code">Run Code</button>
        <button id="copyBtn" class="copy-btn" aria-label="Copy output">Copy Output</button>
        <div id="output" class="output" role="region" aria-live="polite" aria-relevant="additions text"></div>
    </main>

    <script>
        // Save the original console.log function
        const originalConsoleLog = console.log;

        // Override console.log to display logs in the output div
        console.log = function (message) {
            const outputDiv = document.getElementById('output');
            outputDiv.textContent += message + '\n';  // Append the message to the output
            originalConsoleLog.apply(console, arguments); // Optionally keep logging to the browser console
        };

        // Function to run the user's code
        async function runCode() {
            const code = document.getElementById('jsCode').value;
            const outputDiv = document.getElementById('output');
            outputDiv.textContent = ''; // Clear previous output

            try {
                // Using the Function constructor to safely execute the code
                const func = new Function(code);
                await func();  // Execute the code asynchronously
            } catch (error) {
                // Display error message if the code has issues
                outputDiv.textContent = `Error: ${error.message}`;
            }
        }

        // Function to copy output text to the clipboard
        async function copyOutput() {
            const outputDiv = document.getElementById('output');
            const textToCopy = outputDiv.textContent;

            try {
                await navigator.clipboard.writeText(textToCopy);
                alert('Output copied to clipboard!');
            } catch (err) {
                alert(`Failed to copy text: ${err.message}`);
            }
        }

        // Event listeners for button interactions
        document.getElementById('runBtn').addEventListener('click', runCode);
        document.getElementById('copyBtn').addEventListener('click', copyOutput);
    </script>

</body>

</html>