Meeting Schedule - AI Agent Context

Challenge Info

• Day: 25 of 100
• Design: See design.png in this folder
• Starter file: index.html

User Story

As a busy individual, I want an efficient and visually appealing calendar application that allows me to schedule, view, and manage my events with ease, ensuring I can keep track of my appointments and activities effectively.

Acceptance Criteria

• The interface must feature a calendar view that shows the full month, allowing users to quickly navigate to specific days and see highlighted dates with scheduled events.
• A section or tab for "Today" should display the day's events with time slots and brief descriptions.
• Users should have the ability to add new events easily, with a simple form that includes fields for the event title, date, start time, and end time.
• For time input, there should be a user-friendly selector that allows for precise minute and hour entries.
• The application should allow users to mark events as "Done," "In progress," or "Not started" with visual indicators for each status.
• An "Add meeting" interface should be straightforward, with clearly labeled fields and an intuitive layout for entering event details.
• Design must be responsive to ensure the calendar is accessible and functional on various devices, maintaining usability and visual appeal across different screen sizes.

Technical Notes

• Use any framework or vanilla HTML/CSS/JS
• The design mockup (design.png) is the visual target
• Icons, fonts, and images need to be sourced (use Google Fonts, Font Awesome, Unsplash, etc.)
• Make it responsive across mobile, tablet, and desktop
• Add interactivity where it makes sense

Suggested Approach

1. Analyze design.png for layout structure, colors, typography, and spacing
2. Build the HTML skeleton with semantic elements
3. Style with CSS to match the design
4. Add JavaScript for interactivity
5. Test responsiveness and accessibility

Platform

These challenges are part of BigDevSoon - try the free Demo Editor or use Merlin AI on the full platform for context-aware coding assistance.