JavaScript Interactive Tutorials

An interactive, modern web application for learning JavaScript through hands-on examples and live code execution.

Features

• 🎯 Interactive Code Editor: Write and run JavaScript code directly in your browser
• 📚 Comprehensive Tutorials: Cover JavaScript fundamentals to modern ES6+ features
• 🎨 Beautiful UI: Modern gradient design with smooth animations
• 📱 Responsive: Works great on desktop and mobile devices
• ⚡ Real-time Execution: See your code results immediately
• 🌐 HTML Examples: Standalone HTML pages showing JavaScript in real web applications

Topics Covered

1. JavaScript Basics - Variables, data types, operators, and syntax
2. Variables - let, const, var, and data types
3. Operators - Comparison, logical, and assignment operators
4. Conditionals - if/else, ternary operators, and switch statements
5. Loops - for, while, do-while, and for...of loops
6. Functions - Declaration, expressions, arrow functions, and parameters
7. Arrays - Array methods, iteration, and manipulation
8. Objects - Object creation, methods, and destructuring
9. Modern JavaScript - Template literals, spread operator, and async/await

Getting Started

Prerequisites

• Node.js (version 14 or higher)
• npm or yarn

Installation

1. Install dependencies:

npm install

2. Start the development server:

npm start

3. Open http://localhost:3000 in your browser

Building for Production

npm run build

This creates an optimized production build in the build folder.

Technologies Used

• React - UI framework
• CodeMirror - Interactive code editor
• Lucide React - Beautiful icons
• CSS3 - Modern styling with gradients and animations

How to Use

1. Select a topic from the sidebar
2. Read through the explanations and examples
3. Modify the code in the interactive editor
4. Click "Run Code" to execute and see the output
5. Experiment with different values and approaches
6. Visit /examples/ for standalone HTML demos showing JavaScript in action

Standalone HTML Examples

The public/examples/ directory contains fully interactive HTML pages demonstrating JavaScript concepts:

• DOM Manipulation - Dynamically modify webpage content
• Interactive Styling - Change colors, sizes, and styles
• Event Handling - Respond to user interactions
• Form Validation - Real-time input validation
• Todo List App - Complete CRUD application
• Number Guessing Game - Game logic with loops and conditionals
• Counter & Timer - setInterval and setTimeout examples
• Image Gallery - Array manipulation and navigation
• Temperature Converter - Mathematical operations and functions

Access these at http://localhost:3000/examples/ when running the dev server.

Project Structure

JAVASCRIPT/
├── public/
│   ├── examples/             # Standalone HTML examples
│   │   ├── index.html        # Examples homepage
│   │   ├── dom-manipulation.html
│   │   ├── styling-demo.html
│   │   ├── events-demo.html
│   │   ├── form-validation.html
│   │   ├── todo-app.html
│   │   ├── number-game.html
│   │   ├── counter-timer.html
│   │   ├── image-gallery.html
│   │   └── temperature-converter.html
│   └── index.html
├── src/
│   ├── components/
│   │   └── CodeEditor.js     # Interactive code editor component
│   ├── data/
│   │   └── tutorials.js      # Tutorial content and structure
│   ├── App.js                # Main application component
│   ├── index.js              # Application entry point
│   └── index.css             # Global styles
├── package.json
└── README.md

Contributing

Feel free to enhance the tutorials, add new topics, or improve the UI!

License

MIT License - feel free to use this project for learning and teaching.

---

Happy Learning! 🚀