Programming

A productivity tool focused on new Beginnings: Skill Tracker

This is a submission for the GitHub Copilot Challenge : New Beginnings What I Built Skill tracker: An app that will help to track and manage the skills and goals of New Beginning in simplistic way. Features Add your Skills and Goals. Set Start Date and Deadline. App shows the days left to meet deadline for awareness. A progress bar to update the learning progress in visual. Save important links of resources for your study. A clock to stay aware of passing time/second Edit save or Delete skills that no longer necessary. Demo https://nileshroy200.github.io/Skill-Tracker/ Repo https://github.com/nileshroy200/Skill-Tracker.git Copilot Experience Without Copilot this challenge was almost impossible to me to build in One day. Here's How I used Copilot through my building process. Worked with Document Object Model. Added JavaScript to selecting Element, dynamically change and update content through Event Listeners. Created function to generate and add new card for skills and Options to Edit, save and delete. Solved problem to save link to input field that will show the corresponding placeholder text instead of the link directly, works as a button to redirects to page following the saved link. Logical errors are difficult to figure out. By writing clear, concise prompt, Copilot assisted it better to navigate understand and fix it. Smoothly able to fixed Errors by directly refereeing the console error message in the chat. Built Logic and Math for Time calculation and Tracking functions and update date format. Figured out the issue I encountered, while pushing changes to GitHub repository. Explored new property attribute of different HTML form elements to make feature work well. Used inline chat to write CSS Better. Used agent like @wokdspace, @terminal and /fix, /explain command through out the building processed. Used the chat to discussed about doubt, how things are working in the process of building. It helped me to understand to the point. Used Inline Chat for CSS and HTML GitHub Models I did not use any GitHub Models My Best Experience Fast Problem solving Brainstorming and fast Learning with the processes. ### Powerful lessons I have gained The power of learning through building than just watching tutorial with tiny practices. The traditional way of learning is replacing with a new method of learning and building. Technical Lesson Learned about New CSS Property and HTML attributes Learned about JavaScript DOM Manipulation, working with event listener/handler and more. Learned about Copilot Of course and how to work with AI and utilize it. Learned about Git, GitHub, how to host and deploy with GitHub pages. Building Reflections I realized my code is not well optimized both in JavaScript and CSS. Noticed I build the Layout in CSS in a wrong way. I wanted to optimized for responsive design for tablet and phone (Out of Time) Wanted to utilized Local Storage to make it usable than just keeping as a demo (Out of Time) Conclusion This is my first build experience with a Basic Project. I am Nilesh Roy, started learning recently as a self-thought, standing in beginner level. With this little Basic Project I have gained some exciting experiences. I joined Dev.to at the beginning of this year, few days ago I noticed this challenge and decided to participate, but lack the confidence as it was out of my present capabilities just with HTML, CSS and Basic JavaScript knowledge. But decided to submit this challenge and I'm very thankful for this now.

Jan 19, 2025 - 22:18

A productivity tool focused on new Beginnings: Skill Tracker

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

What I Built

Skill tracker: An app that will help to track and manage the skills and goals of New Beginning in simplistic way.

Features

Add your Skills and Goals.
Set Start Date and Deadline.
App shows the days left to meet deadline for awareness.
A progress bar to update the learning progress in visual.
Save important links of resources for your study.
A clock to stay aware of passing time/second
Edit save or Delete skills that no longer necessary.

Demo

https://nileshroy200.github.io/Skill-Tracker/

Repo

https://github.com/nileshroy200/Skill-Tracker.git

Copilot Experience

Without Copilot this challenge was almost impossible to me to build in One day. Here's How I used Copilot through my building process.

Worked with Document Object Model. Added JavaScript to selecting Element, dynamically change and update content through Event Listeners.
Created function to generate and add new card for skills and Options to Edit, save and delete.
Solved problem to save link to input field that will show the corresponding placeholder text instead of the link directly, works as a button to redirects to page following the saved link.
Logical errors are difficult to figure out. By writing clear, concise prompt, Copilot assisted it better to navigate understand and fix it.
Smoothly able to fixed Errors by directly refereeing the console error message in the chat.
Built Logic and Math for Time calculation and Tracking functions and update date format.
Figured out the issue I encountered, while pushing changes to GitHub repository.
Explored new property attribute of different HTML form elements to make feature work well. Used inline chat to write CSS Better.
Used agent like @wokdspace, @terminal and /fix, /explain command through out the building processed.
Used the chat to discussed about doubt, how things are working in the process of building. It helped me to understand to the point.
Used Inline Chat for CSS and HTML

GitHub Models

I did not use any GitHub Models

My Best Experience

Fast Problem solving
Brainstorming and fast Learning with the processes. ### Powerful lessons I have gained
The power of learning through building than just watching tutorial with tiny practices.
The traditional way of learning is replacing with a new method of learning and building.

Technical Lesson

Learned about New CSS Property and HTML attributes
Learned about JavaScript DOM Manipulation, working with event listener/handler and more.
Learned about Copilot Of course and how to work with AI and utilize it.
Learned about Git, GitHub, how to host and deploy with GitHub pages.

Building Reflections

I realized my code is not well optimized both in JavaScript and CSS.
Noticed I build the Layout in CSS in a wrong way.
I wanted to optimized for responsive design for tablet and phone (Out of Time)
Wanted to utilized Local Storage to make it usable than just keeping as a demo (Out of Time)

Conclusion

This is my first build experience with a Basic Project. I am Nilesh Roy, started learning recently as a self-thought, standing in beginner level. With this little Basic Project I have gained some exciting experiences.

I joined Dev.to at the beginning of this year, few days ago I noticed this challenge and decided to participate, but lack the confidence as it was out of my present capabilities just with HTML, CSS and Basic JavaScript knowledge. But decided to submit this challenge and I'm very thankful for this now.