From 95bad57562349d91820c89d2dbf169bee64159e9 Mon Sep 17 00:00:00 2001
From: s473561 <wikgrz12@st.amu.edu.pl>
Date: Sun, 11 Jun 2023 12:05:06 +0200
Subject: [PATCH] routing, numerology page, handling wrong input

---
 src/app/app-routing.module.ts                 |  5 +-
 src/app/app.component.html                    |  1 +
 src/app/app.component.ts                      |  2 +-
 src/app/app.module.ts                         |  8 +-
 .../horoscope-data-container.component.html   |  5 +-
 ...horoscope-data-container.component.spec.ts |  7 ++
 .../horoscope-data-container.component.ts     |  6 +-
 src/app/horoscope/horoscope.component.html    | 26 ++++---
 src/app/horoscope/horoscope.component.ts      |  2 +-
 src/app/mock-login/mock-login.component.css   |  0
 src/app/mock-login/mock-login.component.html  |  1 -
 src/app/mock-login/mock-login.component.ts    | 10 ---
 src/app/models/horoscope.model.ts             |  1 +
 src/app/models/numerology.model.ts            |  4 +
 src/app/nav-bar/nav-bar.component.css         | 29 ++++++++
 src/app/nav-bar/nav-bar.component.html        | 18 +++++
 .../nav-bar.component.spec.ts}                | 12 +--
 src/app/nav-bar/nav-bar.component.ts          | 10 +++
 src/app/numerology/numerology.component.css   | 72 ++++++++++++++++++
 src/app/numerology/numerology.component.html  | 26 +++++++
 .../numerology/numerology.component.spec.ts   | 21 ++++++
 src/app/numerology/numerology.component.ts    | 39 ++++++++++
 .../open-horoscope.service.spec.ts            |  0
 .../open-horoscope.service.ts                 |  2 +-
 .../open-numerology.service.spec.ts           | 16 ++++
 .../open-numerology.service.ts                | 26 +++++++
 src/styles.css                                | 74 +++++++++++++------
 27 files changed, 364 insertions(+), 59 deletions(-)
 delete mode 100644 src/app/mock-login/mock-login.component.css
 delete mode 100644 src/app/mock-login/mock-login.component.html
 delete mode 100644 src/app/mock-login/mock-login.component.ts
 create mode 100644 src/app/models/numerology.model.ts
 create mode 100644 src/app/nav-bar/nav-bar.component.css
 create mode 100644 src/app/nav-bar/nav-bar.component.html
 rename src/app/{mock-login/mock-login.component.spec.ts => nav-bar/nav-bar.component.spec.ts} (50%)
 create mode 100644 src/app/nav-bar/nav-bar.component.ts
 create mode 100644 src/app/numerology/numerology.component.css
 create mode 100644 src/app/numerology/numerology.component.html
 create mode 100644 src/app/numerology/numerology.component.spec.ts
 create mode 100644 src/app/numerology/numerology.component.ts
 rename src/app/{ => open-horoscope}/open-horoscope.service.spec.ts (100%)
 rename src/app/{ => open-horoscope}/open-horoscope.service.ts (92%)
 create mode 100644 src/app/open-numerology/open-numerology.service.spec.ts
 create mode 100644 src/app/open-numerology/open-numerology.service.ts

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 @@
 <!-- <app-horoscope></app-horoscope> -->
 <!-- <app-horoscope-data-container></app-horoscope-data-container>
  -->
+ <app-nav-bar></app-nav-bar>
  <router-outlet></router-outlet>
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 @@
+
+<body>
 <div class="search">
     <form #form="ngForm" (submit)="onSubmit()">
       <input type="text" placeholder="search sunsign" name="sunsign" [(ngModel)]="sunSign">
@@ -6,4 +8,5 @@
 
     <app-horoscope [horoscopeData]="horoscopeData1" (newSignEvent) = "changeGender"
     >
-    </app-horoscope>
\ No newline at end of file
+    </app-horoscope>
+  </body>
\ 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 @@
   <div class="container" *ngIf="horoscopeData">
