Web UI Multi-Task Coding Test
syuaib-gpt5
Prompt
Create a single HTML file containing HTML, CSS, and pure JavaScript (no libraries or external files). All code must be inside one <html> tag and runnable directly in a browser without additional setup. Theme: Web Productivity Tools Benchmark Task 1 - Todo List Pro: Users can add todos. Users can mark todos as completed (automatic strike-through). Users can delete todos. Data is saved in localStorage. Add a fade in/out animation when adding or deleting a todo. Task 2 - Calculator: Display buttons for numbers 0–9 and basic operations (+, -, ×, ÷). Include a clear button and an "=" button to calculate. Use event listeners for all buttons. Handle errors such as division by zero. Task 3 - Stopwatch: Buttons: Start, Pause, and Reset. Display time in minutes:seconds:milliseconds format. Time remains accurate even if Start is pressed multiple times. Task 4 - Automatic Scoring System: When the page loads, run a script to check the completeness of each task's features. Display a score table with columns: Task, Feature Available (Yes/No), and Score (0–100). The score should be calculated based on the presence of key elements and functions working without errors. Display the total score (0–300) below the table. UI Requirements: Use pure CSS for a clean, responsive design. Each mini-app should be inside a card with a title. Use a different color for each card. Use a readable font. Code Requirements: Use semantic HTML5 elements. Variable and function names must be descriptive. Add short comments for important code sections. Do not use external frameworks or libraries. Output: Provide the complete HTML code inside one <html> tag so it can be copied and run directly in a browser.
A system prompt was added to support web rendering
