https://github.com/swe-rashad/web-components

Web Components are a set of web platform APIs that allow you to create reusable custom elements with encapsulated functionality, which can be used in web applications.
https://github.com/swe-rashad/web-components

javascript webcomponent webcomponent-example

Last synced: 9 months ago
JSON representation

Web Components are a set of web platform APIs that allow you to create reusable custom elements with encapsulated functionality, which can be used in web applications.

• Host: GitHub
• URL: https://github.com/swe-rashad/web-components
• Owner: swe-rashad
• Created: 2024-06-12T14:32:43.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-06-12T23:24:39.000Z (over 1 year ago)
• Last Synced: 2025-02-13T11:49:39.601Z (11 months ago)
• Topics: javascript, webcomponent, webcomponent-example
• Language: JavaScript
• Homepage: https://swe-rashad.github.io/Web-components/
• Size: 94.7 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

          

## Demo url

https://swe-rashad.github.io/Web-components

## Files and Directories

- **Assets/images**: This directory contains images used in the project.

- **Components/User.js**: This file contains the definition of the `UserCard` web component.

- **Mocks/employeeList.json**: This file contains the mock employee data in JSON format.

- **scripts/define.js**: This script defines the `user-card` component and registers it with the custom elements registry.

- **scripts/main.js**: This script is the main entry point of the application. It handles the loading of employee data, rendering of `user-card` elements, and the search functionality.

- **style/style.css**: This file contains global styles for the application.

- **index.html**: This is the main HTML file that loads and displays the web component.

- **README.md**: This file provides an overview and documentation for the project.

## Employee Data Format

The `employeeList.json` file contains an array of employee objects with the following properties:

- `id`: Unique identifier for the employee

- `name`: First name of the employee

- `surname`: Last name of the employee

- `gender`: Gender of the employee

- `role`: Job role of the employee

- `experience`: Years of experience

- `account_status`: Status of the employee's account (e.g., active, inactive)

- `email`: Email address of the employee

Example:

```json

[

    {

        "id": 1,

        "name": "John",

        "surname": "Doe",

        "gender": "Male",

        "role": "Developer",

        "experience": 5,

        "account_status": "active",

        "email": "john.doe@example.com"

    },

    {

        "id": 2,

        "name": "Jane",

        "surname": "Smith",

        "gender": "Female",

        "role": "Designer",

        "experience": 3,

        "account_status": "inactive",

        "email": "jane.smith@example.com"

    }

]

## Example Usage