Updates to coding during dry run

Author: GeekTrainer

content/guided-workshop/exercises/5-coding.md

@@ -26,7 +26,7 @@ The shelter wants to add their hours to the webpage for the current day so peopl
 
 GitHub Copilot is a cloud-based service offered for both individuals and businesses. As an individual, you can [sign up for a free trial](https://github.com/github-copilot/signup) of the service. After enrolling you will typically install the extension for your IDE, which is available for [Visual Studio](https://marketplace.visualstudio.com/items?itemName=GitHub.copilotvs), [Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot), [NeoVIM](https://github.com/github/copilot.vim#getting-started) and the [JetBrains IDEs](https://plugins.jetbrains.com/plugin/17718-github-copilot). Because we'll be using the [codespace](./3-codespaces.md) you defined in the previous exercise, you won't need to manually install the extension - you did that when you configured the dev container!
 
-> **IMPORTANT:** You can complete this exercise without GitHub Copilot by manually writing the code, or copying and pasting from the [provided solution](./resources/solutions/hours.js).
+> **IMPORTANT:** You can complete this exercise without GitHub Copilot by manually writing the code. You can also avoid coding altogether by copying and pasting from the [provided solution](../resources/solutions/Hours.js).
 
 1. If you don't already have access to GitHub Copilot, [sign up for a free trial](https://github.com/github-copilot/signup).
 1. In the [previous exercise](./3-codespaces.md) you configured your [devcontainer](https://docs.github.com/en/codespaces/setting-up-your-project-for-codespaces/adding-a-dev-container-configuration/introduction-to-dev-containers) to automatically install the extension for GitHub Copilot, so you're all set and ready to go!
@@ -63,9 +63,17 @@ As we'll be hard-coding the hours, it'll be best to store these as an array of o
 
 After creating the array, we'll need code to store the name of current day, stored in a variable named `today`. Then we can find the current day's hours from `shelterHours`, storing it in a variable named `todayHours`. Finally, we can return some HTML displaying the open and close hours.
 
-## Creating the component with GitHub Copilot
+## Working with GitHub Copilot as your AI pair programmer
 
-Let's see how GitHub Copilot can help us quickly create the component.
+GitHub Copilot is designed to work with you as you write code and comments. It will see the current context, and generate suggestions for what it believes is the most likely next section of code. You can interact with GitHub Copilot by writing comments describing what you want to create, or by coding like you normally would. In either case, GitHub Copilot will continue to make suggestions.
+
+You always have the ability to accept, reject, or modify any suggestions generated by GitHub Copilot. You may find the generated code isn't quite what you want, or is exactly what you need.
+
+As you work with GitHub Copilot, it's important to remember that as it's built upon AI, it behaves in a probabilistic rather than a deterministic fashion. This means the suggestions offered may be different, even with the same prompts. As you're getting started with GitHub Copilot, you may want to explore some [best practices and use cases](https://github.blog/2023-06-20-how-to-write-better-prompts-for-github-copilot/) to get the most out of the tool.
+
+### Creating the component with GitHub Copilot
+
+Let's see how GitHub Copilot can help us quickly create the component. We're going to start by creating the core structure for the component. We'll then begin coding the array to store the store's hour, and see how GitHub Copilot will offer a suggestion to complete the rest of the objects. We'll then add a couple of comments to describe the necessary logic (getting today's date, finding today's hours, then displaying the results).
 
 1. Return to your open codespace. If you closed the browser window, return to your repository and select **Code** then your codespace.
 1. In the **Explorer** window, navigate to **src** > **components**.
@@ -83,15 +91,22 @@ Let's see how GitHub Copilot can help us quickly create the component.
     export default Hours;
     ```
 
-1. Below the comment you added `// add logic`, begin describing the array you wish to create using natural language. You could add a comment which looks like this:
+1. Below the comment you added `// add logic`, begin creating the array by pasting the following code:
 
     ```javascript
-    // create an array called shelterHours with objects for shop hours
-    // each object has a day for the day, open for opening and close for closing
-    // the hours are Monday - Friday 10:00 to 16:00, and Saturday - Sunday 09:00 to 20:00
+    const shelterHours = [
+        { day: "Monday", open: "10:00", close: "16:00" },
+
+    ]
     ```
 
-1. GitHub Copilot **should** begin making code suggestions. These will appear as grey italicized text similar to IntelliSense. To accept the suggestions, you can hit <kbd>Tab</kbd> on your keyboard. Continue to press <kbd>Tab</kbd> until you see the following code generated:
+1. Place your cursor at the end of the line which reads `{ day: "Monday", open: "10:00", close: "16:00" },`. Press <kbd>Enter</kbd> (or <kbd>return</kbd> on a Mac). GitHub Copilot **should** suggest objects for the rest of the week!
+
+    The suggestions from GitHub Copilot will appear as grey italicized text, similar to [IntelliSense](https://code.visualstudio.com/docs/editor/intellisense).
+
+1. With the suggestion displaying on the screen, press <kbd>Tab</kbd> to accept the suggestion.
+
+1. Modify the code to ensure the hours for Saturday and Sunday are correct. Your code will resemble the following:
 
     ```javascript
     const shelterHours = [
@@ -105,7 +120,7 @@ Let's see how GitHub Copilot can help us quickly create the component.
     ];
     ```
 
-    > **IMPORTANT:** As highlighted earlier, GitHub Copilot is AI, meaning it is probabilistic rather than deterministic. The code generated may be different than what appears here. You can make modifications as appropriate, such as adding more information to the comment to describe what you are looking to have created, or updating the generated code.
+    > **IMPORTANT:** As highlighted earlier, GitHub Copilot is AI, meaning it is probabilistic rather than deterministic. The code generated may be different than what appears here. You can make modifications as appropriate, such as adding a comment to describe what you are looking to create, or updating the generated code.
 
 1. Immediately below the newly created array, add a comment to describe the creation of a variable named `today` to store the long name of today's date:
 
@@ -134,7 +149,7 @@ Let's see how GitHub Copilot can help us quickly create the component.
 1. Finally, ask GitHub Copilot to display today's hours:
 
     ```javascript
-    // display todays hours in a div container with an id of hours
+    // display today and the hours in an div with an id of hours
     ```
 
 1. GitHub Copilot will likely suggest the following code line-by-line, which you can accept by pressing <kbd>Tab</kbd>:
@@ -143,18 +158,16 @@ Let's see how GitHub Copilot can help us quickly create the component.
     return (
         <div id="hours">
             <h2>Today's Hours</h2>
-            <p>{todayHours.day}: {todayHours.open} to {todayHours.close}</p>
+            <p>{todayHours.day} {todayHours.open} - {todayHours.close}</p>
         </div>
-    );
+    )
     ```
 
-1. You can now make any updates you might like to the resulting code. For example, you might want to update `<h1>` to be `<h2>` instead.
-
 > **NOTE:** As highlighted, an example solution is provided for the [Hours.js](../resources/solutions/Hours.js) component.
 
 ## Add the Hours component to index.js
 
-Let's finish out our coding by displaying the `Hours` component to **index.js**, which is the homepage.
+Let's finish out our coding by displaying the `Hours` component on **index.js**, which is the homepage.
 
 1. In **Explorer**, open **src** > **pages** > **index.js**.
 1. Under the comment which reads `// TODO: Import Hours component`, add the following code to import the `Hours` component:
@@ -180,3 +193,8 @@ All developers write code with some form of assistance. This might come from a h
 With the code added, it's time to use the GitHub flow to [incorporate your changes into the code base](./6-github-flow.md).
 
 ## Resources
+
+- [GitHub Copilot](https://github.com/features/copilot)
+- [How to use GitHub Copilot: Prompts, tips, and use cases](https://github.blog/2023-06-20-how-to-write-better-prompts-for-github-copilot/)
+- [Getting started with GitHub Copilot](https://docs.github.com/en/copilot/getting-started-with-github-copilot)
+- [GitHub Skills - Code with GitHub Copilot](https://github.com/skills/copilot-codespaces-vscode)

content/guided-workshop/resources/solutions/Hours.js

@@ -1,32 +1,32 @@
 import React from "react";
 
-const Hours = () => {
-    // create an array called shelterHours with objects for shop hours
-    // each object has a day for the day, open for opening and close for closing
-    // the hours are Monday - Friday 10:00 to 16:00, and Saturday - Sunday 09:00 to 20:00
-    const shelterHours = [
-        { day: "Monday", open: "10:00", close: "16:00" },
-        { day: "Tuesday", open: "10:00", close: "16:00" },
-        { day: "Wednesday", open: "10:00", close: "16:00" },
-        { day: "Thursday", open: "10:00", close: "16:00" },
-        { day: "Friday", open: "10:00", close: "16:00" },
-        { day: "Saturday", open: "09:00", close: "20:00" },
-        { day: "Sunday", open: "09:00", close: "20:00" }
-    ];
+    const Hours = () => {
+        // add logic
 
-    // get the long day name and store it in a variable named today
-    const today = new Date().toLocaleDateString("en-US", { weekday: "long" });
+        const shelterHours = [
+            { day: "Monday", open: "10:00", close: "16:00" },
+            { day: "Tuesday", open: "10:00", close: "16:00" },
+            { day: "Wednesday", open: "10:00", close: "16:00" },
+            { day: "Thursday", open: "10:00", close: "16:00" },
+            { day: "Friday", open: "10:00", close: "16:00" },
+            { day: "Saturday", open: "9:00", close: "20:00" },
+            { day: "Sunday", open: "9:00", close: "20:00" },
+    
+        ]
 
-    // get today's hours
-    const todayHours = shelterHours.find(day => day.day === today);
+        // get the long day name and store it in a variable called today
+        const today = new Date().toLocaleDateString('en-US', { weekday: 'long' });
 
-    // display todays in a div container with an id of hours
-    return (
-        <div id="hours">
-            <h2>Today's Hours</h2>
-            <p>{todayHours.day}: {todayHours.open} to {todayHours.close}</p>
-        </div>
-    );
-};
+        // get today's hours
+        const todayHours = shelterHours.find((day) => day.day === today);
+
+        // display today and the hours in an div with an id of hours
+        return (
+            <div id="hours">
+                <h2>Today's Hours</h2>
+                <p>{todayHours.day} {todayHours.open} - {todayHours.close}</p>
+            </div>
+        )
+    }
 
 export default Hours;