diff --git a/9yB5AM9sBgVwfTR.png b/9yB5AM9sBgVwfTR.png new file mode 100644 index 0000000..db60495 Binary files /dev/null and b/9yB5AM9sBgVwfTR.png differ diff --git a/README.md b/README.md index 95fb2dc..d71cf23 100644 --- a/README.md +++ b/README.md @@ -1,21 +1,11 @@ -# Fairhouse (Step One) -Welcome to step one of building the application. You'll find the base application here. +# Introduction to Angular Codelab +\In this codelab, you'll build a housing app with Angular. The completed app will feature the ability to view home listings based on user search, and view details of a housing location. -## This step covers -lorem ipsum and all that jazz. -## Local Setup -* Clone this repository -* change into `fairhouse` directory -* run `npm install` +You'll build everything with Angular using Angular's powerful tooling and great browser integration. -After the dependencies have been installed: +Here's a preview of the finished application: -* Run `ng serve` for a dev server. -* Navigate to `http://localhost:4200/`. +![Completed application - one column search results, second column search details](9yB5AM9sBgVwfTR.png) -_The app will automatically reload if you change any of the source files._ - - -_______ -This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.0.4. +The step-by-step guide can be found at [https://codelabs.developers.google.com/introduction-to-angular](https://codelabs.developers.google.com/introduction-to-angular) \ No newline at end of file diff --git a/angular.json b/angular.json index c9973f9..df29f5b 100644 --- a/angular.json +++ b/angular.json @@ -1,5 +1,8 @@ { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "cli": { + "analytics": "015557eb-5b54-4a06-bc89-8e23a9ff1ff7" + }, "version": 1, "newProjectRoot": "projects", "projects": { diff --git a/src/app/app.component.css b/src/app/app.component.css index e69de29..3ed08ee 100644 --- a/src/app/app.component.css +++ b/src/app/app.component.css @@ -0,0 +1,49 @@ +header { + margin-bottom: 50px; + font-weight: bold; + font-size: 24pt; + border-bottom: solid .5px rgb(223, 223, 223); + color: #050e2e; +} +header { + padding-left: 50px; +} +header > img { + width: 28pt; + height: 29pt +} +section { + margin-left: 50px; + margin-right: 50px; +} +section { + display: flex; + justify-content: space-between; +} + +article { + margin-left: 50px; + padding-top: 20px; + width: 50% +} + +article, p { + color: #202845; +} +img { + border-radius: 5px; + width: 100%; +} +article > p:nth-child(n+2) { + font-size: 15pt; +} + +article > p:first-of-type { + font-size: 40pt; + font-weight: bold; +} + +article > p:nth-of-type(2) { + font-size: 30pt; + margin-bottom: 15px; +} diff --git a/src/app/app.component.html b/src/app/app.component.html index a28ff7a..f457ab3 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,3 +1,22 @@ -
- {{title}} app is running! -
\ No newline at end of file +
+
holiday householidayhouse
+
+ +
+ +
+ + +

{{ selectedLocation.name }}

+

{{ selectedLocation.city }}, {{ selectedLocation.state }}

+

Unidades Disponíveis: {{ selectedLocation.availableUnits }}

+

+ {{ selectedLocation.laundry ? "Tem lavanderia" : "Não tem lavanderia" }} +

+

{{ selectedLocation.wifi ? "Tem wifi" : "Não tem wifi" }}

