A
Anonymous

Meal Schedule Planner - Copy this Html, Bootstrap Component to your project

"Create-a-responsive-web-UI-for-a-meal-timetable-with-the-following-features:-Columns-for-Sáng,-Trưa,-Tối:-Each-day-of-the-week-(Thứ-2,-Thứ-3,-etc.)-should-have-three-rows-for-'Sáng',-'Trưa',-and-'Tối'.-Weekday-columns:-Display-the-days-of-the-week-(Thứ-2,-Thứ-3,-...,-Chủ-Nhật)-across-the-top-in-a-horizontal-format.-Select-DateTime-Picker:-Include-a-datetime-selector-that-allows-users-to-pick-a-date-within-a-week-(Monday-to-Sunday).-The-selected-date-should-highlight-the-relevant-day-and-adjust-the-day-labels-below-accordingly.-Add-Dish-Button:-Add-a-button-labeled-"Thêm-Món-Ăn"-in-each-cell-for-the-user-to-click-and-add-a-meal-to-that-time-slot.-Mobile-Adaptation:-When-viewed-on-mobile,-display-the-meal-timetable-by-each-day,-stacking-the-"Sáng",-"Trưa",-and-"Tối"-rows-vertically-for-each-day-of-the-week.-The-weekday-names-(Thứ-2,-Thứ-3,-etc.)-should-be-abbreviated-in-mobile-view,-e.g.,-'T2'-for-'Thứ-2'-and-'CN'-for-'Chủ-Nhật'.-Use-an-icon-(e.g.,-a-plus-sign-"+")-for-the-'Add-Dish'-button-on-mobile.-Desktop-Adaptation:-On-desktop,-the-full-weekday-names-should-remain-visible-in-a-grid-format,-with-each-cell-for-'Sáng',-'Trưa',-and-'Tối'-showing-the-'Thêm-Món-Ăn'-button.-Ensure-the-UI-is-clean,-easy-to-use,-and-fully-responsive-across-devices."

Prompt
Component Preview

About

Meal Schedule Planner - Create a responsive meal timetable with date picker, add dish buttons, and mobile adaptation. Built with HTML. View and copy code!

Share

Last updated 1 month ago