Goal Visualizer: Simple Goal Tracker

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

What I Built

Goal Visualizer is a simple web application designed to help users set goals, track their progress, and stay motivated. With interactive visualizations, motivational tips, and a celebratory confetti animation when you reach 100% progress, this app keeps goal-setting engaging and fun.

Features

1. Goal Entry Form
   
   
   
   
   • Users can enter the name of their goal, the target value, and their current progress.
   
   
   • Example:
     
     
     
     
     • Goal Name: "Run a marathon"
       
     
     
     • Target Value: "26 miles"
       
     
     
     • Current Progress: "10 miles"
       
     
     
     
     
   
   
   
   


2. Progress Visualization
   
   
   
   
   • A progress bar dynamically updates based on the user's input.
   
   
   • Displays the percentage of completion in real time.
   
   
   
   


3. Motivational Tips
   
   
   
   
   • Random motivational tips are displayed to encourage users as they work toward their goals.
   
   
   
   


4. Celebratory Confetti
   
   
   
   
   • When the user reaches 100% progress, a confetti animation is triggered to celebrate their achievement.
   
   
   
   


5. Static Pages
   
   
   
   
   • Home page introduces the app and its purpose.
   
   
   • Goal entry and visualization pages provide an intuitive workflow for users.
   
   
   
   

Technologies Used

Frontend

• 
  HTML: For structuring the content.


• 
  CSS: For styling the application, including the progress bar.


• 
  JavaScript: For interactivity, such as handling form submissions, updating the progress bar, and displaying motivational tips.

External Library

• Canvas-Confetti: For adding the celebratory confetti animation when progress reaches 100%.

File Structure

DEV-Challenge--github-copilot--2025-01-18 /



├── index.html         # Home Page

├── goal-entry.html    # Goal Entry Page

├── visualization.html # Progress Visualization Page

├── css/

│   └── style.css      # Stylesheet

├── js/

│   └── main.js        # JavaScript for functionality

How to Use

1. Visit the Home Page
   
   
   
   
   • Read about the app and click "Get Started" to begin setting your goals.
   
   
   
   


2. Set Your Goal
   
   
   
   
   • Navigate to the Goal Entry page.
   
   
   • Enter the name of your goal, the target value, and your current progress.
   
   
   • Click "Save Goal" to proceed.
   
   
   
   


3. Track Your Progress
   
   
   
   
   • View your progress as a percentage on the visualization page.
   
   
   • Watch the progress bar update dynamically based on your input.
   
   
   
   


4. Stay Motivated
   
   
   
   
   • Read the random motivational tip displayed on the visualization page.
   
   
   
   


5. Celebrate Your Success
   
   
   
   
   • Reach 100% progress to trigger the confetti animation and celebrate your achievement!
   
   
   
   

Future Enhancements Options

• 
  Edit Goals: Allow users to modify their goals after creation.


• 
  Multiple Goals: Support for tracking multiple goals at once.


• 
  Data Persistence: Save goals to local storage for retrieval across sessions.


• 
  Responsive Design: Ensure the app looks great on all screen sizes.


• 
  Theme Customization: Add dark mode and customizable color themes.

How to Run the Project

1. 
   

   Clone the repository:

   
   
   

   git clone https://github.com/madilloyd/DEV-Challenge--github-copilot--2025-01-18.git

   
   



2. Navigate to the project folder:
   
   cd DEV-Challenge--github-copilot--2025-01-18




3. Open index.html in your browser to start the app.

Acknowledgments

• Canvas-Confetti: For providing the confetti animation.


• Inspirational quotes sourced from various motivational speakers and writers.

License

This project is open-source and created by Madi L using Copilot. Feel free to use, modify, and distribute it as you like!

Repo

https://github.com/madilloyd/DEV-Challenge--github-copilot--2025-01-18.git

DEMO

Home Page

Enter Goal

Progress Bars

Completion

Copilot Experience

I pushed copilot to create this entire webpage and relied on it heavily for all the JavaScript. It was easy to use and familiar since I use ChatGPT sometimes. I even asked Copilot to summarize our chat. Here it is:

1. 
   CSS Adjustments:
   
   
   
   
   • You asked to make the plus button on the right side of the progress bar.
   
   
   • We updated the CSS and JavaScript to position the plus and minus buttons correctly.
   
   
   • We ensured the progress does not exceed 100% and added a confetti animation when the progress bar reaches 100%.
   
   
   
   


2. 
   HTML and CSS Enhancements:
   
   
   
   
   • We enhanced the home page by adding a hero section with a background image, a welcome message, and a call-to-action button.
   
   
   • We updated the goal entry page to improve its styling and alignment.
   
   
   • We ensured the footer stays at the bottom of the page using Flexbox.
   
   
   
   


3. 
   Progress Bar Styling:
   
   
   
   
   • We made the progress bar container wider and changed the text color inside the progress bar to dark grey.
   
   
   
   


4. 
   Navigation Bar Visibility:
   
   
   
   
   • We enhanced the visibility of the navigation bar on the index page by adding a background color, increasing padding, and adding a box shadow.
   
   
   
   

Throughout the chat, we made various updates to the style.css, goal-entry.html, and visualization.html files to improve the overall appearance and functionality of your web pages.

Here's a summary of the help provided with the JavaScript:

1. 
   

   Button Positioning:

   
   
   
   
   
   • We updated the JavaScript to ensure the plus button is on the right side and the minus button is on the left side of the progress bar.
   
   
   
   


2. 
   

   Progress Update and Confetti Animation:

   
   
   
   
   
   • We modified the updateProgress function to ensure the progress does not exceed 100%.
   
   
   • We added a confetti animation using the canvas-confetti library when the progress bar reaches 100%.
   
   
   
   


3. 
   

   Motivational Tip:

   
   
   
   
   
   • We ensured that the motivational tip is only reloaded when the page is initially loaded and not when the progress is updated.
   
   
   
   

Key JavaScript Changes:

• 
  

  Event Listeners:

  
  
  
  
  
  • Added event listeners for the plus and minus buttons to update the progress and trigger the confetti animation when the progress reaches 100%.
  
  
  
  
  
  



• 
  
  

  Progress Update Logic:

  
  
  
  
  
  • Ensured the progress value is constrained between 0 and the target value using Math.min and Math.max.
  
  
  
  
  
  



• 
  
  

  Confetti Animation:

  
  
  
  
  
  • Integrated the canvas-confetti library and called the confetti function when the progress reaches 100%.
  
  
  
  
  
  

This summary covers the main JavaScript changes and enhancements made during our chat to improve the functionality and user experience of your web application.

Conclusion

I enjoyed using Copilot and it can definitely help with speeding up your coding process, like boilerplate. I can tell it is powerful and one should be careful with how much they choose to rely on it. For me, I am still a beginner and learning to code. It can help if I'm stuck, but I should gain a better understanding of fundamentals before using it too much.

Happy Goal Setting! 🎯