├── dash2.html
├── assets
    ├── avator.jpg
    ├── imag1.jpg
    ├── login.png
    ├── track.png
    ├── projects.png
    ├── reports.png
    ├── settings.png
    ├── support.png
    ├── dashboard.png
    ├── logincute.png
    ├── notification.png
    ├── loginworkspace.png
    ├── cute image for taski.png
    └── react.svg
├── README.md
├── index.html
└── dashboard.html


/dash2.html:
--------------------------------------------------------------------------------
1 | 
2 | 


--------------------------------------------------------------------------------
/assets/avator.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FaithMutua-code/Taskify/HEAD/assets/avator.jpg


--------------------------------------------------------------------------------
/assets/imag1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FaithMutua-code/Taskify/HEAD/assets/imag1.jpg


--------------------------------------------------------------------------------
/assets/login.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FaithMutua-code/Taskify/HEAD/assets/login.png


--------------------------------------------------------------------------------
/assets/track.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FaithMutua-code/Taskify/HEAD/assets/track.png


--------------------------------------------------------------------------------
/assets/projects.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FaithMutua-code/Taskify/HEAD/assets/projects.png


--------------------------------------------------------------------------------
/assets/reports.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FaithMutua-code/Taskify/HEAD/assets/reports.png


--------------------------------------------------------------------------------
/assets/settings.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FaithMutua-code/Taskify/HEAD/assets/settings.png


--------------------------------------------------------------------------------
/assets/support.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FaithMutua-code/Taskify/HEAD/assets/support.png


--------------------------------------------------------------------------------
/assets/dashboard.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FaithMutua-code/Taskify/HEAD/assets/dashboard.png


--------------------------------------------------------------------------------
/assets/logincute.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FaithMutua-code/Taskify/HEAD/assets/logincute.png


--------------------------------------------------------------------------------
/assets/notification.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FaithMutua-code/Taskify/HEAD/assets/notification.png


--------------------------------------------------------------------------------
/assets/loginworkspace.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FaithMutua-code/Taskify/HEAD/assets/loginworkspace.png


--------------------------------------------------------------------------------
/assets/cute image for taski.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FaithMutua-code/Taskify/HEAD/assets/cute image for taski.png


--------------------------------------------------------------------------------
/assets/react.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Taskify - Task Management Web Application
  2 | 
  3 | ## Overview
  4 | 
  5 | Taskify is a task management web application designed to help users organize, track, and manage their tasks and schedules efficiently. It features a modern, responsive dashboard with task tracking, progress visualization, and calendar integration, along with a user-friendly login and signup system. The application is built with HTML, JavaScript, React, Tailwind CSS, and Recharts for data visualization, with a focus on clean design and intuitive user experience.
  6 | 
  7 | > **Note**: This project is currently in development and not yet complete. Some features may be partially implemented or planned for future updates.
  8 | 
  9 | ## Features
 10 | 
 11 | ### Dashboard
 12 | - **Responsive Layout**: A grid-based layout with a sidebar, main content area, and right sidebar, optimized for both desktop and mobile devices.
 13 | - **Mobile Menu**: A hamburger menu for mobile users, with smooth transitions and an overlay effect.
 14 | - **Task Overview**: Displays today's tasks with a call-to-action button and a visual representation.
 15 | - **Progress Tracking**: Task cards showing progress bars for ongoing projects (e.g., Web Dashboard, Mobile App, Animation).
 16 | - **Chart Visualization**: A bar chart using Recharts to display task progress over the week.
 17 | - **Assignments List**: A scrollable list of assignments with due dates and scores.
 18 | - **Calendar Integration**: A React Calendar component for scheduling tasks, with a modal for adding/editing tasks.
 19 | - **Schedule Management**: Users can add, edit, and delete tasks in the schedule list with a modal interface.
 20 | - **Profile and Batchmates**: Displays user profile information and a list of batchmates.
 21 | 
 22 | ### Login/Signup Page
 23 | - **Dual Forms**: Toggle between signup and login forms with a clean, animated interface.
 24 | - **Avatar Upload**: Users can upload a profile picture during signup, with a live preview.
 25 | - **Form Validation**: Basic client-side validation for password matching in the signup form.
 26 | - **Custom Styling**: Uses Tailwind CSS and Google Fonts (Pacifico) for a modern, visually appealing design.
 27 | - **SVG Icon**: A custom SVG icon for branding in the signup/login forms.
 28 | 
 29 | ## Technologies Used
 30 | - **HTML5**: Structure of the application.
 31 | - **JavaScript**: Core functionality, including DOM manipulation and event handling.
 32 | - **React**: For rendering the calendar and chart components.
 33 | - **Tailwind CSS**: For responsive and utility-first styling.
 34 | - **Recharts**: For creating the task progress bar chart.
 35 | - **Framer Motion**: For animations in the login/signup page.
 36 | - **Google Fonts**: Pacifico font for headings in the login/signup page.
 37 | 
 38 | ## Setup Instructions
 39 | 
 40 | ### Prerequisites
 41 | - A modern web browser (e.g., Chrome, Firefox, Edge).
 42 | - A local development server (e.g., Live Server in VS Code) to serve the HTML files.
 43 | - Internet connection for loading CDN-hosted libraries (React, Recharts, Tailwind CSS, Framer Motion).
 44 | 
 45 | ### Installation
 46 | 1. **Clone or Download the Repository**:
 47 |    ```bash
 48 |    git clone <repository-url>
 49 |    ```
 50 |    Alternatively, download the project files and extract them to a local directory.
 51 | 
 52 | 2. **Navigate to the Project Directory**:
 53 |    ```bash
 54 |    cd taskify
 55 |    ```
 56 | 
 57 | 3. **Serve the Application**:
 58 |    - Use a local server like Live Server in VS Code or any other static file server.
 59 |    - Open your browser and navigate to `http://localhost:8000`.
 60 | 
 61 | 4. **File Structure**:
 62 |    - `index.html`: The main dashboard page.
 63 |    - `login.html`: The login/signup page.
 64 |    - `assets/`: Directory containing images (e.g., `cute image for taski.png`, `avator.jpg`, etc.).
 65 | 
 66 | > **Note**: The project relies on external assets (images) referenced in the HTML files. Ensure the `assets` folder is present and contains the required images, or update the image paths accordingly.
 67 | 
 68 | ### Running the Application
 69 | - Open `index.html` to view the dashboard.
 70 | - Open `login.html` to view the login/signup page.
 71 | - No backend is currently implemented, so form submissions log data to the console.
 72 | 
 73 | ## Usage
 74 | - **Dashboard**:
 75 |   - Navigate through the sidebar (desktop) or mobile menu to access different sections (Dashboard, Track, Projects, Reports, Support, Settings).
 76 |   - View task progress, assignments, and schedules.
 77 |   - Use the calendar to select dates and manage tasks via the "Add Task" button.
 78 |   - Edit or delete tasks from the schedule list using the modal interface.
 79 | - **Login/Signup**:
 80 |   - Toggle between signup and login forms using the respective buttons.
 81 |   - Upload a profile picture during signup and fill in the required fields.
 82 |   - Submit forms to see the data logged in the console (backend integration pending).
 83 | 
 84 | ## Future Development
 85 | - **Backend Integration**: Add a backend (e.g., Node.js, Express, or Firebase) for user authentication and data persistence.
 86 | - **Database**: Store tasks, schedules, and user data in a database.
 87 | - **API Integration**: Fetch dynamic data for tasks, assignments, and progress charts.
 88 | - **Enhanced Interactivity**: Add drag-and-drop for tasks, real-time updates, and notifications.
 89 | - **Improved Validation**: Implement robust form validation and error handling.
 90 | - **Additional Features**: Task categories, priority levels, and collaboration tools for batchmates.
 91 | 
 92 | ## Known Issues
 93 | - **Asset Dependencies**: The project references images in the `assets` folder that are not provided. Missing images may cause broken visuals.
 94 | - **Backend Absence**: Form submissions currently log to the console and do not persist data.
 95 | - **Limited Interactivity**: Some navigation links (e.g., Dashboard, Track) are placeholders and do not lead to functional pages.
 96 | 
 97 | ## Contributing
 98 | Contributions are welcome! To contribute:
 99 | 1. Fork the repository.
