add less 11

src/app/app.config.ts

@@ -2,9 +2,11 @@ import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZonelessC
 import { provideRouter } from '@angular/router';
 
 import { routes } from './app.routes';
+import { provideProtractorTestingSupport } from '@angular/platform-browser';
 
 export const appConfig: ApplicationConfig = {
   providers: [
+    provideProtractorTestingSupport(),
     provideBrowserGlobalErrorListeners(),
     provideZonelessChangeDetection(),
     provideRouter(routes)

src/app/app.routes.ts

@@ -1,3 +1,16 @@
 import { Routes } from '@angular/router';
+import { Home } from './home/home';
+import { Details } from './details/details';
 
-export const routes: Routes = [];
+export const routes: Routes = [
+  {
+    path: '',
+    component: Home,
+    title: 'Home page'
+  },
+  {
+    path: 'details/:id',
+    component: Details,
+    title: 'Home details'
+  }
+];

src/app/app.ts

@@ -1,21 +1,24 @@
 import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { Home } from './home/home';
+import { RouterModule } from '@angular/router';
 
 @Component({
   selector: 'app-root',
   //imports: [RouterOutlet],
   imports: [
-  Home,
+    RouterModule
 ],
   // templateUrl: './app.html',
-  template: `
+template: `
   <main>
-    <header class="brand-name">
-      <img class="brand-logo" src="/assets/logo.svg" alt="logo" aria-hidden="true">
-    </header>
+    <a [routerLink]="['/']">
+      <header class="brand-name">
+        <img class="brand-logo" src="/assets/logo.svg" alt="logo" aria-hidden="true">
+      </header>
+    </a>
     <section class="content">
-      <app-home></app-home>
+      <router-outlet></router-outlet>
     </section>
   </main>
 `,

src/app/details/details.scss

@@ -0,0 +1,71 @@
+.listing-photo {
+  height: 600px;
+  width: 50%;
+  object-fit: cover;
+  border-radius: 30px;
+  float: right;
+}
+
+.listing-heading {
+  font-size: 48pt;
+  font-weight: bold;
+  margin-bottom: 15px;
+}
+
+.listing-location::before {
+  content: url('/assets/location-pin.svg') / '';
+}
+
+.listing-location {
+  font-size: 24pt;
+  margin-bottom: 15px;
+}
+
+.listing-features > .section-heading {
+  color: var(--secondary-color);
+  font-size: 24pt;
+  margin-bottom: 15px;
+}
+
+.listing-features {
+  margin-bottom: 20px;
+}
+
+.listing-features li {
+  font-size: 14pt;
+}
+
+li {
+  list-style-type: none;
+}
+
+.listing-apply .section-heading {
+  font-size: 18pt;
+  margin-bottom: 15px;
+}
+
+label, input {
+  display: block;
+}
+label {
+  color: var(--secondary-color);
+  font-weight: bold;
+  text-transform: uppercase;
+  font-size: 12pt;
+}
+input {
+  font-size: 16pt;
+  margin-bottom: 15px;
+  padding: 10px;
+  width: 400px;
+  border-top: none;
+  border-right: none;
+  border-left: none;
+  border-bottom: solid .3px;
+}
+@media (max-width: 1024px) {
+  .listing-photo {
+    width: 100%;
+    height: 400px;
+  }
+}

src/app/details/details.ts

@@ -0,0 +1,41 @@
+import { Component, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ActivatedRoute } from '@angular/router';
+import { Housing } from '../housing';
+import { HousingLocation } from '../housing-location/housing-location';
+import { HousingLocationInterface } from '../housinglocation.interface';
+
+@Component({
+  selector: 'app-details',
+  imports: [],
+  template: `
+  <article>
+    <img class="listing-photo" [src]="housingLocation?.photo"
+      alt="Exterior photo of {{housingLocation?.name}}"/>
+    <section class="listing-description">
+      <h2 class="listing-heading">{{housingLocation?.name ?? 'не найден!'}}</h2>
+      <p class="listing-location">{{housingLocation?.city}}, {{housingLocation?.state}}</p>
+    </section>
+    <section class="listing-features">
+      <h2 class="section-heading">About this housing location</h2>
+      <ul>
+        <li>Units available: {{housingLocation?.availableUnits}}</li>
+        <li>Does this location have wifi: {{housingLocation?.wifi}}</li>
+        <li>Does this location have laundry: {{housingLocation?.laundry}}</li>
+      </ul>
+    </section>
+  </article>
+`,
+  styleUrl: './details.scss'
+})
+export class Details {
+   route: ActivatedRoute = inject(ActivatedRoute);
+  housingService = inject(Housing);
+  housingLocation: HousingLocationInterface | undefined;
+
+  constructor() {
+    const housingLocationId = Number(this.route.snapshot.params['id']);
+    this.housingLocation = this.housingService.getHousingLocationById(housingLocationId);
+  }
+
+}

src/app/housing-location/housing-location.ts

@@ -1,19 +1,23 @@
 import { Component, Input } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { HousingLocationInterface } from '../housinglocation.interface';
+import { RouterLink } from '@angular/router';
 
 @Component({
   selector: 'app-housing-location',
-  imports: [],
+  imports: [
+    RouterLink
+  ],
   template: `
   <section class="listing">
     <img class="listing-photo" [src]="housingLocation.photo" alt="Exterior photo of {{housingLocation.name}}">
     <h2 class="listing-heading">{{ housingLocation.name }}</h2>
     <p class="listing-location">{{ housingLocation.city}}, {{housingLocation.state }}</p>
+    <a [routerLink]="['/details', housingLocation.id]">Learn More</a>
   </section>
   `,
   styleUrl: './housing-location.scss'
 })
 export class HousingLocation {
   @Input() housingLocation!: HousingLocationInterface;
-}
+}

src/main.ts

@@ -3,4 +3,4 @@ import { appConfig } from './app/app.config';
 import { App } from './app/app';
 
 bootstrapApplication(App, appConfig)
-  .catch((err) => console.error(err));
+  .catch((err) => console.error(err));