DEV Community

Dhanush
Dhanush

Posted on

9 4 3 2 5

60 Days Habit Tracker - Productivity Tool : Github Challenge

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

What I Built

A productivity tool to keep track of your habits and each day starting from the date specified. Add note to each task done on that day to build your habit.

You can select the start date and from that 60 days will be displayed showing the date and checkbox and an input to add your note.

At the bottom, you can see the percentage of task or days completed which you followed to develop your habit.

Demo

Live demo at: Github Copilot Challenge 2
60 Days Habit Tracker

Repo

Github-Copilot-Challenge-2

Copilot Experience

Initially, I tried to structure the project. But this is a productivity tool, so I directly started with prompt asking for the HTML file for a 60 Days Habit Tracker app.

prompt

After creating a skeleton, I started to add styles to the existing HTML which is nothing but a banner like page. It looks like this

temp

Then I added date picker to select the start date. Asked Github copilot to add a material styled reset button to revert changes. It was done well with css alone.

faults
Previous project using Github Copilot

Javascript code for darkmode and lightmode were included to make it more attractive.

dark and light modes

A rounded display to show the percentage of task completed.

day wise selection

GitHub Models

I have used only Github copilot VS Code extension for this project.

Conclusion

It was a great experience to develop a simple app like this using Github copilot alone. Literally anyone can create this type of tools with the help of copilot. It saves a lot of time. All these for free.

I would suggest watching this YouTube video Master the core principles of prompt engineering with GitHub Copilot before trying on your own for a better experience.

        Happy building with Github Copilot🤖
Enter fullscreen mode Exit fullscreen mode

Image of AssemblyAI tool

Transforming Interviews into Publishable Stories with AssemblyAI

Insightview is a modern web application that streamlines the interview workflow for journalists. By leveraging AssemblyAI's LeMUR and Universal-2 technology, it transforms raw interview recordings into structured, actionable content, dramatically reducing the time from recording to publication.

Key Features:
🎥 Audio/video file upload with real-time preview
🗣️ Advanced transcription with speaker identification
⭐ Automatic highlight extraction of key moments
✍️ AI-powered article draft generation
📤 Export interview's subtitles in VTT format

Read full post

Top comments (0)

Cloudinary image

Video API: manage, encode, and optimize for any device, channel or network condition. Deliver branded video experiences in minutes and get deep engagement insights.

Learn more

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay