Merge pull request #1549 from microsoft/softchris-patch-8

softchris · web-flow · commit 79c84998b216 · 2025-10-14T21:38:39.000+01:00
docs: adding GHCP challenges
diff --git a/2-js-basics/2-functions-methods/README.md b/2-js-basics/2-functions-methods/README.md
@@ -18,7 +18,7 @@ When we think about writing code, we always want to ensure our code is readable.
 
 At its core, a function is a block of code we can execute on demand. This is perfect for scenarios where we need to perform the same task multiple times; rather than duplicating the logic in multiple locations (which would make it hard to update when the time comes), we can centralize it in one location, and call it whenever we need the operation performed - you can even call functions from other functions!.
 
-Just as important is the ability to name a function. While this might seem trivial, the name provides a quick way of documenting a section of code. You could think of this as a label on a button. If I click on a button which reads "Cancel timer", I know it's going to stop running the clock.
+Just as important is the ability to name a function. While this might seem trivial, the name provides a quick way of documenting a section of code. You could think of this as a label on a button. If I click on a button which reads "Cancel timer", I know it's going to stop running the clock. 
 
 ## Creating and calling a function
 
@@ -180,10 +180,25 @@ You've now seen we have three ways to pass a function as a parameter and might b
 
 ---
 
+
+
 ## 🚀 Challenge
 
 Can you articulate in one sentence the difference between functions and methods? Give it a try!
 
