<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS Console</title>
    <style>
        body {
            font-family: 'Fira Code', monospace;
            background-color: #121212;
            color: #fff;
            margin: 0;
            padding: 0;
        }

        header {
            background-color: #1e1e1e;
            color: #fff;
            padding: 20px;
            text-align: center;
            font-size: 2em;
            letter-spacing: 1px;
            border-bottom: 1px solid #444;
        }

        .container {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            padding: 20px;
        }

        .editor {
            width: 80%;
            max-width: 800px;
            height: 150px;
            margin-bottom: 10px;
            border: 2px solid #333;
            padding: 15px;
            font-family: 'Fira Code', monospace;
            font-size: 16px;
            background-color: #222;
            color: #fff;
            border-radius: 5px;
            resize: none;
            transition: all 0.3s ease;
        }

        .editor:focus {
            border-color: #3498db;
            outline: none;
        }

        .run-btn {
            padding: 12px 25px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s ease;
            margin-bottom: 20px;
        }

        .run-btn:hover {
            background-color: #2980b9;
        }

        .console {
            position: fixed;
            bottom: 100px;
            left: 20px;
            right: 20px;
            height: 200px;
            background-color: #1e1e1e;
            color: white;
            padding: 15px;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            border-radius: 5px;
            overflow-y: auto;
            white-space: pre-wrap;
            display: none;
            animation: fadeIn 1s ease;
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
        }

        .console.show {
            display: block;
        }

        .close-btn {
            padding: 10px 20px;
            background-color: #e74c3c;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-top: 10px;
            transition: background-color 0.3s ease;
        }

        .close-btn:hover {
            background-color: #c0392b;
        }

        .snippets {
            position: fixed;
            bottom: 20px;
            left: 20px;
            background-color: #222;
            padding: 15px;
            border-radius: 5px;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease;
        }

        .snippet {
            background-color: #333;
            color: #fff;
            padding: 5px 10px;
            border-radius: 5px;
            cursor: pointer;
            margin: 5px 0;
            transition: background-color 0.3s ease;
        }

        .snippet:hover {
            background-color: #3498db;
        }

        .toggle-arrow {
            font-size: 18px;
            color: #fff;
            cursor: pointer;
            transition: transform 0.3s ease;
        }

        .toggle-arrow.up {
            transform: rotate(180deg);
        }

        @keyframes fadeIn {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }
    </style>
</head>
<body>

<header>
    JS Console
</header>

<div class="container">
    <textarea class="editor" id="jsCode" placeholder="Write your JavaScript code here..." oninput="updateCode()"></textarea>
    <button class="run-btn" onclick="runCode()">Run Code</button>
</div>

<div class="console" id="consoleOutput">
    <button class="close-btn" id="closeConsole" onclick="closeConsole()">Close Console</button>
</div>

<div class="snippets" id="snippets">
    <div class="toggle-arrow" onclick="toggleSnippets()">▼ Snippets</div>
    <div class="snippet" onclick="insertSnippet('console.log(\"Hello, world!\");')">Log "Hello, world!"</div>
    <div class="snippet" onclick="insertSnippet('let x = 10; x++; console.log(x);')">Increment & Log</div>
    <div class="snippet" onclick="insertSnippet('const sum = (a, b) => a + b; console.log(sum(2, 3));')">Sum Function</div>
    <div class="snippet" onclick="insertSnippet('function greet(name) { console.log(`Hello, ${name}!`); } greet(\"John\");')">Function Declaration</div>
    <div class="snippet" onclick="insertSnippet('const double = num => num * 2; console.log(double(5));')">Arrow Function</div>
    <div class="snippet" onclick="insertSnippet('const arr = [1, 2, 3]; const doubled = arr.map(num => num * 2); console.log(doubled);')">Array Map</div>
    <div class="snippet" onclick="insertSnippet('const person = { name: \"Alice\", age: 25 }; const { name, age } = person; console.log(name, age);')">Object Destructuring</div>
    <div class="snippet" onclick="insertSnippet('for (let i = 0; i < 5; i++) { console.log(i); }')">For Loop</div>
    <div class="snippet" onclick="insertSnippet('try { throw new Error(\"Something went wrong!\"); } catch (error) { console.log(error.message); }')">Try/Catch Block</div>
</div>

<script>
    function runCode() {
        const code = document.getElementById('jsCode').value;
        const consoleOutput = document.getElementById('consoleOutput');
        try {
            // Override console.log to show in the console output area
            consoleOutput.classList.add('show');
            consoleOutput.textContent = ''; // Clear previous output
            console.log = function(message) {
                consoleOutput.textContent += message + '\n';
            };
            
            // Run the JavaScript code
            eval(code);
        } catch (error) {
            consoleOutput.textContent = 'Error: ' + error.message;
        }
    }

    function updateCode() {
        const code = document.getElementById('jsCode').value;
        const consoleOutput = document.getElementById('consoleOutput');
        consoleOutput.textContent = ''; // Clear output on every keystroke
    }

    function closeConsole() {
        const consoleOutput = document.getElementById('consoleOutput');
        consoleOutput.classList.remove('show');
    }

    function insertSnippet(snippet) {
        const editor = document.getElementById('jsCode');
        const cursorPos = editor.selectionStart;
        const currentText = editor.value;
        const newText = currentText.slice(0, cursorPos) + snippet + currentText.slice(cursorPos);
        editor.value = newText;
        editor.selectionStart = editor.selectionEnd = cursorPos + snippet.length;
        editor.focus();
    }

    function toggleSnippets() {
        const snippets = document.getElementById('snippets');
        const arrow = document.querySelector('.toggle-arrow');
        
        // Toggle snippet visibility
        snippets.style.display = snippets.style.display === 'none' ? 'block' : 'none';
        
        // Rotate arrow based on state
        arrow.classList.toggle('up');
    }

    // Initially hide the snippets
    document.getElementById('snippets').style.display = 'none';
</script>

</body>
</html>
