feat(Child): add broke message and update button styles

src/app/Child/child.component.html

@@ -1,3 +1,4 @@
 <h1>Child</h1>
 <p>Balance: {{balance}}</p>
-<button type="button" (click)=takeMoney() class="btn btn-secondary">Take Money</button>
+<p [class.hidden]="!isBroke">Im broke. Now im about as poor as Jan-Marlon.</p>
+<button type="button" (click)=takeMoney() class="button">Take Money</button>

src/app/Child/child.component.ts

@@ -6,11 +6,20 @@ import { Component, Input, Output, EventEmitter } from "@angular/core";
   templateUrl: './child.component.html',
 })
 export class ChildComponent {
-  @Input() public balance:number = 0;
+  @Input() public balance: number = 0;
   @Output() balanceChange = new EventEmitter<number>();
 
+  public isBroke = false;
+
   public takeMoney() {
+    if (this.balance <= 0) {
+      this.isBroke = true;
+    } else {
       this.balance -= 50;
+      if (this.balance == 0) {
+        this.isBroke = true;
+      }
       this.balanceChange.emit(this.balance);
     }
+  }
 }

src/app/Parent/parent.component.html

@@ -1,6 +1,9 @@
-<h1>Parent</h1>
+<div class="m-3">
+ <h1>Parent</h1>
 <p>Kontostand: {{ balance }}</p>
-<button type="button" class="px-3 py-1 border-[3px] border-black m-3" (click)=addFifty()>Add Money</button>
+<button type="button" class="button" (click)=addFifty()>Add Money</button>
 
 <app-child [(balance)]="balance"></app-child>
 <app-child [(balance)]="balance"></app-child>
+</div>
+

src/styles.css

@@ -2,3 +2,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.button {
+  @apply border-black rounded px-3 py-1 border-[3px];
+}

tailwind.config.js

@@ -1,10 +1,17 @@
 /** @type {import('tailwindcss').Config} */
+
+const colors = require('tailwindcss/colors');
+
 module.exports = {
   content: [
     "./src/**/*.{html,ts}",
   ],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        ...colors,
+      }
+    },
   },
   plugins: [],
 }