/Time-Traking-Dashboard

this is a front end mentor junior challenge time traking dashboard bulit with html and css js , json data its so impersive and buliding have a fun

Primary LanguageCSS

Front End Mentor Challenge


Abdul Profile     Abdul Profile     Challenge Difficulty-junior

Abdul Profile     Abdul Profile    




Frontend Mentor - Time tracking dashboard

Project Overview:

  • The goal of this project is to create a web-based time tracking dashboard where users can log their activities and view their time usage in a visually appealing way.

Technologies Used: ⚔️

  • HTML: For creating the structure of the web page.

  • CSS: For styling the dashboard and making it visually appealing.

  • JavaScript: For interacting with the DOM, handling user interactions, and manipulating data.

  • JSON: For storing time tracking data in a structured format.

Project Features: ⭐

Dashboard Layout:

  • Design a layout for the dashboard using HTML and CSS. This layout should include sections for displaying different time tracking metrics and activities.

Data Structure:

  • Define the structure of your JSON data file. It could include fields like date, activity name, start time, end time, duration, etc.

Data Storage:

  • Store the time tracking data entered by users in a JSON file. You can use JavaScript to handle reading from and writing to this file.

Data Visualization:

  • Use JavaScript to parse the JSON data and visualize it on the dashboard. Display metrics such as total time spent, time spent on each activity, daily/weekly/monthly summaries, etc. You can use charts or graphs (e.g., bar chart, pie chart) to represent the data visually.

User Interface:

  • Enhance the user interface with CSS to make the dashboard visually appealing and user-friendly. Implement features like sorting, filtering, and searching to make it easier for users to navigate their time tracking data.

Preview Screen Shots 🥏

tablet design



mobile design



live site url 🚦


Author

Acknowledgments