+## GitHub Copilot Agent Challenge 🚀
+
+Use the Agent mode to complete the following challenge:
+
+**Description:** Create a utility library of mathematical functions that demonstrates different function concepts covered in this lesson, including parameters, default values, return values, and arrow functions.
+
+**Prompt:** Create a JavaScript file called `mathUtils.js` that contains the following functions:
+1. A function `add` that takes two parameters and returns their sum
+2. A function `multiply` with default parameter values (second parameter defaults to 1)
+3. An arrow function `square` that takes a number and returns its square
+4. A function `calculate` that accepts another function as a parameter and two numbers, then applies the function to those numbers
+5. Demonstrate calling each function with appropriate test cases
+
 ## Post-Lecture Quiz
 [Post-lecture quiz](https://ff-quizzes.netlify.app)
 
diff --git a/2-js-basics/3-making-decisions/README.md b/2-js-basics/3-making-decisions/README.md
@@ -197,12 +197,37 @@ if (firstNumber > secondNumber) {
 
 ---
 
+
+
 ## 🚀 Challenge
 
 Create a program that is written first with logical operators, and then rewrite it using a ternary expression. What's your preferred syntax?
 
 ---
 
+## GitHub Copilot Agent Challenge 🚀
+
+Use the Agent mode to complete the following challenge:
+
+**Description:** Create a comprehensive grade calculator that demonstrates multiple decision-making concepts from this lesson, including if-else statements, switch statements, logical operators, and ternary expressions.
+
+**Prompt:** Write a JavaScript program that takes a student's numerical score (0-100) and determines their letter grade using the following criteria:
+- A: 90-100
+- B: 80-89  
+- C: 70-79
+- D: 60-69
+- F: Below 60
+
+Requirements:
+1. Use an if-else statement to determine the letter grade
+2. Use logical operators to check if the student passes (grade >= 60) AND has honors (grade >= 90)
+3. Use a switch statement to provide specific feedback for each letter grade
+4. Use a ternary operator to determine if the student is eligible for the next course (grade >= 70)
+5. Include input validation to ensure the score is between 0 and 100
+
+Test your program with various scores including edge cases like 59, 60, 89, 90, and invalid inputs.
+
+
 ## Post-Lecture Quiz
 
 [Post-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/12)
diff --git a/2-js-basics/4-arrays-loops/README.md b/2-js-basics/4-arrays-loops/README.md
@@ -117,6 +117,14 @@ for (let i = 0; i < iceCreamFlavors.length; i++) {
 
 ---
 
+## GitHub Copilot Agent Challenge 🚀
+
+Use the Agent mode to complete the following challenge:
+
+**Description:** Build a data processing function that combines arrays and loops to analyze a dataset.
+
+**Prompt:** Create a function called `analyzeGrades` that takes an array of student grade objects (each containing name and score properties) and returns statistics including the highest score, lowest score, average score, and count of students who passed (score >= 70). Use loops to process the data.
+
 ## 🚀 Challenge
 
 There are other ways of looping over arrays other than for and while loops. There are [forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of), and [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Rewrite your array loop using one of these techniques.
diff --git a/3-terrarium/1-intro-to-html/README.md b/3-terrarium/1-intro-to-html/README.md
@@ -217,10 +217,19 @@ Add this markup above the last `</div>` tag:
 
 ---
 
+## GitHub Copilot Agent Challenge 🚀
+
+Use the Agent mode to complete the following challenge:
+
+**Description:** Create a semantic HTML structure for a plant care guide section that could be added to the terrarium project.
+
+**Prompt:** Create a semantic HTML section that includes a main heading "Plant Care Guide", three subsections with headings "Watering", "Light Requirements", and "Soil Care", each containing a paragraph of plant care information. Use proper semantic HTML tags like `<section>`, `<h2>`, `<h3>`, and `<p>` to structure the content appropriately.
+
 ## 🚀Challenge
 
 There are some wild 'older' tags in HTML that are still fun to play with, though you shouldn't use deprecated tags such as [these tags](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) in your markup. Still, can you use the old `<marquee>` tag to make the h1 title scroll horizontally? (if you do, don't forget to remove it afterwards)
 
+
 ## Post-Lecture Quiz
 
 [Post-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/16)
diff --git a/3-terrarium/2-intro-to-css/README.md b/3-terrarium/2-intro-to-css/README.md
@@ -249,6 +249,18 @@ We are also using `rem` for the border-radius, a font-relative length. Read more
 
 ---
 
+## GitHub Copilot Agent Challenge 🚀
+
+Use the Agent mode to complete the following challenge:
+
+**Description:** Create a CSS animation that makes the terrarium plants gently sway back and forth, simulating a natural breeze effect. This will help you practice CSS animations, transforms, and keyframes while enhancing the visual appeal of your terrarium.
+
+**Prompt:** Add CSS keyframe animations to make the plants in the terrarium sway gently from side to side. Create a swaying animation that rotates each plant slightly (2-3 degrees) left and right with a duration of 3-4 seconds, and apply it to the `.plant` class. Make sure the animation loops infinitely and has an easing function for natural movement.
+
+---
+
+
+
 ## 🚀Challenge
 
 Add a 'bubble' shine to the left bottom area of the jar to make it look more glasslike. You will be styling the `.jar-glossy-long` and `.jar-glossy-short` to look like a reflected shine. Here's how it would look:
diff --git a/3-terrarium/3-intro-to-DOM-and-closures/README.md b/3-terrarium/3-intro-to-DOM-and-closures/README.md
@@ -195,6 +195,14 @@ Now you have completed your project!
 
 ---
 
+## GitHub Copilot Agent Challenge 🚀
+
+Use the Agent mode to complete the following challenge:
+
+**Description:** Enhance the terrarium project by adding a reset functionality that returns all plants to their original positions with smooth animations.
+
+**Prompt:** Create a reset button that, when clicked, animates all plants back to their original sidebar positions using CSS transitions. The function should store the original positions when the page loads and smoothly transition plants back to those positions over 1 second when the reset button is pressed.
+
 ## 🚀Challenge
 
 Add new event handler to your closure to do something more to the plants; for example, double-click a plant to bring it to the front. Get creative!
diff --git a/4-typing-game/typing-game/README.md b/4-typing-game/typing-game/README.md
@@ -317,6 +317,21 @@ Click on **start**, and start typing away! It should look a little like the anim
 
 ---
 
+## GitHub Copilot Agent Challenge 🎮
+
+Use the Agent mode to complete the following challenge:
+
+**Description:** Extend the typing game by implementing a difficulty system that adjusts the game based on player performance. This challenge will help you practice advanced event handling, data analysis, and dynamic UI updates.
+
+**Prompt:** Create a difficulty adjustment system for the typing game that:
+1. Tracks the player's typing speed (words per minute) and accuracy percentage
+2. Automatically adjusts to three difficulty levels: Easy (simple quotes), Medium (current quotes), Hard (complex quotes with punctuation)
+3. Displays the current difficulty level and player statistics on the UI
+4. Implements a streak counter that increases difficulty after 3 consecutive good performances
+5. Adds visual feedback (colors, animations) to indicate difficulty changes
+
+Add the necessary HTML elements, CSS styles, and JavaScript functions to implement this feature. Include proper error handling and ensure the game remains accessible with appropriate ARIA labels.
+
 ## 🚀 Challenge
 
 Add more functionality
diff --git a/5-browser-extension/1-about-browsers/README.md b/5-browser-extension/1-about-browsers/README.md
@@ -144,6 +144,14 @@ For now, the extension should build and, if you deploy it into Edge as an extens
 
 Congratulations, you've taken the first steps towards building a browser extension. In subsequent lessons, you'll make it more functional and useful.
 
+## GitHub Copilot Agent Challenge 🚀
+
+Use the Agent mode to complete the following challenge:
+
+**Description:** Enhance the browser extension by adding form validation and user feedback features to improve the user experience when entering API keys and region codes.
+
+**Prompt:** Create JavaScript validation functions that check if the API key field contains at least 20 characters and if the region code follows the correct format (like 'US-NEISO'). Add visual feedback by changing input border colors to green for valid inputs and red for invalid ones. Also add a toggle feature to show/hide the API key for security purposes.
+
 ---
 
 ## 🚀 Challenge
diff --git a/5-browser-extension/2-forms-browsers-local-storage/README.md b/5-browser-extension/2-forms-browsers-local-storage/README.md
@@ -206,6 +206,14 @@ Congratulations! If you build your extension (`npm run build`) and refresh it in
 
 ---
 
+## GitHub Copilot Agent Challenge 🚀
+
+Use the Agent mode to complete the following challenge:
+
+**Description:** Enhance the browser extension by adding error handling improvements and user experience features. This challenge will help you practice working with APIs, local storage, and DOM manipulation using modern JavaScript patterns.
+
+**Prompt:** Create an enhanced version of the displayCarbonUsage function that includes: 1) A retry mechanism for failed API calls with exponential backoff, 2) Input validation for the region code before making the API call, 3) A loading animation with progress indicators, 4) Caching of API responses in localStorage with expiration timestamps (cache for 30 minutes), and 5) A feature to display historical data from previous API calls. Also add proper TypeScript-style JSDoc comments to document all function parameters and return types.
+
 ## 🚀 Challenge
 
 We've discussed several types of API so far in these lessons. Choose a web API and research in depth what it offers. For example, take a look at APIs available within browsers such as the [HTML Drag and Drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API). What makes a great API in your opinion?
