diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index eb9dd26..d590668 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -1,14 +1,15 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { HoroscopeDataContainerComponent } from './horoscope-data-container/horoscope-data-container.component'; -import {MockLoginComponent} from './mock-login/mock-login.component'; +import { NumerologyComponent } from './numerology/numerology.component'; + const routes: Routes = [ { path: 'horoscope', component: HoroscopeDataContainerComponent }, - { path: 'login', component: MockLoginComponent }, + { path: 'numerology', component: NumerologyComponent }, { path: '', redirectTo: '/horoscope', pathMatch: 'full' }, ]; diff --git a/src/app/app.component.html b/src/app/app.component.html index ef0914d..4ceff86 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -4,4 +4,5 @@ + diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 6d0e442..8bc6960 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -7,5 +7,5 @@ import { Component } from '@angular/core'; styleUrls: ['./app.component.css'] }) export class AppComponent { - // title = 'my_app'; + title = 'my_app'; } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 5d78a59..3969bda 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -6,15 +6,19 @@ import { AppComponent } from './app.component'; import { HttpClientModule } from '@angular/common/http'; import { HoroscopeComponent } from './horoscope/horoscope.component'; import { FormsModule } from '@angular/forms'; -import { OpenHoroscopeService } from './open-horoscope.service'; +import { OpenHoroscopeService } from './open-horoscope/open-horoscope.service'; import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; import { HoroscopeDataContainerComponent } from './horoscope-data-container/horoscope-data-container.component'; +import { NavBarComponent } from './nav-bar/nav-bar.component'; +import { NumerologyComponent } from './numerology/numerology.component'; @NgModule({ declarations: [ AppComponent, HoroscopeComponent, - HoroscopeDataContainerComponent + HoroscopeDataContainerComponent, + NavBarComponent, + NumerologyComponent ], imports: [ BrowserModule, diff --git a/src/app/horoscope-data-container/horoscope-data-container.component.html b/src/app/horoscope-data-container/horoscope-data-container.component.html index 384772c..d0b5b18 100644 --- a/src/app/horoscope-data-container/horoscope-data-container.component.html +++ b/src/app/horoscope-data-container/horoscope-data-container.component.html @@ -1,3 +1,5 @@ + +
@@ -6,4 +8,5 @@ - \ No newline at end of file + + \ No newline at end of file diff --git a/src/app/horoscope-data-container/horoscope-data-container.component.spec.ts b/src/app/horoscope-data-container/horoscope-data-container.component.spec.ts index b07d14f..f2cb816 100644 --- a/src/app/horoscope-data-container/horoscope-data-container.component.spec.ts +++ b/src/app/horoscope-data-container/horoscope-data-container.component.spec.ts @@ -18,4 +18,11 @@ describe('HoroscopeDataContainerComponent', () => { it('should create', () => { expect(component).toBeTruthy(); }); + }); + +// describe('changeGender', () => { +// it('should asign to parameter gender woman if the input is woman', () => { +// const result = changeGender() +// }) +// }); diff --git a/src/app/horoscope-data-container/horoscope-data-container.component.ts b/src/app/horoscope-data-container/horoscope-data-container.component.ts index e0e944b..61742f3 100644 --- a/src/app/horoscope-data-container/horoscope-data-container.component.ts +++ b/src/app/horoscope-data-container/horoscope-data-container.component.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { HoroscopeData } from '../models/horoscope.model'; -import { OpenHoroscopeService } from '../open-horoscope.service'; +import { OpenHoroscopeService } from '../open-horoscope/open-horoscope.service'; import { faEarth, faFire, faCalendar} from '@fortawesome/free-solid-svg-icons'; @Component({ @@ -38,7 +38,11 @@ export class HoroscopeDataContainerComponent implements OnInit { next: (response) => { this.horoscopeData1 = response; console.log(response); + }, + error: (error) => { + console.log(error); } + }); } diff --git a/src/app/horoscope/horoscope.component.html b/src/app/horoscope/horoscope.component.html index a314a51..b962237 100644 --- a/src/app/horoscope/horoscope.component.html +++ b/src/app/horoscope/horoscope.component.html @@ -1,4 +1,5 @@
+
@@ -13,21 +14,18 @@ - -
-
{{ horoscopeData.name }}
-
- Information + {{ horoscopeData.name }}
- ruling
planet + ruling + planet
{{ horoscopeData.ruling_planet }} @@ -37,6 +35,7 @@
element +
{{ horoscopeData.element }} @@ -45,7 +44,8 @@
- date range + date + range
{{ horoscopeData.date_range }} @@ -64,7 +64,7 @@

- Get to know yourself {{ gender }} + Get to know yourselfs

@@ -74,4 +74,12 @@ {{ horoscopeData.man }}
-
\ No newline at end of file +
+ +
+

+ {{ horoscopeData.error }} +

+
+ +
diff --git a/src/app/horoscope/horoscope.component.ts b/src/app/horoscope/horoscope.component.ts index 89956c3..afb9b1f 100644 --- a/src/app/horoscope/horoscope.component.ts +++ b/src/app/horoscope/horoscope.component.ts @@ -1,5 +1,5 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; -import { OpenHoroscopeService } from '../open-horoscope.service'; +import { OpenHoroscopeService } from '../open-horoscope/open-horoscope.service'; import { HoroscopeData } from '../models/horoscope.model'; import { faEarth, faFire, faCalendar} from '@fortawesome/free-solid-svg-icons'; diff --git a/src/app/mock-login/mock-login.component.css b/src/app/mock-login/mock-login.component.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/mock-login/mock-login.component.html b/src/app/mock-login/mock-login.component.html deleted file mode 100644 index f89b731..0000000 --- a/src/app/mock-login/mock-login.component.html +++ /dev/null @@ -1 +0,0 @@ -

mock-login works!

diff --git a/src/app/mock-login/mock-login.component.ts b/src/app/mock-login/mock-login.component.ts deleted file mode 100644 index 939ca30..0000000 --- a/src/app/mock-login/mock-login.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-mock-login', - templateUrl: './mock-login.component.html', - styleUrls: ['./mock-login.component.css'] -}) -export class MockLoginComponent { - -} diff --git a/src/app/models/horoscope.model.ts b/src/app/models/horoscope.model.ts index 197daf3..9d2e44c 100644 --- a/src/app/models/horoscope.model.ts +++ b/src/app/models/horoscope.model.ts @@ -15,5 +15,6 @@ export interface HoroscopeData { symbol: string weaknesses: string woman: string + error: string } \ No newline at end of file diff --git a/src/app/models/numerology.model.ts b/src/app/models/numerology.model.ts new file mode 100644 index 0000000..0b3d9b6 --- /dev/null +++ b/src/app/models/numerology.model.ts @@ -0,0 +1,4 @@ +export interface NumerologyData{ + desc: string + number: string +} \ No newline at end of file diff --git a/src/app/nav-bar/nav-bar.component.css b/src/app/nav-bar/nav-bar.component.css new file mode 100644 index 0000000..512be7d --- /dev/null +++ b/src/app/nav-bar/nav-bar.component.css @@ -0,0 +1,29 @@ +ul { + list-style-type: none; + margin: 0; + padding: 0; + overflow: hidden; + background-color: var(--dark-red); + border-bottom-left-radius: 20px; + border-bottom-right-radius: 20px; + } + + li { + float: right; + } + + li a { + display: block; + color: white; + text-align: center; + padding: 14px 16px; + text-decoration: none; + } + + li a:hover { + background-color: #111; + } + + .nav-bar { + width: 800px; + } diff --git a/src/app/nav-bar/nav-bar.component.html b/src/app/nav-bar/nav-bar.component.html new file mode 100644 index 0000000..a2b0519 --- /dev/null +++ b/src/app/nav-bar/nav-bar.component.html @@ -0,0 +1,18 @@ + + + diff --git a/src/app/mock-login/mock-login.component.spec.ts b/src/app/nav-bar/nav-bar.component.spec.ts similarity index 50% rename from src/app/mock-login/mock-login.component.spec.ts rename to src/app/nav-bar/nav-bar.component.spec.ts index 26ee211..6759c20 100644 --- a/src/app/mock-login/mock-login.component.spec.ts +++ b/src/app/nav-bar/nav-bar.component.spec.ts @@ -1,16 +1,16 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { MockLoginComponent } from './mock-login.component'; +import { NavBarComponent } from './nav-bar.component'; -describe('MockLoginComponent', () => { - let component: MockLoginComponent; - let fixture: ComponentFixture; +describe('NavBarComponent', () => { + let component: NavBarComponent; + let fixture: ComponentFixture; beforeEach(() => { TestBed.configureTestingModule({ - declarations: [MockLoginComponent] + declarations: [NavBarComponent] }); - fixture = TestBed.createComponent(MockLoginComponent); + fixture = TestBed.createComponent(NavBarComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/src/app/nav-bar/nav-bar.component.ts b/src/app/nav-bar/nav-bar.component.ts new file mode 100644 index 0000000..4942a36 --- /dev/null +++ b/src/app/nav-bar/nav-bar.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-nav-bar', + templateUrl: './nav-bar.component.html', + styleUrls: ['./nav-bar.component.css'] +}) +export class NavBarComponent { + +} diff --git a/src/app/numerology/numerology.component.css b/src/app/numerology/numerology.component.css new file mode 100644 index 0000000..f5178a0 --- /dev/null +++ b/src/app/numerology/numerology.component.css @@ -0,0 +1,72 @@ +.container-numerology { + width: 600px; + height: 78vh; + background-color: var(--green-2); + border-radius: 20px; + box-shadow: 10px 10px 10px var(--shadow-dark); + display: flex; + flex-direction: row; + margin: 1em; + margin-top: 0.5em; + flex-direction: column; +} +.upper-num { + position: relative; + overflow: hidden; + height: 25%; + border-top-left-radius: 20px; + border-top-right-radius: 20px; + margin: 1em; + background-color: #9c6464; +} +.lower-num{ + position: relative; + overflow: hidden; + width: 100%; + height: 75%; + border-bottom-left-radius: 20px; + border-bottom-right-radius: 20px; + padding: 0 1em 1em 1em ; + display: flex; + flex-direction: column; +} +.num-disp { + font-size: 2em; + color: var(--white); + font-weight: 800; + position: relative; + z-index: 1; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; +} +.lower-container { + flex: 1; + background-color: var(--shadow-light); + border-bottom-left-radius: 20px; + border-bottom-right-radius: 20px; + margin-top: 1em; + width: 100%; + + display: flex; + flex-wrap: wrap; +} +.lower-container p { + color: var(--white); + margin: 1em; +} +#noNumber { + font-size: 1em; + color: var(--white); + font-weight: 800; + position: relative; + z-index: 1; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + text-align: center +} \ No newline at end of file diff --git a/src/app/numerology/numerology.component.html b/src/app/numerology/numerology.component.html new file mode 100644 index 0000000..ed192e6 --- /dev/null +++ b/src/app/numerology/numerology.component.html @@ -0,0 +1,26 @@ + +
+ + + +
+
+
+ +
+ {{ numerologyData.number }} +
+
+
+
+

+ {{ numerologyData.desc }} +

+

+ There is no numerology for this number. +

+
+
+ +
+ diff --git a/src/app/numerology/numerology.component.spec.ts b/src/app/numerology/numerology.component.spec.ts new file mode 100644 index 0000000..7eff930 --- /dev/null +++ b/src/app/numerology/numerology.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { NumerologyComponent } from './numerology.component'; + +describe('NumerologyComponent', () => { + let component: NumerologyComponent; + let fixture: ComponentFixture; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [NumerologyComponent] + }); + fixture = TestBed.createComponent(NumerologyComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/numerology/numerology.component.ts b/src/app/numerology/numerology.component.ts new file mode 100644 index 0000000..abf4c4e --- /dev/null +++ b/src/app/numerology/numerology.component.ts @@ -0,0 +1,39 @@ +import { Component, OnInit } from '@angular/core'; +import { OpenNumerologyService } from '../open-numerology/open-numerology.service'; +import { NumerologyData } from '../models/numerology.model'; + +@Component({ + selector: 'app-numerology', + templateUrl: './numerology.component.html', + styleUrls: ['./numerology.component.css'] +}) +export class NumerologyComponent implements OnInit{ + + public number: string = '7' + public numerologyData?: NumerologyData + + constructor (private openNumerologyService: OpenNumerologyService) { + + } + + ngOnInit(): void { + this.getHoroscope(); + this.number= ''; + } + + onSubmitNumber() { + this.getHoroscope(); + this.number = ''; + } + + getHoroscope() { + this.openNumerologyService.getNumerologyData(this.number) + .subscribe({ + next: (response) => { + this.numerologyData = response; + console.log(response); + } + }); + } + +} diff --git a/src/app/open-horoscope.service.spec.ts b/src/app/open-horoscope/open-horoscope.service.spec.ts similarity index 100% rename from src/app/open-horoscope.service.spec.ts rename to src/app/open-horoscope/open-horoscope.service.spec.ts diff --git a/src/app/open-horoscope.service.ts b/src/app/open-horoscope/open-horoscope.service.ts similarity index 92% rename from src/app/open-horoscope.service.ts rename to src/app/open-horoscope/open-horoscope.service.ts index be0fd16..3cc5b83 100644 --- a/src/app/open-horoscope.service.ts +++ b/src/app/open-horoscope/open-horoscope.service.ts @@ -1,7 +1,7 @@ import { Injectable } from '@angular/core'; import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http'; import { Observable } from 'rxjs'; -import { HoroscopeData } from './models/horoscope.model'; +import { HoroscopeData } from '../models/horoscope.model'; @Injectable({ providedIn: 'root' diff --git a/src/app/open-numerology/open-numerology.service.spec.ts b/src/app/open-numerology/open-numerology.service.spec.ts new file mode 100644 index 0000000..5e7ad4d --- /dev/null +++ b/src/app/open-numerology/open-numerology.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { OpenNumerologyService } from './open-numerology.service'; + +describe('OpenNumerologyService', () => { + let service: OpenNumerologyService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(OpenNumerologyService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/open-numerology/open-numerology.service.ts b/src/app/open-numerology/open-numerology.service.ts new file mode 100644 index 0000000..a4a9fdf --- /dev/null +++ b/src/app/open-numerology/open-numerology.service.ts @@ -0,0 +1,26 @@ +import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http'; +import { Injectable } from '@angular/core'; +import { NumerologyData } from '../models/numerology.model'; +import { Observable } from 'rxjs/internal/Observable'; + +@Injectable({ + providedIn: 'root' +}) +export class OpenNumerologyService { + + constructor( private http: HttpClient ) { } + + getNumerologyData(number: string): Observable{ + + const url = 'https://horoscope-astrology.p.rapidapi.com/numerology?'; + const headers = new HttpHeaders({ + 'X-RapidAPI-Key': '5016ac0ebdmsha06ee5d995fe2c4p108e0fjsn03c8c4f21287', + 'X-RapidAPI-Host': 'horoscope-astrology.p.rapidapi.com' + }); + const params = new HttpParams() + .set('n', number.toLowerCase()); + + return this.http.get(url, {headers, params}); + } + +} diff --git a/src/styles.css b/src/styles.css index f9b5176..e0c1c88 100644 --- a/src/styles.css +++ b/src/styles.css @@ -2,6 +2,8 @@ :root{ --green-1: #728c5d; --green-2: #364d23; + --dark-red: #3f0302; + --light-orange: #fedaa9; --white: #FFF; --grey: #EDEDED; --shadow-dark: rgba(0,0,0,0.3); @@ -16,22 +18,51 @@ body { font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: 16px; width: 100%; - height: 100vh; + height: 100%; background-color: var(--green-1); display: flex; justify-content: center; align-items: center; + flex-direction: column; +} +.first-column { + width: 35%; + display: flex; + flex-direction: column; +} +.second-column { + width: 65%; + display: flex; + flex-direction: column; } .container { width: 800px; - height: 80vh; + height: 78vh; background-color: var(--green-2); border-radius: 20px; box-shadow: 10px 10px 10px var(--shadow-dark); + /* display: flex; + flex-direction: row; */ + margin: 1em; + margin-top: 0.5em; +} +.if-no-error{ display: flex; flex-direction: row; } +.error-container { + font-size: 2em; + color: var(--white); + font-weight: 800; + position: relative; + z-index: 1; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; +} .upper-data { position: relative; overflow: hidden; @@ -47,7 +78,7 @@ body { height: 50%; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; - padding: 1em; + padding: 0 1em 1em 1em ; display: flex; flex-direction: column; } @@ -77,7 +108,7 @@ body { font-weight: 700; } .search { - margin-bottom: 1em; + margin-top: 0.5em; text-align: center; } .search input { @@ -95,6 +126,9 @@ body { } .more-info-label{ color: var(--white); + text-align: center; + font-size: 1.5em; + font-weight: 600; } .more-info-container{ flex: 1; @@ -126,15 +160,15 @@ body { } .info-block-label span { color: var(--white); - font-size: 0.8em; + font-size: 0.7em; } .info-block-value { width: 50%; display: flex; - padding-left: 10%; justify-content: flex-start; align-items: center; color: var(--white); + font-size: 0.8em; } .info-block-label-date { width: 25%; @@ -143,26 +177,17 @@ body { align-items: center; flex-direction: column; color: var(--white); - font-size: 0.8em; + font-size: 0.7em; } .info-block-value-date { width: 75%; - padding-left: 5%; display: flex; justify-content: flex-start; align-items: center; color: var(--white); + font-size: 0.8em; } -.first-column { - width: 50%; - display: flex; - flex-direction: column; -} -.second-column { - width: 50%; - display: flex; - flex-direction: column; -} + .details-block { padding: 1em; background-color: var(--shadow-light); @@ -170,6 +195,7 @@ body { border-radius: 20px; margin-top: 1em; margin-right: 1em; + font-size: 0.9em;; } .details-label { margin-top: 1em; @@ -186,15 +212,15 @@ body { align-items: center; } .button { - border-radius: 20px; - padding: 0.8em; + border-radius: 15px; + padding-top: 0.6em; + padding-bottom: 0.6em; + padding-left: 1.5em; + padding-right: 1.5em; background-color: var(--green-1); color: black; border: none; color: white; margin-right: 10%; + text-align: center; } - -.button #woman{ - background-color: pink; -} \ No newline at end of file