6 |
7 | In this fun workshop, you will learn how to use GitHub Copilot to enhance a node-based Calculator, with little to no coding experience required.
8 |
9 | The project contains a simple node.js application that exposes REST APIs to perform arithmetic on integers, and provides a test suite with mocha and chai.
10 |
11 | Estimated time to complete: `10 to 60 minutes`
12 |
13 | Participants will be guided to install the GitHub Copilot VS Code extension, and then use it to enhance a simple Node Calculator app. You will also use GitHub Copilot to write some missing unit tests for the Calculator app.
14 |
15 |
16 | ## Instructions
17 |
18 | Inside the `.instructions` folder you will find a number of markdown files that contain the instructions for this workshop.
19 |
20 | Filename | Description
21 | --- | ---
22 | [1. setup.md]() | Instructions for installing the GitHub Copilot VS Code extension and joining the GitHub Copilot trial.
23 | [2. core exercises.md]() | Instructions for the core exercise of this workshop.
24 | [3. challenge exercises.md]() | Challenge exercises for participants to complete.
25 | [4. additional resources.md]() | Additional resources for participants to explore after the workshop.
26 |
27 |
28 | ## Running a workshop?
29 |
30 | If you're planning to run a GitHub Copilot workshop, please review the [workshop guide]() for tips and tricks to help you run a successful workshop.
31 |
32 |
33 | ## Project Structure
34 |
35 | In this project you will find:
36 |
37 | * the node-based Calculator application
38 | * a `test` folder containing MOCHA unit tests for the Calculator app
39 | * a devcontainer that installs GitHub Copilot when the Codespace is created (If you want to use Codespaces)
40 | * an `.instructions` folder all the instructions for this workshop.
41 | * an `assets` folder containing images used in this workshop documentation.
42 |
43 |
44 |
45 | ## FAQ
46 |
47 | - **How do I get a GitHub Copilot license?**
48 | - You can request a trial license from your GitHub Sales representative or via Copilot for Individuals or Business licenses.
49 | - **How do I get a GitHub Codespaces license?**
50 | - Codespaces is included with GitHub Enterprise Cloud, GitHub Enterprise Server, and GitHub Free. You can check under your [billing settings page](https://github.com/settings/billing).
51 | - **I am having trouble activating GitHub Copilot after I load the plugin, what should I do?**
52 | - This could be because you launched your Codespace before you activated GitHub Copilot or accepted the invitation to the trial org. Please try to reload your Codespace and try again.
53 |
54 | ## Acknowledgements
55 |
56 | A special thanks to the following awesome Hubbers who have contributed in many different ways to our workshops.
57 | [pierluigi](https://github.com/pierluigi), [parroty](https://github.com/yuichielectric), [yuichielectric](https://github.com/yuichielectric), [dchomh](https://github.com/dchomh), [nolecram](https://github.com/nolecram), [rsymo](https://github.com/rsymo), [damovisa](https://github.com/damovisa) and anyone else I've inadvertently missed.
58 |
59 | Enjoy your workshop!
60 | [anthonyborton](https://github.com/anthonyborton)
61 |
62 | _v1.0 Released June, 2023_
--------------------------------------------------------------------------------
/public/default.css:
--------------------------------------------------------------------------------
1 | BODY {
2 | height: 100%;
3 | width: 100%;
4 | padding: 0;
5 | margin: 0;
6 | background-color: #1b4076;
7 | }
8 |
9 | @media screen and (min-device-width: 500px) and (min-device-height: 1024px) {
10 | BODY {
11 | transform: scale(1.75);
12 | transform-origin: 50% 0;
13 | height: 50%;
14 | }
15 | }
16 |
17 | @media screen and (min-device-width: 1024px) and (min-device-height: 1366px) {
18 | BODY {
19 | transform: scale(2.0);
20 | transform-origin: 50% 0;
21 | height: 50%;
22 | }
23 | }
24 |
25 | .container {
26 | min-width: 250px;
27 | min-height: 531px;
28 | width: 250px;
29 | padding: 25px;
30 | margin: 0 auto;
31 | position: relative;
32 | background-image: url(background.png);
33 | background-size: 300px 531px;
34 | background-repeat: no-repeat;
35 | background-position: center top;
36 | }
37 |
38 | #results {
39 | position: relative;
40 | top: 0;
41 | left: 0;
42 | }
43 |
44 | #buttons {
45 | position: relative;
46 | }
47 |
48 | #result {
49 | background-color: #9b9b9b;
50 | width: 226px;
51 | height: 63px;
52 | margin: 0;
53 | padding: 0 12px;
54 | position: absolute;
55 | border: 0;
56 | left: 0;
57 | top: 32px;
58 | font-family: system-ui;
59 | font-size: 25px;
60 | text-align: right;
61 | }
62 |
63 | /*BUTTON {
64 | background-color: #d5d5d5;
65 | border: 0;
66 | border-radius: 0;
67 | width: 55px;
68 | height: 42px;
69 | position: absolute;
70 |
71 | font-size: 22px;
72 | }*/
73 |
74 | #sign,
75 | #clear {
76 | font-size: 17px;
77 | }
78 |
79 | #clearEntry {
80 | font-size: 15px;
81 | }
82 |
83 | #image-icon {
84 | left: 0px;
85 | top: 202px;
86 | position: relative;
87 | width: 55px;
88 | height: 42px;
89 | }
90 |
91 | .resultchar {
92 | display: inline-block;
93 | width: 25px;
94 | height: 45px;
95 | background: url('digits.png') 0 0 no-repeat;
96 | background-size: cover;
97 | margin-top: 10px;
98 | font: 0/0 Arial;
99 | color: rgba(255, 255, 255, 0);
100 | text-indent: -9999px;
101 | z-index: 1;
102 | }
103 |
104 | .digit0 {
105 | background-position: 0 0;
106 | }
107 |
108 | .digit1 {
109 | background-position: -25px 0;
110 | }
111 |
112 | .digit2 {
113 | background-position: -50px 0;
114 | }
115 |
116 | .digit3 {
117 | background-position: -75px 0;
118 | }
119 |
120 | .digit4 {
121 | background-position: -100px 0;
122 | }
123 |
124 | .digit5 {
125 | background-position: -125px 0;
126 | }
127 |
128 | .digit6 {
129 | background-position: -150px 0;
130 | }
131 |
132 | .digit7 {
133 | background-position: -175px 0;
134 | }
135 |
136 | .digit8 {
137 | background-position: -200px 0;
138 | }
139 |
140 | .digit9 {
141 | background-position: -225px 0;
142 | }
143 |
144 | .resultchar.decimal {
145 | width: 7px;
146 | background-position: -250px 0;
147 | }
148 |
149 | .resultchar.negative {
150 | background-position: -257px 0;
151 | width: 17px;
152 | }
153 |
154 | .resultchar.exponent {
155 | background-position: -275px 0;
156 | width: 25px;
157 | }
158 |
159 | .box {
160 | box-sizing: border-box;
161 | top: 220px;
162 | width: 250px;
163 | position: absolute;
164 | }
165 |
166 | .span-2 {
167 | grid-column: span 2;
168 | }
169 |
170 | .calculator-buttons {
171 | display: grid;
172 | grid-template-columns: repeat(4, 1fr);
173 | border: 0;
174 | }
175 |
176 | .calculator {
177 | max-width: 320px;
178 | }
179 |
180 | .btn {
181 | font-size: 1em;
182 | height: 45px;
183 | border: 1px solid black;
184 | background-color: #d5d5d5;
185 | margin: 4px;
186 | }
187 |
--------------------------------------------------------------------------------
/.instructions/1. setup.md:
--------------------------------------------------------------------------------
1 | ## Environment setup
2 |
3 | To complete the exercises, you will need an environment with GitHub Copilot, and a supported IDE such as VS Code. You can use your local computer and install these tools, or you may choose to use Codespaces.
4 |
5 |
6 | **OPTION A - I want to setup my local machine for the exercises**
7 | 
68 |
69 | 
90 |
91 | 
26 |
27 | 5. Do some simple calculations to show that the calculator is working as expected.
28 |
29 | 
30 |
31 | 6. Close the browser window for now and return to the Codespace window.
32 |
33 | 7. Ensure your focus is in the terminal window and press ``` CTRL + C ``` to stop the application.
34 |
35 | 
56 |
57 | ### Adding the logic for the new features
58 |
59 | 5. Open the ```api/controller.js``` file in the editor window.
60 |
61 | 6. Scroll down to where you see the ```// TODO: Add operator``` comment
62 |
63 | 7. Press **ENTER** at the end of the line that defines the divide function.
64 |
65 | 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.
66 |
67 | ```'power': function(a, b) { return Math.pow(a, b) },```
68 |
69 | 9. Open the ```public/client.js``` file in the editor window.
70 |
71 | 10. Scroll down to where you see the ```// TODO: Add operator``` comment (Line 22)
72 |
73 | 11. Move your cursor to the end of the line 35 (to the right of ```break;``` and press **ENTER**.
74 |
75 | GitHub Copilot should display ghost text suggesting the code shown in the following screenshot. Press **TAB** to accept the suggestion.
76 |
77 | 
78 |
79 | 12. Press **ENTER** at the end of the line, then accept the next two lines Copilot suggests.
80 |
81 | Your completed addition should match the following.
82 |
83 | 
84 |
85 | 13. Press ```CTRL + ` ``` to open the terminal window in VS Code.
86 |
87 | 14. Enter ```npm start``` in the terminal window and press **ENTER** to run the application.
88 |
89 | 15. You should test the new button by clicking 3, then the "^" (power) button, then click 2. Click "=" and the result should be 9.
90 |
91 | 16. Close the browser window, return to the Terminal window in Codespaces and press ```CTRL+C``` to terminate the application.
92 |
93 | **Success**, you have enhanced the calculator application using GitHub Copilot!
94 |
95 |