vandermerwed

Daily Schedule & Chores Tracker A flexible and interactive analogue clock schedule and chore tracker designed for my 8-year-old. This React component helps manage daily routines and tasks, featuring a visually appealing clock interface and a dynamic chore list. Features Analogue Clock Schedule: Displays daily activities in an analogue clock format with segments representing different time slots. Chore Tracker: Lists chores for the day, with checkboxes for completion tracking. Customizable: Accepts schedule and todoList props, allowing dynamic data from APIs or other sources. Real-time Updates: The clock updates every second to show the current time. Responsive Design: Styled with Tailwind CSS for a modern and clean appearance. Installation To use the component, include it in your React project and provide the necessary props. import AnalogueScheduleClock from './path-to-component'; // Example usage <AnalogueScheduleClock schedule={yourScheduleArray} todoList={yourTodoListArray} todoListHeading="Chores" legendHeading="Today's Schedule" initialTime={new Date()} isLoading={false} /> Props | Prop | Type | Description | |------------------|------------------------|-----------------------------------------------------------------------------| | schedule | ScheduleItem[] | Array of schedule items with start , end , label , and color properties. Defaults to a preset schedule. | | todoList | TaskItem[] | Array of chores with id , name , and completed status. Defaults to a preset chore list. | | todoListHeading | string | Heading for the chore list section. Default is "Kid's Chores" . | | legendHeading | string | Heading for the schedule legend section. Default is "Daily Schedule" . | | initialTime | Date | Initial time to display on the clock. Defaults to the current time. | | isLoading | boolean | Displays a loading screen if set to true . Default is false . | Customizing the Schedule You can update the default schedule by modifying the defaultSchedule array or passing a custom schedule prop: const defaultSchedule: ScheduleItem[] = [ { label: "💤", start: "19:00", end: "06:00", color: "#fca5a5" }, { label: "🍳", start: "06:00", end: "07:15", color: "#93c5fd" }, { label: "🚗", start: "07:15", end: "07:30", color: "#d1d5db" }, { label: "🏫", start: "07:30", end: "12:45", color: "#fdba74" }, { label: "🚗", start: "12:45", end: "13:00", color: "#d1d5db" }, { label: "📺", start: "13:00", end: "14:00", color: "#86efac" }, { label: "📚", start: "14:00", end: "16:00", color: "#fdba74" }, { label: "🎮", start: "16:00", end: "17:00", color: "#86efac" }, { label: "🍽️", start: "17:00", end: "18:00", color: "#93c5fd" }, { label: "🛁", start: "18:00", end: "19:00", color: "#d8b4fe" }, ]; Feel free to customize the labels, start/end times, and colors to suit your child's daily routine. Customizing the Chore List To update the chores, modify the efaultTodoList array or provide a custom todoList prop: const defaultTodoList: TaskItem[] = [ { id: "1", name: "Make bed", completed: false }, { id: "2", name: "Clean room", completed: false }, { id: "3", name: "Do homework", completed: false }, { id: "4", name: "Feed pet", completed: false }, { id: "5", name: "Set table", completed: false }, ]; You can add, remove, or modify tasks to match your child’s responsibilities. Changing Headings To change the headings for the chores and schedule sections, update lines 229 and 230 in the code: todoListHeading = "Kid's Chores", legendHeading = "Daily Schedule", Adjust these to fit your preferred labels or language.