100 | 2. Create a new branch (`git checkout -b feature/your-feature`).
101 | 3. Make your changes and commit (`git commit -m "Add your feature"`).
102 | 4. Push to the branch (`git push origin feature/your-feature`).
103 | 5. Create a pull request.
104 | 
105 | Please ensure your code follows the project's coding style and includes appropriate comments.
106 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |   <title>Workspace Login</title>
  7 |   <script src="https://cdn.tailwindcss.com"></script>
  8 |   <script src="https://unpkg.com/framer-motion@10.16.4/dist/framer-motion.js"></script>
  9 |   <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
 10 | 
 11 | </head>
 12 | <body class="bg-gray-100">
 13 |   <div class="flex justify-center p-5">
 14 |     <div class="flex flex-row items-center bg-white p-2 rounded-2xl shadow-lg  shadow-gray-500/50 gap-10 max-w-6xl w-full flex-wrap">
 15 |       <div class="flex-1  text-white items-center justify-center p-8 rounded-lg">
 16 |       
 17 |         <img src="./assets/cute image for taski.png" alt="" class="w-full h-full object-contain rounded-lg max-h-[600px]" />
 18 |       </div>
 19 |       
 20 |       <div class="flex-1 p-8">
 21 |         <div class="min-w-[300px] max-w-md bg-white p-10 rounded-2xl shadow-lg shadow-purple-500/30">
 22 |           <div id="signup-form">
 23 |             <form id="signupForm" class="flex flex-col">
 24 |               <div class="flex items-center justify-center gap-3 mb-5">
 25 |                 <!-- SVG Icon -->
 26 |                 <svg width="32" height="32" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
 27 |                   <rect width="64" height="64" rx="12" fill="#E9D5FF"/>
 28 |                   <path d="M20 20H44V44H20V20Z" fill="white" stroke="#9333EA" stroke-width="2" stroke-linejoin="round"/>
 29 |                   <path d="M24 24H40V28H24V24Z" fill="#C084FC"/>
 30 |                   <path d="M24 32H40V36H24V32Z" fill="#C084FC"/>
 31 |                   <circle cx="32" cy="48" r="2" fill="#9333EA"/>
 32 |                 </svg>
 33 |               
 34 |                 <!-- Heading -->
 35 |                 <h2 class="text-2xl font-semibold text-gray-800" style="font-family: 'Pacifico', cursive;">Create Workspace</h2>
 36 | 
 37 |               </div>
 38 |               
 39 | 
 40 |               <div class="flex items-center gap-2.5 mb-5">
 41 |                 <div class="w-24 h-24 rounded-full overflow-hidden border-2 border-gray-300 flex justify-center items-center bg-gray-100">
 42 |                   <div id="avatarPreview" class="text-2xl">+</div>
 43 |                 </div>
 44 |                 <span class="change-avatar">
 45 |                   <input
 46 |                     type="file"
 47 |                     accept="image/*"
 48 |                     id="avatarInput"
 49 |                     class="hidden"
 50 |                   />
 51 |                   <label 
 52 |                     for="avatarInput" 
 53 |                     class="cursor-pointer bg-purple-700 text-white px-3 py-1.5 rounded text-sm transition-colors hover:bg-purple-800"
 54 |                   >
 55 |                     Change
 56 |                   </label>
 57 |                 </span>
 58 |               </div>
 59 | 
 60 |               <div class="flex gap-4 mb-4">
 61 |                 <input
 62 |                   type="text"
 63 |                   name="firstName"
 64 |                   id="firstName"
 65 |                   placeholder="First Name"
 66 |                   class="p-2.5 mb-3.5 rounded-lg border border-gray-300 w-full"
 67 |                   required
 68 |                 />
 69 |                 <input
 70 |                   type="text"
 71 |                   name="lastName"
 72 |                   id="lastName"
 73 |                   placeholder="Last Name"
 74 |                   class="p-2.5 mb-3.5 rounded-lg border border-gray-300 w-full"
 75 |                   required
 76 |                 />
 77 |               </div>
 78 | 
 79 |               <input
 80 |                 type="email"
 81 |                 name="email"
 82 |                 id="email"
 83 |                 placeholder="Email Address"
 84 |                 class="p-2.5 mb-3.5 rounded-lg border border-gray-300 w-full"
 85 |                 required
 86 |               />
 87 | 
 88 |               <label for="role" class="mb-1">What best describes what you do?</label>
 89 |               <input
 90 |                 type="text"
 91 |                 name="role"
 92 |                 id="role"
 93 |                 placeholder="e.g. Developer"
 94 |                 class="p-2.5 mb-3.5 rounded-lg border border-gray-300 w-full"
 95 |                 required
 96 |               />
 97 | 
 98 |               <input
 99 |                 type="password"
