JavaScript Events Demo Website

A comprehensive interactive website demonstrating various JavaScript events and DOM manipulation techniques using vanilla JavaScript, HTML, CSS, and Bootstrap.

🚀 Features

Core JavaScript Events

• onload Event: Welcome alert when page loads
• onchange Event: Dynamic color selection dropdown
• onclick Events: Interactive calculator with arithmetic operations
• onmouseover/onmouseout Events: Color-changing hover box
• onkeydown Event: Real-time keyboard input capture
• onsubmit Event: Form submission with validation

Interactive Components

1. Color Selector: Dropdown that changes display box colors dynamically
2. Calculator: Perform basic arithmetic operations (+, -, ×, ÷)
3. Hover Box: Visual feedback on mouse interactions
4. Keyboard Tracker: Displays pressed keys and their codes
5. Contact Form: User input form with success feedback
6. Text Manipulator: String operations (uppercase, lowercase, reverse, count)
7. Counter & Timer: Increment/decrement counter with start/stop timer

Additional Features

• Dark/Light Mode Toggle: Theme switching functionality
• Responsive Design: Mobile-friendly layout using Bootstrap
• Form Validation: Required field validation
• Real-time Updates: Dynamic content updates without page refresh

🛠️ Technologies Used

• HTML5: Semantic markup and structure
• CSS3: Custom styling with transitions
• JavaScript (ES6+): Vanilla JavaScript for all interactions
• Bootstrap 5: Responsive grid system and components
• Font Awesome: Icons (if applicable)

Live Demo

You can also view the live demo at: JS_Events_Demo

📁 Project Structure

javascript-events-demo/
│
├── index.html          # Main HTML file
├── styles.css          # Custom CSS styles
├── script.js           # Vanilla JavaScript code
└── README.md           # Project documentation

🎯 Learning Objectives

This project demonstrates:

• Event Handling: Various JavaScript event types and their implementation
• DOM Manipulation: Dynamic content updates and element styling
• Form Processing: User input validation and feedback
• String Methods: Text manipulation using JavaScript string functions
• Timing Functions: setInterval and setTimeout usage
• Conditional Logic: Switch statements and if/else conditions
• Variable Scope: Local and global variable management

🚀 Getting Started

Prerequisites

• Modern web browser (Chrome, Firefox, Safari, Edge)
• Basic understanding of HTML, CSS, and JavaScript

Installation

1. Clone the repository:

   git clone https://github.com/Narayan0-0/JS_Events_Demo.git

2. Navigate to the project directory:

   cd javascript-events-demo

3. Open index.html in your web browser:

   # On macOS
   open index.html
   
   # On Windows
   start index.html
   
   # On Linux
   xdg-open index.html

💡 How to Use

1. Color Selector: Choose a color from the dropdown to see the display box change
2. Calculator: Enter two numbers and click operation buttons to calculate
3. Hover Box: Move your mouse over the blue box to see it change color
4. Keyboard Input: Type in the text field to see key codes displayed
5. Contact Form: Fill out the form and submit to see success message
6. Text Manipulator: Enter text and use buttons to transform it
7. Counter: Use increment/decrement buttons and start/stop the timer
8. Theme Toggle: Click the theme button to switch between light and dark modes

🎨 Customization

Adding New Events

To add new JavaScript events:

1. Add HTML elements in index.html
2. Create event handler functions in script.js
3. Attach events using addEventListener() or inline handlers

Styling

• Modify styles.css for custom styling
• Use Bootstrap classes for responsive design
• Add CSS transitions for smooth animations

Functionality

• Extend existing functions in script.js
• Add new interactive components
• Implement additional JavaScript methods

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/new-event)
3. Commit your changes (git commit -am 'Add new event handler')
4. Push to the branch (git push origin feature/new-event)
5. Create a Pull Request

📝 License

This project is licensed under the MIT License.

🙏 Acknowledgments

• Bootstrap team for the responsive framework
• MDN Web Docs for JavaScript documentation
• Community tutorials and examples

---

⭐ Star this repository if you found it helpful!