Support operations with 1 operand & fix html css

.devcontainer/devcontainer.json

@@ -11,6 +11,7 @@
 		"vscode": {
 			"extensions": [
 				"GitHub.copilot",
+				"GitHub.copilot-chat",
 				"GitHub.copilot-labs"
 			]
 		}

.instructions/3. challenge exercises.md

@@ -16,7 +16,7 @@ Now you've had an opportunity to get started using GitHub Copilot, we have a num
 
 4. Open the ```/test/arithmetic.test.js``` file.
 
-5. Scroll down to the line with the comment ```TODO: Challenge #1``` (Around line 96)
+5. Scroll down to the line with the comment ```TODO: Challenge #1``` (Around line 206)
 
 6. On the line following the comment, add a new comment to provide context to GitHub Copilot on what you want assistance to do. Try adding this comment ```// add tests for subtraction``` and press ```ENTER``` to generate a suggestion.
 

.vscode/launch.json

@@ -0,0 +1,17 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "Launch Program",
+            "skipFiles": [
+
+            ],
+            "program": "${workspaceFolder}/server.js"
+        }
+    ]
+}

api/controller.js

@@ -34,9 +34,9 @@ exports.calculate = function(req, res) {
     throw new Error("Invalid operand1: " + req.query.operand1);
   }
 
