Skip to content

Latest commit

 

History

History
99 lines (69 loc) · 3.45 KB

README.md

File metadata and controls

99 lines (69 loc) · 3.45 KB
Raw

HTML Elements Preview

GitHub Pages

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

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
  1. Open the project directory:
cd HTML-Elements
  1. Open index.html in your web browser to explore the project locally:
open index.html
  1. 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.