diff --git a/5-browser-extension/3-background-tasks-and-performance/README.md b/5-browser-extension/3-background-tasks-and-performance/README.md
@@ -139,8 +139,18 @@ Now, rebuild your extension (`npm run build`), refresh and launch your extension
 
 Congratulations, you've built a useful browser extension and learned more about how the browser works and how to profile its performance.
 
+## GitHub Copilot Agent Challenge 🚀
+
+Use the Agent mode to complete the following challenge:
+
+**Description:** Enhance the browser extension's performance monitoring capabilities by adding a feature that tracks and displays load times for different components of the extension.
+
+**Prompt:** Create a performance monitoring system for the browser extension that measures and logs the time it takes to fetch CO2 data from the API, calculate colors, and update the icon. Add a function called `performanceTracker` that uses the Performance API to measure these operations and displays the results in the browser console with timestamps and duration metrics.
+
 ---
 
+
+
 ## 🚀 Challenge
 
 Investigate some open source websites that have been around a long time ago, and, based on their GitHub history, see if you can determine how they were optimized over the years for performance, if at all. What is the most common pain point?
diff --git a/6-space-game/1-introduction/README.md b/6-space-game/1-introduction/README.md
@@ -207,6 +207,14 @@ As things gets more complicated when your game grows, this pattern stays the sam
 
 ---
 
