ashryanio

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.

Forked from maxm/imgGenUrl

Awesome Val Town An curated list of useful community vals. Feel free to create your own awesome list! Apps @pomdtr/blob_editor @nbbaier/sqliteExplorerApp View and interact with your Val Town SQLite data. @pomdtr/http_client Attach a postman-like http client to your vals VS Code Extension vt Chrome Extension Tooling Authentication @pomdtr/basicAuth @pomdtr/email_auth @pomdtr/password_auth Sqlite @sqlite/db @pomdtr/sql @pomdtr/kv @postpostscript/sqliteUniverse Blob @stevekrouse/blobAdmin @pomdtr/lowdb Middleware @andreterron/codeOnValTown Testing @pomdtr/test_explorer Api @pomdtr/api @pomdtr/trpc Other @vladimyr/valshot @pomdtr/mdx @pomdtr/serve_readme OpenAI @pomdtr/ask_ai Web Components Val Town Playground CodeMirror

Render form and save data This val provides a web-based interface for collecting email addresses. It features a dual-functionality approach: when accessed via a web browser using a GET request, it serves an HTML form where users can submit their email address. If the script receives a POST request, it implies that the form has been submitted, and it proceeds to handle the incoming data. Fork this val to customize it and use it on your account.

Val Shot Generate val source code screenshot using sourcecodeshots.com ⚠️ This service is offered for personal use under a reasonable usage policy as stated here: https://sourcecodeshots.com/docs 📣 Special thanks to @pomdtr for their help and contributions! Usage https://vladimyr-valshot.web.val.run/v/<author>/<val> Example https://vladimyr-valshot.web.val.run/v/vladimyr/valshot https://vladimyr-valshot.web.val.run/v/pomdtr/readme