https://github.com/lokeshahire/ml_labs
https://github.com/lokeshahire/ml_labs
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/lokeshahire/ml_labs
- Owner: lokeshahire
- Created: 2024-10-23T14:53:17.000Z (8 months ago)
- Default Branch: master
- Last Pushed: 2024-10-28T09:52:43.000Z (8 months ago)
- Last Synced: 2024-10-28T12:57:10.079Z (8 months ago)
- Language: JavaScript
- Size: 15.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Dashboard Webpage Development
## Project Overview
This project involves the development of a dynamic and responsive dashboard webpage showcasing frontend development skills. The dashboard features various interactive elements, including pop-ups, sliding menus, data fetching, and chart visualizations, demonstrating proficiency in HTML, CSS, JavaScript, and API integration.
## Features
### Layout
- Clean and user-friendly layout with a **header**, **sidebar menu**, and a **main content area**.
- Expandable/collapsible sliding menus in the sidebar for easy navigation.
### Pop-up Modal
- A pop-up modal that opens upon clicking a specific button.
- Contains a short form for adding new data and a close button for exiting the modal.
### Data Fetching
- Fetches data from an external API (e.g., a weather API or public data API).
- Displays fetched data in a **table** or **card format** in the main content area.
- Includes a refresh button to dynamically update displayed data without reloading the page.
### Chart/Graph Visualization
- Utilizes a JavaScript library (Chart.js or Google Charts) to visualize fetched data in the form of:
- Bar charts
- Line charts
- Pie charts
### Responsive Design
- Fully responsive design to ensure smooth functionality across different devices (desktops, tablets, and mobile phones).
### Form Submission (Optional)
- A simple form for users to enter data (e.g., name, email).
- Displays a confirmation message upon successful submission (via pop-up or inline message).
## Bonus Features (Optional)
- **Theme Toggle**: Dark/light mode toggle for the dashboard.
- **Animations**: Smooth transitions and animations for sidebar, pop-ups, and data display.
- **Local Storage**: Stores user settings (e.g., theme preference or form data) in local storage to retain settings after a page refresh.
## Technologies Used
- **HTML5**: For structuring the dashboard layout.
- **CSS3**: For styling the dashboard and ensuring responsive design.
- **JavaScript**: For interactive elements and data fetching.
- **Chart.js / Google Charts**: For data visualization.
- **API Integration**: For fetching and displaying data from external sources.
## Installation
To run the project locally:
1. Clone the repository:
```bash
git clone