Open isabelle926 opened 2 months ago
Users will be able to input the time that they spend studying, coding, or exercising for each day as well as the total number of hours they spent performing those activities in the past week and month.
Note: only frontend is currently finished
<div class="time__trackers"> <div class="daily"> <label for="exerciseDaily">Daily:</label> <input type="number" id="exerciseDaily" min="0" step="1"> <button onclick="updateHours('exerciseDaily')">Update</button> </div> <div class="weekly"> <p class="time__tracked">0hrs</p> </div> <div class="monthly"> <p class="time__tracked">0hrs</p> </div> </div>
function updateHours(id) { const input = document.getElementById(id); const value = input.value; const category = id.replace(/[0-9]/g, ''); const dailyTracker = document.querySelector(`.${category} .daily .time__tracked`); dailyTracker.textContent = `${value}hr`; const pastDays = [3, 4, 5, 6, 7, 8, 9]; const dailyHours = parseFloat(value); const weeklyHours = pastDays.reduce((total, day) => { return total + (dailyHours * 1.5); }, dailyHours); const monthlyHours = pastDays.reduce((total, day) => { return total + (dailyHours * 1.2); }, dailyHours); fetch('/saveHours', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ category, daily: dailyHours, weekly: weeklyHours, monthly: monthlyHours }), }) .then(response => response.json()) .then(data => { if (data.success) { console.log('Hours saved successfully'); } else { console.error('Failed to save hours'); } }) .catch(error => { console.error('Error saving hours:', error); }); }
Time Tracking Dashboard
Users will be able to input the time that they spend studying, coding, or exercising for each day as well as the total number of hours they spent performing those activities in the past week and month.
Note: only frontend is currently finished
Example code for exercise category:
Example code for calculating total hours: