Goal-Oriented Planning Draft

Madi Lloyd — Sun, 19 Jan 2025 05:34:36 +0000

This is a submission for the Agent.ai Challenge: Productivity-Pro Agent (See Details)

What I Built

The application is a goal-oriented planning assistant designed to help users break down long-term goals into actionable tasks, schedule those tasks effectively, and track progress. It leverages AI for natural language understanding and advanced scheduling, offering tailored daily and weekly plans based on user preferences and availability.

Demo

https://agent.ai/agent/goal-planner

Video Example
https://youtu.be/STGx84lv3as

Agent.ai Experience

It was very simple to create the AI agent, especially since it is using ChatGPT as my LLM. It definitely a useful tool that can be more concise and formatted than just chatting with AI.

Goal Visualizer: Simple Goal Tracker

Madi Lloyd — Sat, 18 Jan 2025 22:21:16 +0000

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

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"
Progress Visualization
- A progress bar dynamically updates based on the user's input.
- Displays the percentage of completion in real time.
Motivational Tips
- Random motivational tips are displayed to encourage users as they work toward their goals.
Celebratory Confetti
- When the user reaches 100% progress, a confetti animation is triggered to celebrate their achievement.
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

Visit the Home Page
- Read about the app and click "Get Started" to begin setting your goals.
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.
Track Your Progress
- View your progress as a percentage on the visualization page.
- Watch the progress bar update dynamically based on your input.
Stay Motivated
- Read the random motivational tip displayed on the visualization page.
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

Clone the repository:

git clone https://github.com/madilloyd/DEV-Challenge--github-copilot--2025-01-18.git
Navigate to the project folder:
cd DEV-Challenge--github-copilot--2025-01-18
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:

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%.
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.
Progress Bar Styling:
- We made the progress bar container wider and changed the text color inside the progress bar to dark grey.
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:

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.
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%.
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! 🎯

2024 Reflection to Compiling My 2025 Roadmap

Madi Lloyd — Fri, 03 Jan 2025 21:05:24 +0000

This is a submission for the 2025 New Year Writing Challenge: Compiling 2025

In 2024 I decided I want to focus more on coding and make a career shift in the future. I have been studying in my free time, but it has not been enough. I moved three times in 2024, including two new states, and have not been utilizing my time effectively. 2025 is my year for focusing in on my goals and accomplishing what I set forth to do in this field.

I have created a graphic to show my current plans for the year and broad quarterly goals. This will be evaluated and adjusted as the year goes on.

Current Status - Jan 2025

Foundations in HTML, CSS, Git
Already working on CS50x

Q1 Goals

Complete CS50x and CS50P
Complete more online challenges (DEV)
Create a clear course layout for Q2

Final Notes

My language goals this year are to solidify my knowledge in HTML, CSS, and Git. I want to learn JavaScript so I can create better Front-End applications. Also, I want to gain a solid foundation in Python for beginning some Back-End and LeetCode challenges.

Any tips and suggestions are all welcome.

Happy New Year to everyone and good luck on your coding journey! 🎉

December Edition, Glam Up My Markup: Winter Solstice

Madi Lloyd — Mon, 30 Dec 2024 06:57:44 +0000

What I Built

I saw this project posted on 12/25. I am newer to coding and wanted to try out styling the web page. This is still a work in progress.

Demo

madilloyd / DEV-dec-frontend-challenge

Glam Up My Markup: Winter Solstice

DEV-dec-frontend-challenge

Glam Up My Markup: Winter Solstice

This is a submission for Frontend Challenge - December Edition, Glam Up My Markup: Winter Solstice

What I Built

Demo

Journey

Links

Photo by John Price on Unsplash

Photo by Aditya Vyas on Unsplash

https://content.twinkl.co.uk/website/uploaded/07f18642-de62-11ec-870b-0257d57b707f-1666092486.jpg

https://www.amazingperu.com/images/tours/gallery/winter_solistice_inti_raymi_festival_tour1.jpg

https://thebusypagan.com/wp-content/uploads/2023/11/Yule-history-feature.png

https://malevus.com/wp-content/uploads/2023/11/Koliada-festival.jpg

View on GitHub

Journey

I only started a few days ago and have not had much time. I would like to continue to improve this project and get more familiar with page layout through CSS.

Forem: Madi Lloyd

Goal-Oriented Planning Draft

What I Built

Demo

Agent.ai Experience

Goal Visualizer: Simple Goal Tracker

What I Built

Features

Technologies Used

Frontend

External Library

File Structure

How to Use

Future Enhancements Options

How to Run the Project

Acknowledgments

License

Repo

DEMO

Home Page

Enter Goal

Progress Bars

Completion

Copilot Experience

Key JavaScript Changes:

Conclusion

Happy Goal Setting! 🎯

2024 Reflection to Compiling My 2025 Roadmap

Current Status - Jan 2025

Q1 Goals

Final Notes

Happy New Year to everyone and good luck on your coding journey! 🎉

December Edition, Glam Up My Markup: Winter Solstice

What I Built

Demo

madilloyd / DEV-dec-frontend-challenge

Glam Up My Markup: Winter Solstice

DEV-dec-frontend-challenge

What I Built

Demo

Journey

Links

Journey