Vals using react
Description from the NPM package:
React is a JavaScript library for building user interfaces.
Ttt
emojibasedenglishtofrenchvocabularylearning
HTTP
Project: Emoji-Based English to French Vocabulary Learner Overview: An interactive web application designed to facilitate French vocabulary learning through a visually engaging emoji-based interface. This website presents users with a grid of items, each pairing an English word with its French equivalent and a representative emoji. Core Features: Interactive vocabulary grid Real-time search functionality Word visibility toggle Alphabetical sorting (A-Z/Z-A) Responsive layout for various devices Dynamic background color on each load Scalability: The current architecture suits small to medium vocabulary sets. For larger datasets or frequent content updates, consider implementing an external storage solution in future iterations. This application offers an effective and engaging method for French language learners, combining modern web technologies with an intuitive user interface to create an accessible educational tool.
0
vandermerwed
dailyScheduleTracker
HTTP
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.
1