+ +
+
diff --git a/src/app/app.component.ts b/src/app/app.component.ts index c988189..d201385 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,10 +1,48 @@ import { Component } from '@angular/core'; +import { HousingLocation } from 'src/housing-location'; @Component({ selector: 'app-root', templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] + styleUrls: ['./app.component.css'], }) export class AppComponent { - title = 'fairhouse'; + title = 'holidayhouse'; + selectedLocation: HousingLocation | undefined; + + updateSelectedLocation(location: HousingLocation) { + this.selectedLocation = location; + } + + searchHousingLocations() {} + + housingLocationList: HousingLocation[] = [ + { + name: 'Acme Fresh Start Housing', + city: 'Chicago', + state: 'IL', + photo: '../assets/housing-1.jpg', + availableUnits: 4, + wifi: true, + laundry: true, + }, + { + name: 'A113 Transitional Housing', + city: 'Santa Monica', + state: 'CA', + photo: '../assets/housing-2.jpg', + availableUnits: 0, + wifi: false, + laundry: true, + }, + { + name: 'Warm Beds Housing Support', + city: 'Juneau', + state: 'AK', + photo: '../assets/housing-3.jpg', + availableUnits: 1, + wifi: false, + laundry: false, + }, + ]; } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 8dfc1d6..afaa1e9 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -2,15 +2,12 @@ import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; +import { HousingListComponent } from './housing-list/housing-list.component'; @NgModule({ - declarations: [ - AppComponent - ], - imports: [ - BrowserModule - ], + declarations: [AppComponent, HousingListComponent], + imports: [BrowserModule], providers: [], - bootstrap: [AppComponent] + bootstrap: [AppComponent], }) -export class AppModule { } +export class AppModule {} diff --git a/src/app/housing-list/housing-list.component.css b/src/app/housing-list/housing-list.component.css new file mode 100644 index 0000000..7550294 --- /dev/null +++ b/src/app/housing-list/housing-list.component.css @@ -0,0 +1,48 @@ +input, +button { + border: solid 1px #555b6e; + border-radius: 2px; + display: inline-block; + padding: 0; +} +input { + width: 400px; + height: 40px; + border-radius: 2px 0 0 2px; + color: #888c9c; + border: solid 1px #888c9c; + padding: 0 5px 0 10px; +} + +button { + width: 70px; + height: 42px; + background-color: #4468e8; + color: white; + border: solid 1px #4468e8; + border-radius: 0 2px 2px 0; +} + +article { + margin: 40px 0 10px 0; + color: #202845; +} +article, +article > p { + color: #202845; +} + +article > p:first-of-type { + font-weight: bold; + font-size: 22pt; +} + +img { + width: 490px; + border-radius: 5pt; +} + +label { + display: block; + color: #888c9c; +} diff --git a/src/app/housing-list/housing-list.component.html b/src/app/housing-list/housing-list.component.html new file mode 100644 index 0000000..932e3ec --- /dev/null +++ b/src/app/housing-list/housing-list.component.html @@ -0,0 +1,17 @@ + + + +
+ +

{{ location.name }}

+

{{ location.city }}, {{ location.state }}

+ +
diff --git a/src/app/housing-list/housing-list.component.spec.ts b/src/app/housing-list/housing-list.component.spec.ts new file mode 100644 index 0000000..ee08bcd --- /dev/null +++ b/src/app/housing-list/housing-list.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { HousingListComponent } from './housing-list.component'; + +describe('HousingListComponent', () => { + let component: HousingListComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ HousingListComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(HousingListComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/housing-list/housing-list.component.ts b/src/app/housing-list/housing-list.component.ts new file mode 100644 index 0000000..ab451b1 --- /dev/null +++ b/src/app/housing-list/housing-list.component.ts @@ -0,0 +1,39 @@ +import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core'; +import { HousingLocation } from 'src/housing-location'; + +@Component({ + selector: 'app-housing-list', + templateUrl: './housing-list.component.html', + styleUrls: ['./housing-list.component.css'], +}) +export class HousingListComponent implements OnInit { + @Input() locationList: HousingLocation[] = []; + @Output() locationSelectedEvent = new EventEmitter(); + + results: HousingLocation[] = []; + + constructor() {} + + searchHousingLocations(searchText: Event) { + let inputText = (searchText.target as HTMLInputElement).value; + + if (!inputText) return; + this.results = this.locationList.filter((location) => { + return location.city.toLowerCase().includes(inputText.toLowerCase()); + }); + + return this.results; + } + + selectHousingLocation(location: HousingLocation) { + this.locationSelectedEvent.emit(location); + } + + apertarEnter(event: any) { + if (event.keyCode === 13) { + console.log(this.searchHousingLocations(event.target.value)); + } + } + + ngOnInit(): void {} +} diff --git a/src/assets/housing-1.jpg b/src/assets/housing-1.jpg new file mode 100644 index 0000000..11ee186 Binary files /dev/null and b/src/assets/housing-1.jpg differ diff --git a/src/assets/housing-2.jpg b/src/assets/housing-2.jpg new file mode 100644 index 0000000..c5a8110 Binary files /dev/null and b/src/assets/housing-2.jpg differ diff --git a/src/assets/housing-3.jpg b/src/assets/housing-3.jpg new file mode 100644 index 0000000..85bc4b0 Binary files /dev/null and b/src/assets/housing-3.jpg differ diff --git a/src/assets/logo.svg b/src/assets/logo.svg new file mode 100644 index 0000000..07502e0 --- /dev/null +++ b/src/assets/logo.svg @@ -0,0 +1,8 @@ + + + + \ No newline at end of file diff --git a/src/assets/undraw_coming_home_-52-ir.svg b/src/assets/undraw_coming_home_-52-ir.svg deleted file mode 100644 index d2312a9..0000000 --- a/src/assets/undraw_coming_home_-52-ir.svg +++ /dev/null @@ -1 +0,0 @@ -coming home \ No newline at end of file diff --git a/src/assets/undraw_handcrafts_house.svg b/src/assets/undraw_handcrafts_house.svg deleted file mode 100644 index d0129e8..0000000 --- a/src/assets/undraw_handcrafts_house.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/housing-location.ts b/src/housing-location.ts new file mode 100644 index 0000000..910a821 --- /dev/null +++ b/src/housing-location.ts @@ -0,0 +1,9 @@ +export interface HousingLocation { + name: string; + city: string; + state: string; + photo: string; + availableUnits: number; + wifi: boolean; + laundry: boolean; +} diff --git a/src/index.html b/src/index.html index 8e4087e..1ec0c0f 100644 --- a/src/index.html +++ b/src/index.html @@ -2,10 +2,11 @@ - Fairhouse + HolidayHouse + diff --git a/src/styles.css b/src/styles.css index e69de29..f64e48a 100644 --- a/src/styles.css +++ b/src/styles.css @@ -0,0 +1,8 @@ +* { + font-family: 'Be Vietnam Pro', sans-serif; + color: #555B6E; +} +body, p, h1 { + margin: 0; + padding: 0; +}