prompt.txt

.Objective: Develop a modern, responsive web application (HTML, CSS, JavaScript) that allows users to easily generate cron job expressions. The application must support both light and dark modes, offer advanced configuration options, provide real-time feedback, and include seamless copy-to-clipboard functionality.,Core Requirements:,Technology Stack: HTML5, CSS3 (preferably using a preprocessor like SCSS/Sass for maintainability), Vanilla JavaScript (ES6+), or a lightweight reactive library if deemed beneficial for state management (e.g., Vue.js Composition API, React Hooks, Svelte). Avoid heavy frameworks unless explicitly justified for performance or complexity.,User Interface (UI):,Modern Aesthetic: Clean, minimalist, and intuitive design. Utilize modern CSS features (Flexbox, Grid, Custom Properties/Variables) for layout and theming.,Responsive Layout: Fully adaptive across various device sizes (mobile, tablet, desktop). Prioritize a mobile-first design approach.,Light/Dark Mode Toggle: Implement a prominent and easily accessible toggle for switching between light and dark themes. The theme preference should persist (e.g., using localStorage).,Accessibility (A11y): Ensure WCAG 2.1 AA compliance. This includes proper semantic HTML, ARIA attributes where necessary, keyboard navigation support, and sufficient color contrast.,Cron Expression Generation Features:,Granularity Control:,Minute (0-59),Hour (0-23),Day of Month (1-31),Month (1-12 or JAN-DEC),Day of Week (0-7 or SUN-SAT),Input Methods: Provide flexible input options for each field:,Specific Value: Single selection (e.g., 15 for minute).,Range: (e.g., 10-20 for minutes).,List: Comma-separated values (e.g., 0,15,30,45 for minutes).,Step/Interval: (e.g., */15 for every 15 minutes, or 5-55/10).,Wildcard: * (every minute/hour/etc.).,"Every X" presets: e.g., "Every 5 minutes", "Every hour", "Daily at 3 AM", "Weekly on Monday at 9 AM".,Special Characters Support: Ensure correct handling and generation for *, -, ,, /, ?, L, W, #.,"At specific times" Selector: A user-friendly component to pick a specific time (e.g., HH:MM).,"At specific days" Selector: A calendar-like interface or multi-select for days of the week and/or month.,Advanced Features:,Real-time Output: As the user modifies inputs, the cron expression should update instantly.,Human-Readable Description: Translate the generated cron expression into a clear, understandable English sentence (e.g., "At 15 minutes past the hour, every hour, every day"). This is crucial for user verification.,Validation & Error Handling:,Validate user inputs in real-time.,Provide clear feedback for invalid entries (e.g., out-of-range numbers, invalid characters).,Prevent generation of invalid cron expressions.,Copy-to-Clipboard: A prominent button next to the generated cron expression to effortlessly copy it. Provide visual feedback upon successful copy.,Common Cron Templates/Presets: A dropdown or list of frequently used cron expressions (e.g., "Every minute", "Every hour", "Daily at midnight", "Monthly", "Weekly"). Selecting a preset should pre-fill the fields.,Explanation of Fields: Hover-over tooltips or an expandable section explaining what each cron field represents.,Code Quality & Best Practices:,Modular JavaScript: Organize code into logical modules/components. Avoid global variables.,CSS Architecture: Use a scalable CSS methodology (e.g., BEM, SMACSS) or CSS-in-JS if a framework is used.,Version Control: Project must be managed with Git.,Performance Optimization: Minimize DOM manipulation, optimize asset loading.,Code Comments & Documentation: Clear and concise comments for complex logic.,Semantic HTML: Use appropriate HTML tags for structure and meaning.,Deliverables:,A fully functional web application accessible via a browser.,Source code (HTML, CSS, JavaScript) hosted on a public repository (e.g., GitHub).,A README.md file explaining how to set up, run, and use the application.,Mockup/Wireframe Guidance:,Consider a multi-panel or accordion-style layout for the different time units (Minute, Hour, Day of Month, etc.) to manage complexity, especially on smaller screens.,The generated cron string and human-readable description should be prominently displayed at the top or bottom, always visible.,The light/dark mode toggle should be easily discoverable, often in a header or footer.,Let's begin by visualizing the initial layout and the core input fields. Could you provide a preliminary sketch or describe your ideal initial screen layout for the generator? I can then provide a visual representation.



https://tinyfont.me/cron-job-generator/