100 |                 name="password"
101 |                 id="password"
102 |                 placeholder="Password"
103 |                 class="p-2.5 mb-3.5 rounded-lg border border-gray-300 w-full"
104 |                 required
105 |               />
106 | 
107 |               <input
108 |                 type="password"
109 |                 name="confirmPassword"
110 |                 id="confirmPassword"
111 |                 placeholder="Confirm Password"
112 |                 class="p-2.5 mb-3.5 rounded-lg border border-gray-300 w-full"
113 |                 required
114 |               />
115 | 
116 |               <button 
117 |                 type="submit" 
118 |                 class="p-3 bg-purple-700 text-white border-none rounded-lg text-base cursor-pointer mt-2.5 transition-colors hover:bg-purple-800 w-full"
119 |               >
120 |                 Create Workspace
121 |               </button>
122 | 
123 |               <p class="mt-5 text-center text-sm">Already have an account?</p>
124 |               <button
125 |                 type="button"
126 |                 id="showLoginBtn"
127 |                 class="p-3 bg-transparent text-purple-700 border border-purple-700 rounded-lg text-base cursor-pointer mt-2.5 transition-colors hover:bg-purple-50 w-full"
128 |               >
129 |                 Login
130 |               </button>
131 |             </form>
132 |           </div>
133 | 
134 |           <div id="login-form" class="hidden">
135 |             <form id="loginForm" class="flex flex-col">
136 |               <h2 class="mb-5 text-center text-2xl  " style="font-family: 'Pacifico', cursive;">Login</h2>
137 | 
138 |               <input
139 |                 type="email"
140 |                 name="loginEmail"
141 |                 id="loginEmail"
142 |                 placeholder="Email Address"
143 |                 class="p-2.5 mb-3.5 rounded-lg border border-gray-300 w-full"
144 |                 required
145 |               />
146 | 
147 |               <input
148 |                 type="password"
149 |                 name="loginPassword"
150 |                 id="loginPassword"
151 |                 placeholder="Password"
152 |                 class="p-2.5 mb-3.5 rounded-lg border border-gray-300 w-full"
153 |                 required
154 |               />
155 | 
156 |               <button 
157 |                 type="submit" 
158 |                 class="p-3 bg-purple-700 text-white border-none rounded-lg text-base cursor-pointer mt-2.5 transition-colors hover:bg-purple-800 w-full"
159 |               >
160 |                 Login
161 |               </button>
162 | 
163 |               <p class="mt-5 text-center text-sm">New here?</p>
164 |               <button
165 |                 type="button"
166 |                 id="showSignupBtn"
167 |                 class="p-3 bg-transparent text-purple-700 border border-purple-700 rounded-lg text-base cursor-pointer mt-2.5 transition-colors hover:bg-purple-50 w-full"
168 |               >
169 |                 Create Workspace
170 |               </button>
171 |             </form>
172 |           </div>
173 |         </div>
174 |       </div>
175 |     </div>
176 |   </div>
177 | 
178 |   <script>
179 |     document.addEventListener('DOMContentLoaded', function() {
180 |       const signupForm = document.getElementById('signupForm');
181 |       const loginForm = document.getElementById('loginForm');
182 |       const signupSection = document.getElementById('signup-form');
183 |       const loginSection = document.getElementById('login-form');
184 |       const showLoginBtn = document.getElementById('showLoginBtn');
185 |       const showSignupBtn = document.getElementById('showSignupBtn');
186 |       const avatarInput = document.getElementById('avatarInput');
187 |       const avatarPreview = document.getElementById('avatarPreview');
188 | 
189 |       // Toggle between signup and login forms
190 |       showLoginBtn.addEventListener('click', function() {
191 |         signupSection.classList.add('hidden');
192 |         loginSection.classList.remove('hidden');
193 |       });
194 | 
195 |       showSignupBtn.addEventListener('click', function() {
196 |         loginSection.classList.add('hidden');
197 |         signupSection.classList.remove('hidden');
198 |       });
199 | 
200 |       // Handle avatar upload preview
201 |       avatarInput.addEventListener('change', function(e) {
202 |         const file = e.target.files[0];
203 |         if (file) {
204 |           const reader = new FileReader();
205 |           reader.onload = function(event) {
206 |             if (avatarPreview.innerHTML === '+') {
207 |               avatarPreview.innerHTML = '';
208 |               const img = document.createElement('img');
209 |               img.src = event.target.result;
210 |               img.className = 'w-full h-full object-cover';
211 |               avatarPreview.appendChild(img);
212 |             } else {
213 |               avatarPreview.querySelector('img').src = event.target.result;
214 |             }
215 |           };
216 |           reader.readAsDataURL(file);
217 |         }
218 |       });
219 | 
220 |       // Form submission handlers
221 |       signupForm.addEventListener('submit', function(e) {
222 |         e.preventDefault();
223 |         
224 |         const password = document.getElementById('password').value;
225 |         const confirmPassword = document.getElementById('confirmPassword').value;
226 |         
227 |         if (password !== confirmPassword) {
228 |           alert("Passwords do not match!");
229 |           return;
230 |         }
231 |         
232 |         const formData = {
233 |           firstName: document.getElementById('firstName').value,
234 |           lastName: document.getElementById('lastName').value,
235 |           email: document.getElementById('email').value,
236 |           password: password,
237 |           role: document.getElementById('role').value,
238 |           avatar: avatarPreview.querySelector('img')?.src || ''
239 |         };
240 |         
241 |         console.log('Signup Data:', formData);
242 |       });
243 | 
244 |       loginForm.addEventListener('submit', function(e) {
245 |         e.preventDefault();
246 |         
247 |         const formData = {
248 |           email: document.getElementById('loginEmail').value,
249 |           password: document.getElementById('loginPassword').value
250 |         };
251 |         
252 |         console.log('Login Data:', formData);
253 |       });
254 |     });
255 |   </script>
256 | </body>
257 | </html>
258 | 