-  if (!req.query.operand2 ||
+  if (req.query.operand2 != null && (!req.query.operand2 ||
       !req.query.operand2.match(/^(-)?[0-9\.]+(e(-)?[0-9]+)?$/) ||
-      req.query.operand2.replace(/[-0-9e]/g, '').length > 1) {
+      req.query.operand2.replace(/[-0-9e]/g, '').length > 1)) {
     throw new Error("Invalid operand2: " + req.query.operand2);
   }
 

public/client.js

@@ -16,9 +16,8 @@ var operand1 = 0;
 var operand2 = 0;
 var operation = null;
 
-function calculate(operand1, operand2, operation) {
+function calculate(operand1, operation, operand2 = null) {
     var uri = location.origin + "/arithmetic";
-
     // TODO: Add operator
     switch (operation) {
         case '+':
@@ -39,8 +38,10 @@ function calculate(operand1, operand2, operation) {
     }
 
     uri += "&operand1=" + encodeURIComponent(operand1);
-    uri += "&operand2=" + encodeURIComponent(operand2);
+    if (operand2 != null)
+        uri += "&operand2=" + encodeURIComponent(operand2);
 
+    console.log("uri " + uri);
     setLoading(true);
 
     var http = new XMLHttpRequest();
@@ -52,7 +53,8 @@ function calculate(operand1, operand2, operation) {
             var response = JSON.parse(http.responseText);
             setValue(response.result);
         } else {
-            setError();
+            var errorMessage = http.responseText;
+            setError(errorMessage);
         }
     };
     http.send(null);
@@ -114,22 +116,33 @@ function operationPressed(op) {
     operand1 = getValue();
     operation = op;
     state = states.operator;
+    document.getElementById("operatorSpan").innerText = op;
 }
 
 function equalPressed() {
-    if (state < states.operand2) {
+    if (state < states.operand1) {
         state = states.complete;
         return;
     }
+    // log to main thread state
+    console.log("state " + state);
 
-    if (state == states.operand2) {
+    if (state == states.operator) {
+        operand1 = getValue();
+        state = states.complete;
+    } else if (state == states.operand2) {
         operand2 = getValue();
         state = states.complete;
     } else if (state == states.complete) {
         operand1 = getValue();
     }
 
-    calculate(operand1, operand2, operation);
+    if (operand2) {
+        calculate(operand1, operation, operand2);
+    } else {
+        console.log("calculate " + operand1 + " " + operation);
+        calculate(operand1, operation);
+    }
 }
 
 // TODO: Add key press logics
@@ -181,8 +194,8 @@ function setValue(n) {
     document.getElementById("result").innerHTML = html;
 }
 
-function setError(n) {
-    document.getElementById("result").innerHTML = "ERROR";
+function setError(errorMessage) {
+    document.getElementById("result").innerHTML = "ERROR: " + errorMessage;
 }
 
 function setLoading(loading) {

public/default.css

@@ -6,7 +6,7 @@ BODY {
     background-color: #1b4076;
 }
 
-@media screen and (min-device-width: 500px) and (min-device-height: 1024px) {
+@media screen and (min-device-width: 500px) and (min-device-height: 500px) {
     BODY {
         transform: scale(1.75);
         transform-origin: 50% 0;
@@ -24,42 +24,53 @@ BODY {
 
 .container {
     min-width: 250px;
-    min-height: 531px;
+    min-height: 450px;
     width: 250px;
     padding: 25px;
     margin: 0 auto;
     position: relative;
-    background-image: url(background.png);
-    background-size: 300px 531px;
-    background-repeat: no-repeat;
-    background-position: center top;
+    display: flex;
+    flex-direction: column;
+    /* background-image: url(background.png); */
+    /* background-size: 300px 500px; */
+    /* background-repeat: no-repeat; */
+    /* background-position: center top; */
 }
 
 #results {
+    height: auto;
+    display: flex;
+    flex-direction: column;
     position: relative;
-    top: 0;
-    left: 0;
 }
 
+
 #buttons {
     position: relative;
 }
 
 #result {
     background-color: #9b9b9b;
-    width: 226px;
-    height: 63px;
-    margin: 0;
-    padding: 0 12px;
-    position: absolute;
-    border: 0;
-    left: 0;
-    top: 32px;
+    height: auto;
+    padding: 10px;
+    position: relative;
     font-family: system-ui;
     font-size: 25px;
     text-align: right;
 }
 
+.box {
+    box-sizing: border-box;
+    width: 250px;
+    height: auto;
+    position: relative;
+    padding-top: 10px;
+    /* top: auto; */
+    bottom: 0;
+    display: block;
+    margin: auto;
+}
+
 /*BUTTON {
     background-color: #d5d5d5;
     border: 0;
@@ -156,13 +167,17 @@ BODY {
     width: 25px;
 }
 
-.box {
-    box-sizing: border-box;
-    top: 220px;
-    width: 250px;
-    position: absolute;
+
+#operator {
+    padding-top: 10;
+    margin-bottom: 10;
+    display: block;
 }
 
+#operator span {
+    color: white;
+  }
+
 .span-2 {
     grid-column: span 2;
 }

public/index.html

@@ -6,14 +6,20 @@
     <script src="client.js"></script>
   </head>
   <body onLoad="setValue(0)">
-    <div class="container">
+    <div class="container" >
+
       <div id="results">
-        <div id="result"><span class="digit0">0</span></div>
+        <div id="operator">
+          <span>Operation: </span><span id="operatorSpan"></span>
+        </div>
+        <div id="result">
+          <span class="digit0">0</span>
+        </div>
       </div>
 
       <div id="loading" style="visibility:hidden"></div>
 
-      <div class="box">
+      <div class="box" >
         <div class="calculator">
           <div class="calculator-buttons">
             <button class="btn span-2"></button>

test/arithmetic.test.js

@@ -92,10 +92,7 @@ describe('Arithmetic', function () {
                 });
         });
     });
-
-// TODO: Challenge #1
-
-
+
     describe('Multiplication', function () {
         it('multiplies two positive integers', function (done) {
             request.get('/arithmetic?operation=multiply&operand1=21&operand2=2')
@@ -205,4 +202,7 @@ describe('Arithmetic', function () {
                 });
         });
     });
+
+    // TODO: Challenge #1
+
 });

test/helpers.js

@@ -4,4 +4,4 @@ var app = require('../server');
 
 global.app = app;
 global.expect = chai.expect;
-global.request = supertest(app);
+global.request = supertest(app);