Hey there! In this cool project, you're going to create your very own habit tracking web app. It's going to be AMAZING!
A super awesome web app that helps you track your daily habits - like doing pushups, drinking water, or practicing coding. You'll be able to:
- Add new habits you want to track
- Check them off each day
- See how well you're doing over time
- How to chat to GitHub Copilot to create things you can use
- How to create app with HTML, CSS, Python and JavaScript
-
Log into your GitHub user account (or create one if you don't have any)
-
Click the [Use this template] button at the top of this page and select [Create a new repository].
-
Fill in the form and click [Create repository]
Wait for a minute to copy the files over and page to load
- Click the [Code] button, then select the [Codespaces] tab
- Click [Create codespace on main] button to start your coding workspace
Wait a minute while your coding space loads (it's like loading a video game!)
- Once it's ready, you'll see your project files on the left side, and a Habit Tracking app at the centre
- Open GitHub Copilot Chat, and say "Hello"
Wait for GitHub Copilot Chat to load and reply back to you
- Select [Agent] mode and [Claude Sonnet 3.5] model, and start chatting with the following prompts!
Wait till you see a Habit Tracker starter app loaded and Copilot greet you back.
Hey there! Here's what to do with these prompts:
- Copy each prompt one at a time
- Paste it into the GitHub Copilot Chat window
Wait for Copilot to give you a response (this might take a few minutes)
- Follow Copilot's instructions to build your app step by step
- If you get stuck, ask your instructor for help!
Try these prompts in order - each one builds on the one before:
💡 When you first use GitHub Copilot, your browser might prompt you twice to enable it. Just follow the instructions, and you'll be good to go!
My coach gave me this code, I have no idea what this is, can you help me?
How do I run it?
Add a champion badge when I can do the habit for 5 consecutive days
Give me positive message every day so I can stay motivate, even offline.
The app looks kinda boring, can you change it with Flintstone theme?I want to share my progress with friends, can you add the share buttons for Facebook, TikTok and X?
Awesome! Now you've built an app that looks great, works perfectly for tracking habits, and keeps you motivated. What other cool features would you like to add to make it even better?
Here are some examples:
I want to download the habit into my calendar with daily reminder
I don't like the boring list of check-in dates in the habit page, instead displaying the check-in dates with interesting graph
If your app disappears or stops running, ask Copilot for help by saying:
My app has disappeared, help me run the app.Or, if you'd like to fix it yourself, go to Task Runner side window and select Run Habit Tracking App.
Don't hesitate to ask your instructor or friends if you get stuck—everyone needs help sometimes!