--------------------------------------------------------------------------------
/dashboard.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |   <title>Taskify Dashboard</title>
  7 |   <script src="https://cdn.tailwindcss.com"></script>
  8 |   <script src="https://unpkg.com/react/umd/react.development.js"></script>
  9 |   <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
 10 |   <script src="https://unpkg.com/react-calendar/dist/Calendar.js"></script>
 11 |   <script src="https://unpkg.com/recharts/umd/Recharts.min.js"></script>
 12 |   <style>
 13 |     .react-calendar {
 14 |       width: 100%;
 15 |       border: none;
 16 |       font-family: inherit;
 17 |     }
 18 |     .react-calendar__tile--now {
 19 |       background: #f5e9fc;
 20 |     }
 21 |     .react-calendar__tile--active {
 22 |       background: #6a0dad;
 23 |       color: white;
 24 |       border-radius: 50%;
 25 |     }
 26 |     .react-calendar__tile {
 27 |       padding: 0.75em 0.5em;
 28 |     }
 29 |     .mobile-menu {
 30 |       transition: all 0.3s ease;
 31 |     }
 32 |     .mobile-menu-hidden {
 33 |       transform: translateX(-100%);
 34 |     }
 35 |     .mobile-menu-visible {
 36 |       transform: translateX(0);
 37 |     }
 38 |     .overlay {
 39 |       transition: opacity 0.3s ease;
 40 |     }
 41 |     .overlay-hidden {
 42 |       opacity: 0;
 43 |       pointer-events: none;
 44 |     }
 45 |     .overlay-visible {
 46 |       opacity: 1;
 47 |       pointer-events: auto;
 48 |     }
 49 |   </style>
 50 | </head>
 51 | <body class="bg-purple-50 min-h-screen">
 52 |   <!-- Mobile Menu Button (Hamburger) -->
 53 |   <div class="lg:hidden fixed top-5 left-5 z-50">
 54 |     <button id="mobile-menu-button" class="p-2 rounded-md bg-purple-800 text-white">
 55 |       <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 56 |         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
 57 |       </svg>
 58 |     </button>
 59 |   </div>
 60 | 
 61 |   <!-- Mobile Menu Overlay -->
 62 |   <div id="mobile-menu-overlay" class="overlay overlay-hidden fixed inset-0 bg-black bg-opacity-50 z-40"></div>
 63 | 
 64 |   <!-- Mobile Menu -->
 65 |   <div id="mobile-menu" class="mobile-menu mobile-menu-hidden fixed inset-y-0 left-0 w-64 bg-white p-5 shadow-xl z-50">
 66 |     <div class="flex justify-between items-center mb-8">
 67 |       <h1 class="text-2xl font-bold text-purple-800">Taskify</h1>
 68 |       <button id="close-mobile-menu" class="p-1 rounded-md hover:bg-gray-100">
 69 |         <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 70 |           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
 71 |         </svg>
 72 |       </button>
 73 |     </div>
 74 |     
 75 |     <nav class="flex flex-col justify-between h-[calc(100%-60px)]">
 76 |       <div class="space-y-6">
 77 |         <a href="#" class="flex items-center gap-3 text-purple-800 font-semibold hover:bg-purple-50 p-2 rounded-md">
 78 |           <img src="./assets/dashboard.png" alt="" class="w-7 h-7"> Dashboard
 79 |         </a>
 80 |         <a href="#" class="flex items-center gap-3 text-purple-800 font-semibold hover:bg-purple-50 p-2 rounded-md">
 81 |           <img src="./assets/track.png" alt="" class="w-7 h-7"> Track
 82 |         </a>
 83 |         <a href="#" class="flex items-center gap-3 text-purple-800 font-semibold hover:bg-purple-50 p-2 rounded-md">
 84 |           <img src="./assets/projects.png" alt="" class="w-7 h-7"> Projects
 85 |         </a>
 86 |         <a href="#" class="flex items-center gap-3 text-purple-800 font-semibold hover:bg-purple-50 p-2 rounded-md">
 87 |           <img src="./assets/reports.png" alt="" class="w-7 h-7"> Reports
 88 |         </a>
 89 |       </div>
 90 |       <div class="space-y-6">
 91 |         <a href="#" class="flex items-center gap-3 text-purple-800 font-semibold hover:bg-purple-50 p-2 rounded-md">
 92 |           <img src="./assets/support.png" alt="" class="w-7 h-7"> Support
 93 |         </a>
 94 |         <a href="#" class="flex items-center gap-3 text-purple-800 font-semibold hover:bg-purple-50 p-2 rounded-md">
 95 |           <img src="./assets/settings.png" alt="" class="w-7 h-7"> Settings
 96 |         </a>
 97 |       </div>
 98 |     </nav>
 99 |   </div>
