usarfoss · Tejasdevs · Oct 15, 2025
diff --git a/demos/CODE_PRACTICE_README.md b/demos/CODE_PRACTICE_README.md
@@ -0,0 +1,160 @@
+# JavaScript Code Practice Feature
+
+## Overview
+An interactive in-browser code editor that allows users to write and execute JavaScript code in real-time. Built with React and integrated into the hello.js project.
+
+## Files Included
+
+### 1. `CodePractice.jsx`
+- **Location**: `demos/CodePractice.jsx`
+- **Description**: React component for the code practice feature
+- **Features**:
+  - Live code editor with syntax-friendly textarea
+  - Real-time code execution
+  - Console output capture
+  - Error handling and display
+  - Clean, modern UI with styled components
+
+### 2. `code-practice.html`
+- **Location**: `demos/code-practice.html`
+- **Description**: Standalone HTML file that hosts the React component
+- **Features**:
+  - Uses React 18 from CDN (no build step required)
+  - Babel for JSX transformation
+  - Pre-loaded example code snippets
+  - Quick example buttons (Hello World, Math, Arrays, Loops, Objects)
+  - Beautiful gradient header
+  - Responsive design
+
+## How to Use
+
+### Option 1: Open the HTML File Directly
+1. Navigate to the `demos` folder
+2. Open `code-practice.html` in any modern web browser
+3. Start coding immediately!
+
+### Option 2: Run with a Local Server
+```bash
+# Using Python 3
+cd demos
+python -m http.server 8000
+
+# Using Node.js (if you have http-server installed)
+cd demos
+npx http-server
+
+# Then open: http://localhost:8000/code-practice.html
+```
+
+## Features
+
+### ✨ Code Editor
+- Syntax-friendly monospace font
+- Dark theme for comfortable coding
+- Resizable textarea
+- Auto-indentation support
+
+### 🚀 Quick Examples
+Pre-loaded code snippets for:
+- Hello World
+- Math Operations
+- Array Manipulation
+- Loops and Iterations
+- Object Handling
+
+### 📊 Live Output
+- Real-time code execution
+- Console.log() output capture
+- Error messages with details
+- Success/error visual indicators
+
+### 🎨 Modern UI
+- Clean, professional design
+- Gradient header
+- Smooth transitions
+- Responsive layout
+- Color-coded output (green for success, red for errors)
+
+## Technical Details
+
+### Dependencies
+All dependencies are loaded via CDN:
+- **React 18**: Core React library
+- **ReactDOM 18**: React DOM rendering
+- **Babel Standalone**: JSX transformation
+
+### Code Execution
+- Uses `Function` constructor for safe code execution
+- Custom console object to capture output
+- Error handling with try-catch
+- Supports all standard JavaScript features
+
+### Browser Compatibility
+Works in all modern browsers:
+- Chrome/Edge (latest)
+- Firefox (latest)
+- Safari (latest)
+- Opera (latest)
+
+## Security Notes
+
+⚠️ **Important**: This code editor executes JavaScript in the browser context. While it uses a custom console to capture output, the code still runs in the same context as the page. For production use, consider:
+- Running code in a sandboxed iframe
+- Using a Web Worker for isolation
+- Implementing rate limiting
+- Adding code validation
+
+## Customization
+
+### Styling
+All styles are defined inline in the `styles` object. You can easily customize:
+- Colors
+- Fonts
+- Spacing
+- Layout
+
+### Adding More Examples
+Edit the `examples` object in the `loadExample` function:
+```javascript
+const examples = {
+  yourExample: '// Your code here\nconsole.log("Example");'
+};
+```
+
+## Future Enhancements
+
+Potential improvements:
+- [ ] Syntax highlighting
+- [ ] Code formatting (prettier integration)
+- [ ] Save/load code snippets
+- [ ] Share code via URL
+- [ ] Multiple language support
+- [ ] Code completion
+- [ ] Execution time measurement
+- [ ] Memory usage display
+
+## Integration with hello.js
+
+This feature is designed to complement the hello.js OAuth library by providing:
+- A learning tool for JavaScript developers
+- Interactive examples for API integration
+- Testing ground for OAuth callback handlers
+- Educational resource for new developers
+
+## Support
+
+For issues or questions:
+1. Check the browser console for errors
+2. Ensure JavaScript is enabled
+3. Try a different browser
+4. Clear browser cache
+
+## License
+
+This feature follows the same MIT license as the hello.js project.
+
+---
+
+**Created**: October 2025  
+**Version**: 1.0.0  
+**Status**: Ready to use ✅
diff --git a/demos/CodePractice.jsx b/demos/CodePractice.jsx
@@ -0,0 +1,234 @@
+import React, { useState } from 'react';
+
+const CodePractice = () => {
+  const [code, setCode] = useState('// Write your JavaScript code here\nconsole.log("Hello, World!");');
+  const [output, setOutput] = useState('');
+  const [error, setError] = useState('');
+
+  const runCode = () => {
+    setOutput('');
+    setError('');
+
+    // Create a custom console to capture output
+    const logs = [];
+    const customConsole = {
+      log: (...args) => {
+        logs.push(args.map(arg => 
+          typeof arg === 'object' ? JSON.stringify(arg, null, 2) : String(arg)
+        ).join(' '));
+      },
+      error: (...args) => {
+        logs.push('ERROR: ' + args.map(arg => String(arg)).join(' '));
+      },
+      warn: (...args) => {
+        logs.push('WARNING: ' + args.map(arg => String(arg)).join(' '));
+      }
+    };
+
+    try {
+      // Create a function with custom console
+      const func = new Function('console', code);
+      func(customConsole);
+      setOutput(logs.join('\n') || 'Code executed successfully (no output)');
+    } catch (err) {
+      setError(err.toString());
+    }
+  };
+
+  const clearCode = () => {
+    setCode('// Write your JavaScript code here\n');
+    setOutput('');
+    setError('');
+  };
+
+  return (
+    <div style={styles.container}>
+      <div style={styles.header}>
+        <h1 style={styles.title}>JavaScript Code Practice</h1>
+        <p style={styles.subtitle}>Write and run JavaScript code in real-time</p>
+      </div>
+
+      <div style={styles.editorSection}>
+        <div style={styles.editorHeader}>
+          <span style={styles.editorLabel}>Code Editor</span>
+          <div style={styles.buttonGroup}>
+            <button onClick={runCode} style={{...styles.button, ...styles.runButton}}>
+              ▶ Run Code
+            </button>
+            <button onClick={clearCode} style={{...styles.button, ...styles.clearButton}}>
+              🗑 Clear
+            </button>
+          </div>
+        </div>
+        <textarea
+          value={code}
+          onChange={(e) => setCode(e.target.value)}
+          style={styles.textarea}
+          placeholder="Write your JavaScript code here..."
+          spellCheck="false"
+        />
+      </div>
+
+      <div style={styles.outputSection}>
+        <div style={styles.outputHeader}>
+          <span style={styles.outputLabel}>Output</span>
+        </div>
+        <div style={styles.outputBox}>
+          {error && (
+            <div style={styles.errorOutput}>
+              <strong>Error:</strong><br />
+              {error}
+            </div>
+          )}
+          {!error && output && (
+            <pre style={styles.successOutput}>{output}</pre>
+          )}
+          {!error && !output && (
+            <div style={styles.placeholderOutput}>
+              Run your code to see the output here...
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const styles = {
+  container: {
+    maxWidth: '1200px',
+    margin: '0 auto',
+    padding: '20px',
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+    backgroundColor: '#f5f5f5',
+    minHeight: '100vh',
+  },
+  header: {
+    textAlign: 'center',
+    marginBottom: '30px',
+    padding: '20px',
+    backgroundColor: '#fff',
+    borderRadius: '8px',
+    boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+  },
+  title: {
+    margin: '0 0 10px 0',
+    color: '#333',
+    fontSize: '32px',
+    fontWeight: '600',
+  },
+  subtitle: {
+    margin: '0',
+    color: '#666',
+    fontSize: '16px',
+  },
+  editorSection: {
+    marginBottom: '20px',
+    backgroundColor: '#fff',
+    borderRadius: '8px',
+    boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+    overflow: 'hidden',
+  },
+  editorHeader: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: '12px 16px',
+    backgroundColor: '#2c3e50',
+    color: '#fff',
+  },
+  editorLabel: {
+    fontSize: '14px',
+    fontWeight: '600',
+    textTransform: 'uppercase',
+    letterSpacing: '0.5px',
+  },
+  buttonGroup: {
+    display: 'flex',
+    gap: '10px',
+  },
+  button: {
+    padding: '8px 16px',
+    border: 'none',
+    borderRadius: '4px',
+    cursor: 'pointer',
+    fontSize: '14px',
+    fontWeight: '500',
+    transition: 'all 0.2s',
+  },
+  runButton: {
+    backgroundColor: '#27ae60',
+    color: '#fff',
+  },
+  clearButton: {
+    backgroundColor: '#e74c3c',
+    color: '#fff',
+  },
+  textarea: {
+    width: '100%',
+    minHeight: '300px',
+    padding: '16px',
+    border: 'none',
+    fontSize: '14px',
+    fontFamily: 'Monaco, Menlo, "Ubuntu Mono", Consolas, monospace',
+    lineHeight: '1.6',
+    resize: 'vertical',
+    outline: 'none',
+    backgroundColor: '#282c34',
+    color: '#abb2bf',
+    boxSizing: 'border-box',
+  },
+  outputSection: {
+    backgroundColor: '#fff',
+    borderRadius: '8px',
+    boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+    overflow: 'hidden',
+  },
+  outputHeader: {
+    padding: '12px 16px',
+    backgroundColor: '#34495e',
+    color: '#fff',
+  },
+  outputLabel: {
+    fontSize: '14px',
+    fontWeight: '600',
+    textTransform: 'uppercase',
+    letterSpacing: '0.5px',
+  },
+  outputBox: {
+    minHeight: '150px',
+    padding: '16px',
+    backgroundColor: '#f8f9fa',
+  },
+  errorOutput: {
+    color: '#e74c3c',
+    fontFamily: 'Monaco, Menlo, "Ubuntu Mono", Consolas, monospace',
+    fontSize: '14px',
+    lineHeight: '1.6',
+    padding: '12px',
+    backgroundColor: '#fee',
+    borderRadius: '4px',
+    border: '1px solid #fcc',
+  },
+  successOutput: {
+    color: '#27ae60',
+    fontFamily: 'Monaco, Menlo, "Ubuntu Mono", Consolas, monospace',
+    fontSize: '14px',
+    lineHeight: '1.6',
+    margin: '0',
+    padding: '12px',
+    backgroundColor: '#efe',
+    borderRadius: '4px',
+    border: '1px solid #cfc',
+    whiteSpace: 'pre-wrap',
+    wordWrap: 'break-word',
+  },
+  placeholderOutput: {
+    color: '#999',
+    fontStyle: 'italic',
+    textAlign: 'center',
+    padding: '40px 20px',
+  },
+};
+
+export default CodePractice;