https://github.com/mahmoudsaeedua74/html5

About HTML5
https://github.com/mahmoudsaeedua74/html5

html5

Last synced: 8 months ago
JSON representation

About HTML5

• Host: GitHub
• URL: https://github.com/mahmoudsaeedua74/html5
• Owner: mahmoudsaeedua74
• Created: 2025-02-03T17:00:40.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2025-02-03T17:14:44.000Z (8 months ago)
• Last Synced: 2025-02-03T18:26:56.960Z (8 months ago)
• Topics: html5
• Language: HTML
• Homepage: https://mahmoudsaeedua74.github.io/Html5/
• Size: 4.88 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# HTML5 Test Project

This project demonstrates the key features of HTML5 by utilizing various HTML5 elements and APIs. The project covers new elements, forms, media, and advanced features such as drag-and-drop functionality, the Clipboard API, and Notifications.

## Features:

1. **HTML5 Structural Elements**: 

   - Uses ``, ``, ``, ``, ``, and `` to organize content.

   

2. **Forms**:

   - Demonstrates the usage of different input types like color, range, number, email, tel, and more.

   - Includes form validation and input attributes such as `required`, `pattern`, and `readonly`.

3. **HTML5 New Elements**:

   - `` and `` elements to display progress and measurements.

   - `` element for creating hidden and interactive pop-up windows.

   - `` for grouping related commands and actions.

4. **Multimedia**:

   - Includes `` and `` elements for embedding media files.

   - Shows usage of `` for subtitles and captions.

5. **Drag and Drop**:

   - Allows users to drag and drop elements within the page.

   

6. **Clipboard API**:

   - Copy and paste text using the Clipboard API.

   

7. **Notifications**:

   - Request notification permission and show random jokes using the `Notification` API.

8. **Time & Date**:

   - Use of `` for displaying and formatting date and time.

9. **Datalist**:

   - Uses `` to provide suggestions for an input field.

## How to Use

1. Clone the repository to your local machine.

2. Open the `index.html` file in your browser to view the project.

3. Interact with different HTML5 elements, such as dragging the element, copying text, and receiving notifications.

## Technologies Used

- HTML5

- JavaScript

- CSS (for styling)

## Notes

- Ensure that you grant permission for notifications in your browser when prompted.

- The drag-and-drop functionality works by moving the element inside the drop zone.

## Future Improvements

- Add more interactive elements and enhance the visual design.

- Explore additional HTML5 APIs for advanced features.