HTML Elements Preview

This project demonstrates a collection of customized HTML elements developed using only HTML, styled with CSS (Bootstrap) and enhanced with JavaScript functionalities. The focus is on two elements: data tables with enhansed functionalities, and some form elements.

🌐 Live Preview

Table of Contents

• Project Overview
• Features
• File Structure
• Technologies Used
• How to Use
• Contributing
• License

Project Overview

This repository provides an implementation of various HTML elements such as data tables and form elements using HTML, CSS (Bootstrap) and JavaScript. It's a good reference for beginners and web developers to understand and explore how to implement common UI components with clean and responsive designs.

Features

• Data Table:

  • Search functionality with suggestions.
  • Sortable columns.
  • Pagination.
  • Export options (CSV, Excel, Print to PDF).

• Form Elements:

  • Textboxes and text areas with different sizes and styles.
  • Responsive checkboxes and radio buttons.
  • Dropdowns with both single and multiple selections.
  • Bootstrap Duallistbox implementation.

File Structure

HTML-Elements/
│
├── index.html           # Homepage with links to other pages
├── datatable.html       # Data table implementation with search, sort, and export features
├── formelements.html    # Various form elements like textboxes, checkboxes, radio buttons, and dropdowns
├── script.js            # JavaScript file for handling dynamic functionality across pages
└── style.css            # Custom styles (if used, otherwise default Bootstrap styles)

Key Pages

• Homepage (index.html): A landing page with links to explore data tables and form elements.
• Data Table (datatable.html): A page showcasing a dynamic data table with sorting, searching, and export options.
• Form Elements (formelements.html): A page demonstrating different form elements like text fields, checkboxes, radio buttons, and dropdowns.

Technologies Used

• HTML5
• CSS3
  • Bootstrap 5: For responsive design and styling.
• JavaScript
  • For dynamic content rendering, sorting, and form handling.

How to Use

1. Clone the repository:

git clone https://github.com/talhayaseen57/HTML-Elements.git

2. Open the project directory:

cd HTML-Elements

3. Open index.html in your web browser to explore the project locally:

open index.html

4. Alternatively, visit the live GitHub Pages site to view the project.

Contributing

Contributions are welcome! If you have suggestions, feel free to open an issue or create a pull request. For major changes, please open an issue first to discuss what you would like to change.

Steps to Contribute:

1. Fork this repository.
2. Create your feature branch (git checkout -b feature/YourFeature).
3. Commit your changes (git commit -m 'Add some feature').
4. Push to the branch (git push origin feature/YourFeature).
5. Open a pull request.

License

This project is licensed under the MIT License - see the LICENSE file for details.