- add bulma style

- add components: messages, locate-button
- move index.html into src folder
- move to angular build tools
- styles.css -> styles.scss

src/app/messages/messages.component.css

@@ -0,0 +1,19 @@
+/* MessagesComponent's private CSS styles */
+h2 {
+    color: #A80000;
+    font-family: Arial, Helvetica, sans-serif;
+    font-weight: lighter;
+  }
+  
+  .clear {
+    color: #333;
+    background-color: #eee;
+    margin-bottom: 12px;
+    padding: 1rem;
+    border-radius: 4px;
+    font-size: 1rem;
+  }
+  .clear:hover {
+    color: #fff;
+    background-color: #42545C;
+  }

src/app/messages/messages.component.html

@@ -0,0 +1,9 @@
+<!-- <p>messages works!</p> -->
+<div *ngIf="messageService.messages.length">
+
+    <h2>Messages</h2>
+    <button class="clear"
+            (click)="messageService.clear()">Clear messages</button>
+    <div *ngFor="let message of messageService.messages"> {{message}} </div>
+  
+  </div>

src/app/messages/messages.component.ts

@@ -0,0 +1,20 @@
+import { Component, OnInit } from '@angular/core';
+import { MessageService } from '../services/message.service';
+
+@Component({
+  selector: 'app-messages',
+  templateUrl: './messages.component.html',
+  styleUrls: ['./messages.component.css']
+})
+export class MessagesComponent implements OnInit {
+
+  public messageService;
+
+  constructor(messageService: MessageService) {
+    this.messageService = messageService;
+  }
+
+  ngOnInit(): void {
+  }
+
+}