Focus on Today

Project Name: Focus on Today

Technology Stack:

• Vanilla JavaScript
• Vite (development environment)
• modern-normalize CSS for consistent behavior across browsers

Description

Focus on Today is a mobile-first, responsive web application designed to help users manage and complete their daily tasks efficiently. The application supports five breakpoints to ensure a seamless experience from mobile devices to large screens.

Key Features

Task Management

• Users can add up to three tasks for the day.
• Each task can be marked as complete by clicking the corresponding checkbox.
• Tasks can also be unmarked, and the progress will adjust accordingly.

Progress Tracking

• A progress bar dynamically updates as tasks are completed or uncompleted.
• The progress bar displays the proportion of tasks completed, e.g., "1/3 completed."

Dynamic Motivational Quotes

• Upon starting the app, the quote under the "Today" heading reads, "Raise the bar by completing your goals!"
• As tasks are completed, the quote updates to encourage the user:
  • One task completed: "Well begun is half done!"
  • Two tasks completed: "Just a step away, keep going!"
  • All tasks completed: "Whoa! You just completed all the goals, time for chill."
• If no tasks are completed, the quote changes to: "Move one step ahead today!"
• If all tasks are completed, the quote reads: "Keep Going, You’re making great progress!"

Visual and Interactive Elements

• A sun icon with a 360-degree rotation animation adds a visual appeal.
• The interface is designed with modern-normalize CSS for consistency across different browsers.
• The app is styled for responsiveness, ensuring usability on various screen sizes.

Conclusion

Focus on Today is a feature-rich, user-friendly task management app that motivates users to complete their daily goals through interactive elements and dynamic feedback. The project showcases proficiency in vanilla JavaScript, responsive design principles, and modern development tools like Vite.