This project demonstrates the integration of HTML, CSS, and JavaScript to create interactive and dynamic web applications. It covers a variety of exercises and examples, including DOM manipulation, event handling, dynamic content creation, and more.
Each folder within this project contains specific exercises or examples, organized by functionality, to help understand and practice core web development concepts.
The project has the following folder structure, designed for easy navigation and modularity:
html-css-js-Integration/
├── css/ # Global stylesheets 🎨
│ ├── menu.css # Navigation menu styles
│ └── style.css # Main stylesheet
├── elevator/ # Elevator simulation example 🏢
│ ├── css/
│ │ └── style.css # Styles for the elevator simulation
│ ├── index.html # Main HTML file for the elevator simulation
│ └── js/
│ ├── building.js # JavaScript for building the elevator
│ └── street.js # JavaScript for street interactions
├── events/ # Event handling examples ⏳
│ ├── events_1.html # Example of mouse events
│ ├── events_2.html # Example of keyboard events
│ ├── events_3.html # Example of form events
│ ├── events_4.html # Example of custom events
│ ├── events_5.html # Example of event delegation
│ ├── index.html # Overview of event handling examples
│ └── windows_tips.html # Tips for managing window events
├── image/ # Images used throughout the project 🖼️
│ └── logo-estreita.png # Logo used in some pages
├── js/ # JavaScript examples 💻
│ └── element_by_id_02.js # Example of DOM manipulation by ID
├── modify/ # Exercises on modifying HTML content 📝
│ ├── challenge.html # Challenge for DOM manipulation
│ ├── creating_html_1.html # Example of creating HTML elements
│ ├── creating_html_2.html # Another example of creating elements
│ └── index.html # Overview of modification exercises
└── select/ # DOM selection techniques 🔍
├── accessing_classes.html # Selecting by class name
├── attributes_1.html # Accessing element attributes
├── attributes_2.html # Modifying element attributes
├── attributes_3.html # More examples of attributes manipulation
├── challenge.html # Challenge for practicing element selection
├── element_by_id_02.html # Selecting by ID
├── element_by_name.html # Selecting by name attribute
├── element_by_tag.html # Selecting by tag name
├── elements_by_class.html # Selecting multiple elements by class
├── elements_by_id_01.html # Selecting multiple elements by ID
├── index.html # Overview of selection techniques
├── query_elements_1.html # Using querySelector for selection
├── query_elements_2.html # Using querySelectorAll for selection
└── query_elements_3.html # Advanced selection techniques
## Features 🌐
This project demonstrates several key features of web development:
- **Elevator Simulation**: A fully interactive simulation of an elevator system using HTML, CSS, and JavaScript 🏢
- **Event Handling**: Practical examples of handling various browser events, including mouse, keyboard, and custom events 🖱️⌨️
- **DOM Manipulation**: Various examples of selecting and manipulating DOM elements, such as modifying attributes, creating elements, and changing styles dynamically 🔧
- **Dynamic Content Creation**: Exercises focused on dynamically generating HTML content and modifying the DOM based on user interactions 🔄
- **Responsive Design**: Styles and layout adjustments that ensure the project works well on both desktop and mobile devices 📱💻
---
## Usage ⚙️
To use this project, follow these steps:
1. **Clone the repository**:
```bash
git clone https://github.com/saleh-coder/html-css-js-Integration.git
```
2. **Navigate to the project directory**:
```bash
cd html-css-js-Integration
```
3. **Open the index.html file** in your browser to view the main page, or open any of the other HTML files in their respective folders to view specific examples.
4. You can modify the `js/` or `css/` files to experiment with changes and see the effects on the project.
---
## How to Contribute 🤝
We welcome contributions to this project! To contribute:
1. Fork the repository by clicking the "Fork" button at the top of this page.
2. Create a new branch for your feature or fix:
```bash
git checkout -b feature-name
```
3. Make your changes and commit them:
```bash
git commit -am 'Add new feature'
```
4. Push your changes to your fork:
```bash
git push origin feature-name
```
5. Open a Pull Request with a clear description of what you’ve done and why.
---
## Best Practices 📚
This project follows several best practices to ensure readability, maintainability, and collaboration:
- **Separation of Concerns**: HTML, CSS, and JavaScript are kept in separate files and folders for better organization and modularity.
- **Modular JavaScript**: JavaScript code is split into different files based on functionality, making it easier to maintain and extend.
- **Clean and Readable Code**: The code is written with a focus on readability, using descriptive variable names, comments, and consistent indentation.
- **Documentation**: Each feature and folder is well-documented, and this README provides a clear overview of the project structure and usage.
---
## License 📄
This project is licensed under the MIT License. See the LICENSE file for more details.