Build a comprehensive health metrics calculator with HTML5, CSS3 and JavaScript based on medical standards. Create a clean, accessible interface with step-by-step input forms. Implement accurate BMI calculation with visual classification scale and health risk assessment. Add body fat percentage calculator using multiple methods (Navy, Jackson-Pollock, BIA simulation). Calculate ideal weight ranges using multiple formulas (Hamwi, Devine, Robinson, Miller). Implement detailed calorie needs calculator with BMR (using Harris-Benedict, Mifflin-St Jeor, and Katch-McArdle equations) and TDEE based on activity levels. Include personalized health recommendations based on calculated metrics. Support both metric and imperial units with seamless conversion. Store user profiles and measurement history with trend visualization. Generate interactive progress charts showing changes over time. Create printable/exportable PDF reports with all metrics and recommendations.
My build notes
- STEPS: pasted prompt into vscode+copilot, pushed to github pages. copilot setup everything including the readme below.
- TIME: about an hour
A responsive, feature-rich todo application built with HTML5, CSS3, and vanilla JavaScript. This app provides a modern, clean interface for managing your daily tasks with advanced features like categorization, priority levels, due dates, and drag-and-drop reordering.
- Full CRUD Operations: Add, edit, delete, and complete tasks
- Task Categorization: Organize tasks by Personal, Work, Shopping, Health, and Education
- Priority Levels: Set tasks as Low, Medium, or High priority with color coding
- Due Dates: Add due dates with an intuitive date picker
- Real-time Search: Find tasks quickly with live search functionality
- Advanced Filtering: Filter by status, category, priority, and date range
- Smart Sorting: Sort tasks by date created, due date, priority, or title
- Responsive Design: Works seamlessly on desktop, tablet, and mobile devices
- Dark/Light Theme: Automatic theme detection with manual toggle option
- Smooth Animations: Subtle micro-interactions and transitions
- Drag & Drop: Reorder tasks using HTML5 Drag and Drop API
- Keyboard Navigation: Full keyboard accessibility support
- Visual Feedback: Color-coded categories and priority indicators
- Local Storage: Automatic data persistence between sessions
- Reminder Notifications: Due date alerts and reminders
- Task Statistics: Real-time dashboard with task counts
- Overdue Detection: Automatic highlighting of overdue tasks
- Empty State: Helpful messaging when no tasks are present
- Loading States: Smooth loading animations
- Progressive Web App: Service worker for offline functionality
- Cross-browser Compatible: Works on all modern browsers
- Accessible: WCAG compliant with proper ARIA labels
- Print Friendly: Optimized print styles for task lists
- Performance Optimized: Efficient rendering and minimal DOM manipulation
- Clone or download the project files
- Open
index.htmlin any modern web browser - Start adding your tasks!
todo-app/
├── index.html # Main HTML structure
├── styles.css # All styling and responsive design
├── script.js # Complete JavaScript functionality
├── sw.js # Service worker for PWA features
└── README.md # This documentation
- Enter your task in the main input field
- Select a category from the dropdown
- Choose a priority level
- Optionally set a due date
- Click "Add Task" or press Enter
- Complete: Click the checkbox next to any task
- Edit: Click the edit icon to modify task details
- Delete: Click the trash icon to remove a task
- Reorder: Drag and drop tasks to reorganize them
- Use the search bar to find specific tasks
- Filter by status: All, Pending, Completed, or Overdue
- Filter by category or priority level
- Sort tasks by various criteria using the sort dropdown
- Click the theme toggle button in the header
- The app respects your system's dark/light mode preference
- Your theme choice is remembered between sessions
To add new task categories, modify the category options in both the add task form and edit modal in index.html:
<option value="new-category">New Category</option>And add corresponding CSS for the color:
.task-category.new-category {
background: #your-color;
}
.task-item[data-category="new-category"]::before {
background: #your-color;
}All colors are defined as CSS custom properties in the :root selector. You can easily customize the color scheme by modifying these variables:
:root {
--primary-color: #4f46e5;
--success-color: #10b981;
/* ... other colors */
}- Add the new priority option to the select elements in HTML
- Update the priority sorting logic in JavaScript
- Add corresponding CSS styles
- Chrome 60+
- Firefox 55+
- Safari 12+
- Edge 79+
- Desktop: 1200px and above
- Tablet: 768px - 1199px
- Mobile: 480px - 767px
- Small Mobile: Below 480px
Enter: Add new task (when input is focused)Escape: Close modal or cancel current actionTab: Navigate through interface elements
- Screen reader compatible
- High contrast support
- Keyboard navigation
- Focus indicators
- ARIA labels and roles
Tasks are stored in localStorage with the following structure:
{
"id": "unique-identifier",
"title": "Task title",
"category": "personal|work|shopping|health|education",
"priority": "low|medium|high",
"dueDate": "YYYY-MM-DD",
"completed": boolean,
"dateCreated": "ISO date string",
"order": number
}This is a standalone project, but you can extend it by:
- Adding new features like task templates
- Implementing task sharing functionality
- Adding calendar integration
- Creating data export/import features
- Building a backend API for cloud sync
This project is open source and available under the MIT License.
- Icons: Font Awesome 6.4.0
- Fonts: System font stack for optimal performance
- Design: Modern minimalist approach with accessibility in mind
Built with ❤️ using vanilla web technologies for maximum compatibility and performance.