+    <div class="if-no-error" *ngIf="!horoscopeData.error; else ifError"> 
     <div class="first-column">
       <div class="upper-data">
         <img src="../assets/aquarius.jpg" *ngIf="horoscopeData.name === 'Aquarius'">
@@ -13,21 +14,18 @@
         <img src="../assets/scorpio.jpg" *ngIf="horoscopeData.name === 'Scorpio'">
         <img src="../assets/taurus.jpg" *ngIf="horoscopeData.name === 'Tautus'">
         <img src="../assets/virgo.jpg" *ngIf="horoscopeData.name === 'Virgo'">
-    
-        <div class="horoscope-data">
-          <div class="sign">{{ horoscopeData.name }}</div>
-        </div>
       </div>
   
       <div class="lower-data">
         <div class="more-info-label">
-          Information
+          {{ horoscopeData.name }}
         </div>
         <div class="more-info-container">
           <div class="info-block">
             <div class="info-block-label">
               <fa-icon style="color: white" [icon]="faGlobe"></fa-icon>
-              <span>ruling<br>planet</span>
+              <span>ruling</span>
+              <span>planet</span>
             </div>
             <div class="info-block-value">
               {{ horoscopeData.ruling_planet }}
@@ -37,6 +35,7 @@
             <div class="info-block-label">
               <fa-icon style="color: white" [icon]="faFire"></fa-icon>
               <span>element</span>
+              <span></span>
             </div>
             <div class="info-block-value">
               {{ horoscopeData.element }}
@@ -45,7 +44,8 @@
           <div class="info-block-date">
             <div class="info-block-label-date">
               <fa-icon style="color: white" [icon]="faCalendar"></fa-icon>
-              <span>date range</span>
+              <span>date</span>
+              <span>range</span>
             </div>
             <div class="info-block-value-date">
               {{ horoscopeData.date_range }}
@@ -64,7 +64,7 @@
       </div>
       <div class="details-label">
         <p>
-          Get to know yourself {{ gender }}
+          Get to know yourselfs
         </p>
       </div>
       <div class="details-block" *ngIf="gender === 'woman'">
@@ -74,4 +74,12 @@
         {{ horoscopeData.man }}
       </div> 
     </div>
-  </div>
\ No newline at end of file
+  </div>
+    <ng-template #ifError>
+    <div class="error-container">
+      <p>
+        {{ horoscopeData.error }}
+      </p>
+    </div>
+  </ng-template>
+</div>
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 @@
-<p>mock-login works!</p>
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 @@
+<nav class="nav-bar">
+    <div class="inside-nav-bar">
+        <ul>
+            <li>
+                <nav>
+                    <a href="#" routerLink="/numerology" routerLinkActive="active">Numerology</a>
+                </nav>
+            </li>
+            <li>
+                <nav>
+                    <a href="#" routerLink="/horoscope" routerLinkActive="active">Zodiac</a>
+                </nav>
+            </li>
+        </ul>
+    </div>
+</nav>
+
+
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<MockLoginComponent>;
+describe('NavBarComponent', () => {
+  let component: NavBarComponent;
+  let fixture: ComponentFixture<NavBarComponent>;
 
   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 @@
+<body>
+    <div class="search">
+        <form #form="ngForm" (submit)="onSubmitNumber()">
+          <input type="text" placeholder="number" name="number" [(ngModel)]="number">
+        </form>
+    </div>
+    <div class="container-numerology" *ngIf="numerologyData">
+        <div class="upper-num">
+           
+            <div class="num-disp">
+                {{ numerologyData.number }}
+            </div>
+        </div>
+        <div class="lower-num" >
+            <div class="lower-container" >
+                <p *ngIf="numerologyData.desc != ''">
+                    {{ numerologyData.desc }}
+                </p>
+                <p id="noNumber" *ngIf="numerologyData.desc == ''">
+                    There is no numerology for this number.
+                </p>
+            </div>
+        </div>
+
+    </div>
+</body>
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<NumerologyComponent>;
+
+  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<NumerologyData>{
+
+    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<NumerologyData>(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