2. core exercises.md

Workshop exercises

Core exercise

The following exercises will help you get started with GitHub Copilot. You must have completed the setup instructions before starting these steps.

Step by step instructions

1. Getting the application running

Starting Point: You should have the repo open in VSCode (or your supported IDE)

1. Press CTRL + ` to open the terminal window in VS Code if it is not already open.

2. Enter npm install in the terminal window and press ENTER to install the required dependencies. TIP: Ignore any issues displayed after you run this command.

Let's start by running the application to learn what it does.

3. Enter npm start in the terminal window and press ENTER to run the application.

4. In the pop-up window that appears in the bottom right corner of the Codespace window, click the Open in Browser button. This will securely map port 3000 from the Codespace environment (if you're using Codespaces) to your local browser so you can see the running calculator application.

5. Do some simple calculations to show that the calculator is working as expected.

6. Close the browser window for now and return to the Codespace window.

7. Ensure your focus is in the terminal window and press CTRL + C to stop the application.

2. Adding features using GitHub Copilot

TO DO - You've been asked to add a new feature to the calculator application.

Adding the buttons to the calculator UI

1. Open the public/index.html file in the editor window.

2. Scroll down to where you see the <!-- TODO: Buttons --> comment

3. Add a new line below this comment and type the following two lines. You should see GitHub Copilot start to autocomplete the second line as you type. When you see this, just press TAB to accept the completion.

<!-- add a button for a power (or exponential) function --> <button class="btn" onClick="operationPressed('^')">^</button>

Your finished snippet should match the following.

Adding the logic for the new features

5. Open the api/controller.js file in the editor window.

6. Scroll down to where you see the // TODO: Add operator comment

7. Press ENTER at the end of the line that defines the divide function.

8. Start typing the following line and notice that GitHub Copilot should start to offer code completion half way through the word "power" as you're typing. Press TAB to accept the suggestion.

'power': function(a, b) { return Math.pow(a, b) },

9. Open the public/client.js file in the editor window.

10. Scroll down to where you see the // TODO: Add operator comment (Line 22)

11. Move your cursor to the end of the line 35 (to the right of break; and press ENTER.

GitHub Copilot should display ghost text suggesting the code shown in the following screenshot. Press TAB to accept the suggestion.

12. Press ENTER at the end of the line, then accept the next two lines Copilot suggests.

Your completed addition should match the following.

13. Press CTRL + ` to open the terminal window in VS Code.

14. Enter npm start in the terminal window and press ENTER to run the application.

15. You should test the new button by clicking 3, then the "^" (power) button, then click 2. Click "=" and the result should be 9.

16. Close the browser window, return to the Terminal window in Codespaces and press CTRL+C to terminate the application.

Success, you have enhanced the calculator application using GitHub Copilot!

---

Hopefully your calculator is working! Remember, GitHub Copilot is probabilistic so you may not get the exact same code suggestions as we did. If you're not happy with the suggestions, you can always press CTRL + Z to undo the changes and try again.

What's next?

You're now ready to start the challenge exercises to see how you can leverage the power of GitHub Copilot to solve a number of challenges yourself.