diff --git a/demos/CODE_PRACTICE_README.md b/demos/CODE_PRACTICE_README.md new file mode 100644 index 0000000..025464e --- /dev/null +++ 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 new file mode 100644 index 0000000..1d20f6e --- /dev/null +++ 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 ( +
+
+

JavaScript Code Practice

+

Write and run JavaScript code in real-time

+
+ +
+
+ Code Editor +
+ + +
+
+