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

This commit is contained in:
Jan Gleytenhoover 2024-09-03 09:10:37 +02:00
parent 4c94212b7f
commit f243483688
Signed by: jank
GPG Key ID: B267751B8AE29EFE
5 changed files with 31 additions and 7 deletions

@ -1,3 +1,4 @@
<h1>Child</h1> <h1>Child</h1>
<p>Balance: {{balance}}</p> <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>

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

@ -1,6 +1,9 @@
<h1>Parent</h1> <div class="m-3">
<h1>Parent</h1>
<p>Kontostand: {{ balance }}</p> <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>
<app-child [(balance)]="balance"></app-child> <app-child [(balance)]="balance"></app-child>
</div>

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

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