src/app/Button/button.component.html

@@ -1 +1 @@
-<button type="button">{{ text }}</button>
+<button type="button" class="px-6 py-2 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">{{ text }}</button>

src/app/Child/child.component.html

@@ -1,4 +1,4 @@
-<h1>Child</h1>
+<h1 class="text-2xl font-bold mb-4">Child</h1>
-<p>Balance: {{balance}}</p>
+<p class="text-lg mb-2">Balance: {{balance}}</p>
-<p [class.hidden]="!isBroke">Im broke. Now im about as poor as Jan-Marlon.</p>
+<p [class.hidden]="!isBroke" class="text-red-500 mb-4">I'm broke. Now I'm about as poor as Jan-Marlon.</p>
-<button type="button" (click)=takeMoney() class="button">Take Money</button>
+<button type="button" (click)="takeMoney()" class="px-6 py-2 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">Take Money</button>

src/app/HotelItem/HotelItem.component.html

@@ -1,11 +1,8 @@
-<p>Name: {{hotel.hotelName}}</p>
+<p class="text-2xl font-bold text-gray-800 mb-2">Name: {{hotel.hotelName}}</p>
-<p>Description: {{hotel.description}}</p>
+<p class="text-base text-gray-600 mb-4">Description: {{hotel.description}}</p>
-<p>Price: {{hotel.price | currency : getCurrencyCode(selectedLanguage) : "symbol" : "2.2-2" : selectedLanguage}}</p>
+<p class="text-lg font-medium text-green-600 mb-4">Price: {{hotel.price | currency : getCurrencyCode(selectedLanguage) : "symbol" : "2.2-2" : selectedLanguage}}</p>
-<select [ngModel]="selectedLanguage" (ngModelChange)="languageChange($event)">
+<select [ngModel]="selectedLanguage" (ngModelChange)="languageChange($event)" class="block w-full p-2 border border-gray-300 rounded-md mb-4 focus:border-blue-500 focus:ring focus:ring-blue-200">
-  @for (lang of langs; track lang.lang) {
+  <option *ngFor="let lang of langs" [value]="lang.code" [selected]="lang.lang == 'de'">{{lang.lang}}</option>
-    <option value="{{lang.code}}" [selected]="lang.lang == 'de'">{{lang.lang}}</option>
-  }
 </select>
-<img src="{{hotel.imageUrl}}" alt="Hotel">
+<img src="{{hotel.imageUrl}}" alt="Hotel" class="w-full h-auto rounded-lg shadow-lg mb-4">
-<a *ngIf="!isDetail" routerLink="/hotels/{{hotel.id}}">Details</a>
+<a *ngIf="!isDetail" routerLink="/hotels/{{hotel.id}}" class="text-blue-600 hover:text-blue-800 hover:underline mb-4 block">Details</a>
-<app-star-rating [rating]="hotel.rating"></app-star-rating>

src/app/Search/search.component.html

@@ -1 +1 @@
-<input [(ngModel)]="input" (ngModelChange)="update($event)" class="border border-black" type="search">
+<input [(ngModel)]="input" (ngModelChange)="update($event)" class="border border-gray-300 rounded-md p-2 w-full focus:border-blue-500 focus:ring focus:ring-blue-200" type="search">

src/app/hotel-list/hotel-list.component.html

@@ -1,7 +1,9 @@
+<div class="container p-4 mx-auto max-w-4xl">
   <h1>{{'hello' | uppercase | text}}</h1>
   <app-search [(input)]="search"></app-search>
   @if (hotels[0].hotelName) {
     <div *ngFor="let hotel of hotels">
-  <app-hotel-item *ngIf="hotel.hotelName.includes(search)" [hotel]="hotel"></app-hotel-item>
+      <app-hotel-item *ngIf="hotel.hotelName.toLowerCase().includes(search.toLowerCase())" [hotel]="hotel"></app-hotel-item>
     </div>
   }
+</div>