Focus : My GitHub Copilot 1-Day Build submission

This is a submission for the GitHub Copilot Challenge: New Beginnings What I Built Focus is a minimalistic, one-task-only to-do list designed to combat cognitive overload by allowing users to focus on a single task at a time. Unlike traditional task managers that present multiple tasks simultaneously, Focus displays only one task until it's completed, encouraging concentration and reducing the urge to multitask. This project was inspired by the need to address the common challenge of juggling multiple tasks, often leading to inefficiency. To enhance the user experience, a feature was added to boost morale as tasks are completed. Demo https://bridgetamana.github.io/focus.github.io/ Repo Bridgetamana / focus.github.io Focus A minimalist focus timer that helps you build better work habits by encouraging single-tasking and flow states. Built in one day using GitHub Copilot for the GitHub Copilot 1-Day Build Challenge. Concept Focus reimagines productivity by emphasizing new beginnings in each work session. Instead of overwhelming users with endless task lists, it promotes a fresh start with each focus period by: Showing only one active task at a time Rewarding uninterrupted focus sessions Daily score tracking with personal bests Built With HTML5 CSS3 Vanilla JavaScript Local Storage for data persistence Font Awesome for icons Quick Start Clone the repository git clone https://github.com/Bridgetamana/focus.github.io.git Open index.html in your browser No build process or dependencies required! Usage Add a task using the input field Start your focus session Work on the displayed task until completion Tick of current task to see the next View on GitHub Copilot Experience Thanks to the Student Developer Program, I had access to GitHub Copilot Pro at no cost, which was incredibly helpful. It took a little over three hours to create this project. After reading the "10 Unexpected Ways to Use GitHub Copilot" blog post, I quickly saw how Copilot could assist me. One of the first ways I used it was for commit messages. When I set up the HTML and CSS for the project, Copilot suggested a commit message that accurately reflected the changes, even though it wasn't in a conventional format. I added "feat" at the beginning to standardize it. Over time, I noticed Copilot adjusted to my style of writing commits. I also used Copilot to add help information for users. I pasted the text content into my HTML file without any elements. After setting up the first info element, Copilot began placing the text in the appropriate tags automatically, which I found impressive. Its autocomplete feature was also helpful. Additionally, Copilot helped clean up my code. After so many iterations, I suspected there were unused line of codes. After prompting copilot, it identified them, and after removing the unused code, my app didn’t break, which was a great relief. GitHub Models This was the one feature I didn’t explore. Conclusion This project, Focus, represents a personal solution to my struggle with multitasking, and GitHub Copilot played a crucial role in its development. Copilot’s ability to suggest code, help with commits, and even clean up code significantly streamlined the process. I’m excited about the potential of Focus to help others concentrate better, though the app still needs refinement.

Jan 20, 2025 - 00:55
 0
Focus : My GitHub Copilot 1-Day Build submission

This is a submission for the GitHub Copilot Challenge: New Beginnings

What I Built

Focus is a minimalistic, one-task-only to-do list designed to combat cognitive overload by allowing users to focus on a single task at a time. Unlike traditional task managers that present multiple tasks simultaneously, Focus displays only one task until it's completed, encouraging concentration and reducing the urge to multitask. This project was inspired by the need to address the common challenge of juggling multiple tasks, often leading to inefficiency. To enhance the user experience, a feature was added to boost morale as tasks are completed.

Demo

https://bridgetamana.github.io/focus.github.io/

Focus app showing a single task interface for improved concentration.

Repo

Focus

A minimalist focus timer that helps you build better work habits by encouraging single-tasking and flow states. Built in one day using GitHub Copilot for the GitHub Copilot 1-Day Build Challenge.

Concept

Focus reimagines productivity by emphasizing new beginnings in each work session. Instead of overwhelming users with endless task lists, it promotes a fresh start with each focus period by:

  • Showing only one active task at a time
  • Rewarding uninterrupted focus sessions
  • Daily score tracking with personal bests

Built With

  • HTML5
  • CSS3
  • Vanilla JavaScript
  • Local Storage for data persistence
  • Font Awesome for icons

Quick Start

  1. Clone the repository
git clone https://github.com/Bridgetamana/focus.github.io.git
  1. Open index.html in your browser

No build process or dependencies required!

Usage

  1. Add a task using the input field
  2. Start your focus session
  3. Work on the displayed task until completion
  4. Tick of current task to see the next



Copilot Experience

Thanks to the Student Developer Program, I had access to GitHub Copilot Pro at no cost, which was incredibly helpful. It took a little over three hours to create this project. After reading the "10 Unexpected Ways to Use GitHub Copilot" blog post, I quickly saw how Copilot could assist me.

One of the first ways I used it was for commit messages. When I set up the HTML and CSS for the project, Copilot suggested a commit message that accurately reflected the changes, even though it wasn't in a conventional format. I added "feat" at the beginning to standardize it. Over time, I noticed Copilot adjusted to my style of writing commits.

Screenshot of Copilot suggesting a commit message during project setup.

Example of Copilot adjusting to a personalized commit message style.

I also used Copilot to add help information for users. I pasted the text content into my HTML file without any elements. After setting up the first info element, Copilot began placing the text in the appropriate tags automatically, which I found impressive. Its autocomplete feature was also helpful.

Copilot automatically placing text content into the correct HTML tags.

Demonstration of Copilot’s autocomplete feature in action.

Additionally, Copilot helped clean up my code. After so many iterations, I suspected there were unused line of codes. After prompting copilot, it identified them, and after removing the unused code, my app didn’t break, which was a great relief.

Copilot pointing out unused code segments for removal.

GitHub Models

This was the one feature I didn’t explore.

Conclusion

This project, Focus, represents a personal solution to my struggle with multitasking, and GitHub Copilot played a crucial role in its development. Copilot’s ability to suggest code, help with commits, and even clean up code significantly streamlined the process. I’m excited about the potential of Focus to help others concentrate better, though the app still needs refinement.

What's Your Reaction?

like

dislike

love

funny

angry

sad

wow