+## GitHub Copilot Agent Challenge 🚀
+
+Use the Agent mode to complete the following challenge:
+
+**Description:** Create a simple game object system using both inheritance and the pub/sub pattern. You'll implement a basic game where different objects can communicate through events without directly knowing about each other.
+
+**Prompt:** Create a JavaScript game system with the following requirements: 1) Create a base GameObject class with x, y coordinates and a type property. 2) Create a Hero class that extends GameObject and can move. 3) Create an Enemy class that extends GameObject and can chase the hero. 4) Implement an EventEmitter class for the pub/sub pattern. 5) Set up event listeners so when the hero moves, nearby enemies receive a 'HERO_MOVED' event and update their position to move toward the hero. Include console.log statements to show the communication between objects.
+
 ## 🚀 Challenge
 
 Think about how the pub-sub pattern can enhance a game. Which parts should emit events, and how should the game react to them? Now's your chance to get creative, thinking of a new game and how its parts might behave.
diff --git a/6-space-game/2-drawing-to-canvas/README.md b/6-space-game/2-drawing-to-canvas/README.md
@@ -199,6 +199,14 @@ Please try solving it yourself first but if you get stuck, have a look at a [sol
 
 ---
 
+## GitHub Copilot Agent Challenge 🚀
+
+Use the Agent mode to complete the following challenge:
+
+**Description:** Enhance your space game canvas by adding visual effects and interactive elements using the Canvas API techniques you've learned.
+
+**Prompt:** Create a new file called `enhanced-canvas.html` with a canvas that displays animated stars in the background, a pulsing health bar for the hero ship, and enemy ships that slowly move downward. Include JavaScript code that draws twinkling stars using random positions and opacity, implements a health bar that changes color based on health level (green > yellow > red), and animates the enemy ships to move down the screen at different speeds.
+
 ## 🚀 Challenge
 
 You've learned about drawing with the 2D-focused Canvas API; take a look at the [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API), and try to draw a 3D object.
diff --git a/6-space-game/3-moving-elements-around/README.md b/6-space-game/3-moving-elements-around/README.md
@@ -371,6 +371,14 @@ The above will start a HTTP Server on address `http://localhost:5000`. Open up a
 
 ---
 
+## GitHub Copilot Agent Challenge 🚀
+
+Use the Agent mode to complete the following challenge:
+
+**Description:** Enhance the space game by implementing boundary detection and smooth movement controls. This challenge will help you practice game object manipulation, event handling, and canvas rendering techniques.
+
+**Prompt:** Create a boundary detection system that prevents the hero spaceship from moving outside the canvas boundaries. Additionally, implement a smooth movement system where holding down arrow keys creates continuous movement instead of single-step movement. Make sure the hero stops immediately when keys are released and add visual feedback when the hero hits a boundary (like a brief color change or glow effect).
+
 ## 🚀 Challenge
 
 As you can see, your code can turn into 'spaghetti code' when you start adding functions and variables and classes. How can you better organize your code so that it is more readable? Sketch out a system to organize your code, even if it still resides in one file.
diff --git a/6-space-game/4-collision-detection/README.md b/6-space-game/4-collision-detection/README.md
@@ -278,8 +278,18 @@ The above will start a HTTP Server on address `http://localhost:5000`. Open up a
 
 At this point, your game has some functionality! You can navigate with your arrow keys, fire a laser with your space bar, and enemies disappear when you hit them. Well done!
 
+## GitHub Copilot Agent Challenge 🚀
+
+Use the Agent mode to complete the following challenge:
+
+**Description:** Enhance the collision detection system by implementing power-ups that spawn randomly and provide temporary abilities when collected by the hero ship.
+
+**Prompt:** Create a PowerUp class that extends GameObject and implement collision detection between the hero and power-ups. Add at least two types of power-ups: one that increases fire rate (reduces cooldown) and another that creates a temporary shield. Include spawn logic that creates power-ups at random intervals and positions.
+
 ---
 
+
+
 ## 🚀 Challenge
 
 Add an explosion! Take a look at the game assets in [the Space Art repo](../solution/spaceArt/readme.txt) and try to add an explosion when the laser hits an alien
diff --git a/6-space-game/5-keeping-score/README.md b/6-space-game/5-keeping-score/README.md
@@ -172,6 +172,16 @@ By the end of this work, you should see the small 'life' ships at the bottom rig
 
 ---
 
+## GitHub Copilot Agent Challenge 🚀
+
+Use the Agent mode to complete the following challenge:
+
+**Description:** Enhance the space game's scoring system by implementing a high score feature with persistent storage and bonus scoring mechanics.
+
+**Prompt:** Create a high score system that saves the player's best score to localStorage. Add bonus points for consecutive enemy kills (combo system) and implement different point values for different enemy types. Include a visual indicator when the player achieves a new high score and display the current high score on the game screen.
+
+
+
 ## 🚀 Challenge
 
 Your code is almost complete. Can you envision your next steps?
diff --git a/6-space-game/6-end-condition/README.md b/6-space-game/6-end-condition/README.md
@@ -205,6 +205,14 @@ The above will start a HTTP Server on address `http://localhost:5000`. Open up a
 
 ---
 
+## GitHub Copilot Agent Challenge 🚀
+
+Use the Agent mode to complete the following challenge:
+
+**Description:** Enhance the space game by implementing a level progression system with increasing difficulty and bonus features.
+
+**Prompt:** Create a multi-level space game system where each level has more enemy ships with increased speed and health. Add a scoring multiplier that increases with each level, and implement power-ups (like rapid fire or shield) that randomly appear when enemies are destroyed. Include a level completion bonus and display the current level on screen alongside the existing score and lives.
+
 ## 🚀 Challenge
 
 Add a sound! Can you add a sound to enhance your game play, maybe when there's a laser hit, or the hero dies or wins? Have a look at this [sandbox](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play) to learn how to play sound using JavaScript
diff --git a/7-bank-project/1-template-route/README.md b/7-bank-project/1-template-route/README.md
@@ -291,6 +291,14 @@ Now try to use the back and forward buttons of your browsers, and check that the
 
 ---
 
+## GitHub Copilot Agent Challenge 🚀
+
+Use the Agent mode to complete the following challenge:
+
+**Description:** Enhance the banking app by implementing error handling and a 404 page template for invalid routes, improving the user experience when navigating to non-existent pages.
+
+**Prompt:** Create a new HTML template with id "not-found" that displays a user-friendly 404 error page with styling. Then modify the JavaScript routing logic to show this template when users navigate to invalid URLs, and add a "Go Home" button that navigates back to the login page.
+
 ## 🚀 Challenge
 
 Add a new template and route for a third page that shows the credits for this app.
diff --git a/7-bank-project/2-forms/README.md b/7-bank-project/2-forms/README.md
diff --git a/7-bank-project/3-data/README.md b/7-bank-project/3-data/README.md
diff --git a/7-bank-project/4-state-management/README.md b/7-bank-project/4-state-management/README.md
diff --git a/9-chat-project/README.md b/9-chat-project/README.md
diff --git a/README.md b/README.md