100 | 
101 |   <div class="grid grid-cols-1 lg:grid-cols-[220px_1fr_300px] gap-5 p-5 pt-16 lg:pt-5">
102 |     <!-- Sidebar (Desktop) -->
103 |     <aside class="bg-white p-5 rounded-xl shadow-md lg:block hidden">
104 |       <h1 class="text-2xl font-bold text-purple-800 mb-8">Taskify</h1>
105 |       <nav class="flex flex-col justify-between h-full">
106 |         <div class="space-y-10">
107 |           <a href="#" class="flex items-center gap-3 text-purple-800 font-semibold">
108 |             <img src="./assets/dashboard.png" alt="" class="w-7 h-7"> Dashboard
109 |           </a>
110 |           <a href="#" class="flex items-center gap-3 text-purple-800 font-semibold">
111 |             <img src="./assets/track.png" alt="" class="w-7 h-7"> Track
112 |           </a>
113 |           <a href="#" class="flex items-center gap-3 text-purple-800 font-semibold">
114 |             <img src="./assets/projects.png" alt="" class="w-7 h-7"> Projects
115 |           </a>
116 |           <a href="#" class="flex items-center gap-3 text-purple-800 font-semibold">
117 |             <img src="./assets/reports.png" alt="" class="w-7 h-7"> Reports
118 |           </a>
119 |         </div>
120 |         <div class="mb-20 space-y-10">
121 |           <a href="#" class="flex items-center gap-3 text-purple-800 font-semibold">
122 |             <img src="./assets/support.png" alt="" class="w-7 h-7"> Support
123 |           </a>
124 |           <a href="#" class="flex items-center gap-3 text-purple-800 font-semibold">
125 |             <img src="./assets/settings.png" alt="" class="w-7 h-7"> Settings
126 |           </a>
127 |         </div>
128 |       </nav>
129 |     </aside>
130 | 
131 |     <!-- Main Content -->
132 |     <main class="flex flex-col gap-3">
133 |       <!-- Header -->
134 |       <div class="flex justify-between items-center">
135 |         <div class="pl-5">
136 |           <p class="text-xl font-semibold">Hi, <span class="text-purple-800">Kim Namjoon</span></p>
137 |           <h3 class="text-base text-purple-800 font-light">Let's finish your task today</h3>
138 |         </div>
139 |         <div class="pr-8">
140 |           <img src="./assets/notification.png" alt="" class="w-8 h-8">
141 |         </div>
142 |       </div>
143 | 
144 |       <!-- Today's Task Card -->
145 |       <div class="bg-white p-5 rounded-xl shadow-md flex flex-col md:flex-row justify-between items-center gap-5">
146 |         <div class="flex flex-col items-start gap-5">
147 |           <h2 class="text-2xl m-0">Today's Task</h2>
148 |           <p class="m-0 text-gray-600">Check your daily tasks and schedules</p>
149 |           <button class="bg-purple-800 text-white px-4 py-2 rounded-md cursor-pointer mt-3">Today's Schedule</button>
150 |         </div>
151 |         <img src="./assets/imag1.jpg" alt="Task" class="w-full md:w-72 h-auto rounded-lg">
152 |       </div>
153 | 
154 |       <!-- Task Cards -->
155 |       <div class="flex flex-col sm:flex-row gap-4">
156 |         <div class="bg-white p-5 rounded-xl shadow-md flex-1">
157 |           <h3>Web Dashboard</h3>
158 |           <div class="w-full h-2 bg-gray-200 rounded-full mt-2 overflow-hidden">
159 |             <div class="h-full bg-purple-800 rounded-full" style="width: 90%"></div>
160 |           </div>
161 |           <p class="text-sm text-gray-700 mt-1">Progress: 90%</p>
162 |           <p class="text-sm text-gray-500">3 days left</p>
163 |         </div>
164 |         <div class="bg-white p-5 rounded-xl shadow-md flex-1">
165 |           <h3>Mobile App</h3>
166 |           <div class="w-full h-2 bg-gray-200 rounded-full mt-2 overflow-hidden">
167 |             <div class="h-full bg-pink-500 rounded-full" style="width: 30%"></div>
168 |           </div>
169 |           <p class="text-sm text-gray-700 mt-1">Progress: 30%</p>
170 |           <p class="text-sm text-gray-500">15 days left</p>
171 |         </div>
172 |         <div class="bg-white p-5 rounded-xl shadow-md flex-1">
173 |           <h3>Animation</h3>
174 |           <div class="w-full h-2 bg-gray-200 rounded-full mt-2 overflow-hidden">
175 |             <div class="h-full bg-purple-600 rounded-full" style="width: 75%"></div>
176 |           </div>
177 |           <p class="text-sm text-gray-700 mt-1">Progress: 75%</p>
178 |           <p class="text-sm text-gray-500">7 days left</p>
179 |         </div>
180 |       </div>
181 | 
182 |       <!-- Chart and Assignments Section -->
183 |       <div class="flex flex-col lg:flex-row gap-5 mt-5">
184 |         <!-- Chart Card -->
185 |         <div class="bg-white p-5 rounded-xl shadow-md flex-1">
186 |           <h3>Tasks Progress</h3>
187 |           <div id="chart-container" style="width: 100%; height: 300px"></div>
188 |         </div>
189 | 
190 |         <!-- Assignments Card -->
191 |         <div class="bg-white p-5 rounded-xl shadow-md flex-1 lg:max-w-[350px] max-h-[500px] overflow-y-auto">
192 |           <div class="flex justify-between items-center">
193 |             <h3>Assignments (12)</h3>
194 |             <p class="text-sm text-gray-500">2/5 completed</p>
195 |           </div>
196 |           <div class="mt-5">
197 |             <div class="flex justify-between py-3 border-b border-gray-200">
198 |               <div>
199 |                 <h4 class="text-base font-medium">Colour Theory</h4>
200 |                 <p class="text-sm text-gray-500">Due: 05/10/2024</p>
201 |               </div>
202 |               <div class="font-bold text-purple-800">86/100</div>
203 |             </div>
204 |             <div class="flex justify-between py-3 border-b border-gray-200">
205 |               <div>
206 |                 <h4 class="text-base font-medium">Design System</h4>
207 |                 <p class="text-sm text-gray-500">Due: 06/10/2024</p>
208 |               </div>
209 |               <div class="font-bold text-purple-800">90/100</div>
210 |             </div>
211 |             <div class="flex justify-between py-3 border-b border-gray-200">
212 |               <div>
213 |                 <h4 class="text-base font-medium">Prototyping</h4>
214 |                 <p class="text-sm text-gray-500">Due: 10/10/2024</p>
215 |               </div>
216 |               <div class="font-bold text-purple-800">80/100</div>
217 |             </div>
218 |           </div>
219 |         </div>
220 |       </div>
221 |     </main>
222 | 
223 |     <!-- Right Sidebar -->
224 |     <aside class="flex flex-col gap-5">
225 |       <!-- Profile Card -->
226 |       <div class="bg-purple-200 p-5 rounded-xl">
227 |         <div class="flex items-center gap-3">
228 |           <img src="./assets/avator.jpg" alt="" class="w-12 h-12 rounded-full">
229 |           <div>
230 |             <h3 class="font-semibold m-0">Kim Namjoon</h3>
231 |             <p class="text-sm font-light m-0">UI/UX Designer</p>
232 |           </div>
233 |         </div>
234 | 
235 |         <div class="bg-white p-5 rounded-xl border border-gray-200 mt-5 shadow-sm">
236 |           <div class="flex justify-between items-center">
237 |             <h4 class="text-lg font-medium" id="current-month"></h4>
238 |             <button id="add-task-btn" class="bg-purple-800 text-white text-xs px-3 py-1 rounded-full cursor-pointer">
239 |               + Add Task
240 |             </button>
241 |           </div>
242 | 
243 |           <!-- Calendar -->
244 |           <div class="mt-5" id="calendar-container"></div>
245 | 
246 |           <!-- Schedule List -->
247 |           <div class="mt-5">
248 |             <h4 class="font-medium">Schedule</h4>
249 |             <div class="mt-3" id="schedule-list">
250 |               <div class="mb-4 schedule-item">
251 |                 <p class="font-semibold m-0">UI Motion</p>
252 |                 <small class="text-gray-500">10:00am - 12:00pm</small>
253 |                 <div class="flex gap-2 mt-1">
254 |                   <button class="text-xs text-purple-800 edit-btn">Edit</button>
255 |                   <button class="text-xs text-red-500 delete-btn">Delete</button>
256 |                 </div>
257 |               </div>
258 |               <div class="mb-4 schedule-item">
259 |                 <p class="font-semibold m-0">UI Design</p>
260 |                 <small class="text-gray-500">12:00pm - 02:00pm</small>
261 |                 <div class="flex gap-2 mt-1">
262 |                   <button class="text-xs text-purple-800 edit-btn">Edit</button>
263 |                   <button class="text-xs text-red-500 delete-btn">Delete</button>
264 |                 </div>
265 |               </div>
266 |             </div>
267 |           </div>
268 |         </div>
269 |       </div>
270 | 
271 |       <!-- Batchmates Card -->
272 |       <div class="bg-purple-200 p-5 rounded-xl">
273 |         <h4 class="font-medium">Batchmates</h4>
274 |         <div class="mt-3 space-y-3">
275 |           <div class="flex items-center gap-3 bg-white p-3 rounded-full border border-transparent">
276 |             <img src="./assets/avator.jpg" alt="" class="w-10 h-10 rounded-full">
277 |             <div>
278 |               <p class="font-semibold m-0">Rinsen Jey</p>
279 |               <small class="text-gray-500">UX Designer</small>
280 |             </div>
281 |           </div>
282 |           <div class="flex items-center gap-3 bg-white p-3 rounded-full border border-transparent">
283 |             <img src="./assets/avator.jpg" alt="" class="w-10 h-10 rounded-full">
284 |             <div>
285 |               <p class="font-semibold m-0">Kim Jee yong</p>
286 |               <small class="text-gray-500">UI Designer</small>
287 |             </div>
288 |           </div>
289 |           <div class="flex items-center gap-3 bg-white p-3 rounded-full border border-transparent">
290 |             <img src="./assets/avator.jpg" alt="" class="w-10 h-10 rounded-full">
291 |             <div>
292 |               <p class="font-semibold m-0">Kim Beo yong</p>
293 |               <small class="text-gray-500">UX/UI Designer</small>
294 |             </div>
295 |           </div>
296 |         </div>
297 |       </div>
298 |     </aside>
299 |   </div>
300 | 
301 |   <!-- Task Form Modal -->
302 |   <div id="task-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
303 |     <div class="bg-white p-5 rounded-lg w-full max-w-md">
304 |       <h3 class="text-xl font-semibold mb-4" id="modal-title">Add New Task</h3>
305 |       <div class="space-y-3">
306 |         <input type="text" id="task-name" placeholder="Task name" class="w-full p-2 border rounded">
307 |         <input type="text" id="task-time" placeholder="Time range (e.g. 2:00pm - 4:00pm)" class="w-full p-2 border rounded">
308 |         <div class="flex justify-end gap-2">
309 |           <button id="cancel-task" class="px-4 py-2 border rounded">Cancel</button>
310 |           <button id="save-task" class="px-4 py-2 bg-purple-800 text-white rounded">Save</button>
311 |         </div>
312 |       </div>
313 |     </div>
314 |   </div>
315 | 
316 |   <script>
317 |     // Initialize the calendar
318 |     document.addEventListener('DOMContentLoaded', function() {
319 |       // Mobile menu functionality
320 |       const mobileMenuButton = document.getElementById('mobile-menu-button');
321 |       const closeMobileMenuButton = document.getElementById('close-mobile-menu');
322 |       const mobileMenu = document.getElementById('mobile-menu');
323 |       const mobileMenuOverlay = document.getElementById('mobile-menu-overlay');
324 | 
325 |       mobileMenuButton.addEventListener('click', () => {
326 |         mobileMenu.classList.remove('mobile-menu-hidden');
327 |         mobileMenu.classList.add('mobile-menu-visible');
328 |         mobileMenuOverlay.classList.remove('overlay-hidden');
329 |         mobileMenuOverlay.classList.add('overlay-visible');
330 |       });
331 | 
332 |       closeMobileMenuButton.addEventListener('click', () => {
333 |         hideMobileMenu();
334 |       });
335 | 
336 |       mobileMenuOverlay.addEventListener('click', () => {
337 |         hideMobileMenu();
338 |       });
339 | 
340 |       function hideMobileMenu() {
341 |         mobileMenu.classList.remove('mobile-menu-visible');
342 |         mobileMenu.classList.add('mobile-menu-hidden');
343 |         mobileMenuOverlay.classList.remove('overlay-visible');
344 |         mobileMenuOverlay.classList.add('overlay-hidden');
345 |       }
346 | 
347 |       // Set current month
348 |       const months = ['January', 'February', 'March', 'April', 'May', 'June', 
349 |                      'July', 'August', 'September', 'October', 'November', 'December'];
350 |       const currentDate = new Date();
351 |       document.getElementById('current-month').textContent = months[currentDate.getMonth()];
352 |       
353 |       // Initialize React Calendar
354 |       const Calendar = ReactCalendar.default;
355 |       const calendar = ReactDOM.render(
356 |         React.createElement(Calendar, {
357 |           onChange: (date) => console.log(date),
358 |           value: currentDate,
359 |           view: 'month'
360 |         }),
361 |         document.getElementById('calendar-container')
362 |       );
363 | 
364 |       // Initialize Recharts BarChart
365 |       const { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip } = Recharts;
366 |       
367 |       const data = [
368 |         { day: "Mon", timeSpent: 4 },
369 |         { day: "Tue", timeSpent: 6 },
370 |         { day: "Wed", timeSpent: 7 },
371 |         { day: "Thur", timeSpent: 8 },
372 |         { day: "Fri", timeSpent: 5 },
373 |         { day: "Sat", timeSpent: 4 },
374 |         { day: "Sun", timeSpent: 6 },
375 |       ];
376 | 
377 |       const chart = ReactDOM.render(
378 |         React.createElement(
379 |           BarChart,
380 |           {
381 |             width: document.getElementById('chart-container').clientWidth,
382 |             height: 300,
383 |             data: data,
384 |             margin: { top: 5, right: 30, left: 20, bottom: 5 }
385 |           },
386 |           [
387 |             React.createElement(CartesianGrid, { strokeDasharray: "3 3" }),
388 |             React.createElement(XAxis, { dataKey: "day" }),
389 |             React.createElement(YAxis),
390 |             React.createElement(Tooltip),
391 |             React.createElement(Bar, { 
392 |               dataKey: "timeSpent", 
393 |               fill: "#6a0dad", 
394 |               radius: [8, 8, 0, 0] 
395 |             })
396 |           ]
397 |         ),
398 |         document.getElementById('chart-container')
399 |       );
400 | 
401 |       // Task management functionality
402 |       const taskModal = document.getElementById('task-modal');
403 |       const addTaskBtn = document.getElementById('add-task-btn');
404 |       const cancelTaskBtn = document.getElementById('cancel-task');
405 |       const saveTaskBtn = document.getElementById('save-task');
406 |       const scheduleList = document.getElementById('schedule-list');
407 |       let currentEditIndex = null;
408 | 
409 |       // Show modal
410 |       addTaskBtn.addEventListener('click', () => {
411 |         document.getElementById('modal-title').textContent = 'Add New Task';
412 |         document.getElementById('task-name').value = '';
413 |         document.getElementById('task-time').value = '';
414 |         currentEditIndex = null;
415 |         taskModal.classList.remove('hidden');
416 |       });
417 | 
418 |       // Edit task
419 |       document.querySelectorAll('.edit-btn').forEach((btn, index) => {
420 |         btn.addEventListener('click', () => {
421 |           const item = document.querySelectorAll('.schedule-item')[index];
422 |           document.getElementById('modal-title').textContent = 'Edit Task';
423 |           document.getElementById('task-name').value = item.querySelector('p').textContent;
424 |           document.getElementById('task-time').value = item.querySelector('small').textContent;
425 |           currentEditIndex = index;
426 |           taskModal.classList.remove('hidden');
427 |         });
428 |       });
429 | 
430 |       // Delete task
431 |       document.querySelectorAll('.delete-btn').forEach((btn, index) => {
432 |         btn.addEventListener('click', () => {
433 |           document.querySelectorAll('.schedule-item')[index].remove();
434 |         });
435 |       });
436 | 
437 |       // Cancel modal
438 |       cancelTaskBtn.addEventListener('click', () => {
439 |         taskModal.classList.add('hidden');
440 |       });
441 | 
442 |       // Save task
443 |       saveTaskBtn.addEventListener('click', () => {
444 |         const taskName = document.getElementById('task-name').value;
445 |         const taskTime = document.getElementById('task-time').value;
446 |         
447 |         if (taskName && taskTime) {
448 |           if (currentEditIndex !== null) {
449 |             // Edit existing task
450 |             const item = document.querySelectorAll('.schedule-item')[currentEditIndex];
451 |             item.querySelector('p').textContent = taskName;
452 |             item.querySelector('small').textContent = taskTime;
453 |           } else {
454 |             // Add new task
455 |             const newItem = document.createElement('div');
456 |             newItem.className = 'mb-4 schedule-item';
457 |             newItem.innerHTML = `
458 |               <p class="font-semibold m-0">${taskName}</p>
459 |               <small class="text-gray-500">${taskTime}</small>
460 |               <div class="flex gap-2 mt-1">
461 |                 <button class="text-xs text-purple-800 edit-btn">Edit</button>
462 |                 <button class="text-xs text-red-500 delete-btn">Delete</button>
463 |               </div>
464 |             `;
465 |             scheduleList.appendChild(newItem);
466 |             
467 |             // Add event listeners to new buttons
468 |             newItem.querySelector('.edit-btn').addEventListener('click', () => {
469 |               document.getElementById('modal-title').textContent = 'Edit Task';
470 |               document.getElementById('task-name').value = taskName;
471 |               document.getElementById('task-time').value = taskTime;
472 |               currentEditIndex = Array.from(document.querySelectorAll('.schedule-item')).indexOf(newItem);
473 |               taskModal.classList.remove('hidden');
474 |             });
475 |             
476 |             newItem.querySelector('.delete-btn').addEventListener('click', () => {
477 |               newItem.remove();
478 |             });
479 |           }
480 |           
481 |           taskModal.classList.add('hidden');
482 |         }
483 |       });
484 | 
485 |       // Make chart responsive
486 |       window.addEventListener('resize', () => {
487 |         const chartContainer = document.getElementById('chart-container');
488 |         if (chartContainer) {
489 |           ReactDOM.render(
490 |             React.createElement(
491 |               BarChart,
492 |               {
493 |                 width: chartContainer.clientWidth,
494 |                 height: 300,
495 |                 data: data,
496 |                 margin: { top: 5, right: 30, left: 20, bottom: 5 }
497 |               },
498 |               [
499 |                 React.createElement(CartesianGrid, { strokeDasharray: "3 3" }),
500 |                 React.createElement(XAxis, { dataKey: "day" }),
501 |                 React.createElement(YAxis),
502 |                 React.createElement(Tooltip),
503 |                 React.createElement(Bar, { 
504 |                   dataKey: "timeSpent", 
505 |                   fill: "#6a0dad", 
506 |                   radius: [8, 8, 0, 0] 
507 |                 })
508 |               ]
509 |             ),
510 |             chartContainer
511 |           );
512 |         }
513 |       });
514 |     });
515 |   </script>
516 | </body>
517 | </html>


--------------------------------------------------------------------------------