add styling

frontend/e2e/src/app.e2e-spec.ts

@@ -49,6 +49,6 @@ describe('workspace-project App', () => {
     await page.setValue1('1')
     await page.setValue2('0')
     await page.clickDivide();
-    expect(await page.getMessage()).toEqual('cannot divide by 0');
+    expect(await page.getMessage()).toEqual('invalid input: cannot divide by 0');
   });
 });

frontend/src/app/app.component.css

@@ -0,0 +1,10 @@
+.header {
+  width: 100%;
+  background-color: steelblue;
+  color: black;
+  padding: 0.5em;
+}
+
+.content {
+  padding: 0.5em;
+}

frontend/src/app/calculator/calculator.component.css

@@ -0,0 +1,19 @@
+.form {
+  padding: 5px;
+  margin: 5px;
+}
+
+.answer {
+  margin: 10px;
+  padding: 10px;
+  border: 1px solid green;
+  background-color: darkseagreen;
+}
+
+#message {
+  margin: 10px;
+  padding: 10px;
+  font-weight: bold;
+  color: red;
+  background-color: inherit;
+}

frontend/src/app/calculator/calculator.component.html

@@ -1,17 +1,19 @@
-<div>
+<div class="form">
   <label for="val1">value1:</label>
   <input [(ngModel)]="value1" id="val1" type="number"/>
 </div>
 
-<div>
+<div class="form">
   <label for="val2">value2:</label>
   <input [(ngModel)]="value2" id="val2" type="number"/>
 </div>
 
-<div>
+<div class="form">
   <button *ngFor="let operator of operators" (click)="calculate(operator)" id="{{operator}}">{{operator}}</button>
 </div>
 
+<div class="answer">
 result = <span id="result">{{ result }}</span>
+</div>
 
 <div id="message">{{message}}</div>

frontend/src/app/calculator/calculator.component.ts

@@ -31,7 +31,7 @@ export class CalculatorComponent implements OnInit {
       },
       (error) => {
         if (error.status == 400) {
-          this.message = error.error;
+          this.message = "invalid input: " + error.error;
         } else {
           this.message = "calculator service unavailable";
         }

frontend/src/styles.css

@@ -1 +1,8 @@
 /* You can add global styles to this file, and also import other style files */
+html, body {
+  margin: 0; padding: 0;
+  box-sizing: border-box;
+  color: black;
+  font-family: Tahoma, Verdana, sans-serif;
+  line-height: 1.15;
+}