My Tasks

0%

Weather Report

Search for a city or use your location to see the weather...

Dashboard | About | Contact

{ font-family: Arial, sans-serif; background: #f9f9f9; color: #333; padding: 40px; } h1 { text-align: center; } .container { max-width: 500px; margin: 0 auto; } input { padding: 10px; width: 70%; border: 1px solid #ccc; border-radius: 5px; } button { padding: 10px 15px; margin: 5px; border: none; border-radius: 5px; cursor: pointer; background: #007bff; color: white; } button:disabled { background: #ccc; cursor: not-allowed; } ul { list-style: none; padding: 0; margin-top: 20px; } li { background: white; border: 1px solid #ddd; margin-bottom: 8px; padding: 10px; display: flex; justify-content: space-between; align-items: center; } .toast { position: fixed; bottom: 20px; right: 20px; background: #333; color: white; padding: 10px 20px; border-radius: 5px; opacity: 0; transition: opacity 0.3s; } .toast.show { opacity: 1; }

Undo/Redo Command Pattern

Task Manager with Tags

{ font-family: Arial, sans-serif; padding: 20px; } button { padding: 10px 15px; margin: 5px; cursor: pointer; } .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: none; justify-content: center; align-items: center; background: rgba(0,0,0,0.5); backdrop-filter: blur(2px); z-index: 1000; } .modal.show { display: flex; } .modal-content { background: #fff; padding: 20px; border-radius: 8px; min-width: 300px; max-width: 500px; transform: translateY(-50px); opacity: 0; transition: all 0.3s ease; } .modal.show .modal-content { transform: translateY(0); opacity: 1; } .modal-buttons { margin-top: 20px; text-align: right; } .modal-btn { padding: 8px 12px; margin-left: 10px; }

Reusable Modal Demo

{ font-family: Arial, sans-serif; padding: 20px; } button { padding: 8px 12px; margin: 5px; cursor: pointer; } #task-list { margin-top: 20px; list-style: none; padding: 0; } .task-item { padding: 5px 10px; border: 1px solid #ccc; margin-bottom: 5px; border-radius: 4px; } .data-btn { margin-top: 15px; display: block; }

Task Manager with Data Persistence