diff --git a/.gitignore b/.gitignore
index 0711527..839e43a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -40,3 +40,6 @@ testem.log
# System files
.DS_Store
Thumbs.db
+
+# api-key
+env.ts
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index b3d8620..0aa586e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,12 @@
"@angular/platform-browser": "^16.0.0",
"@angular/platform-browser-dynamic": "^16.0.0",
"@angular/router": "^16.0.0",
+ "@fortawesome/angular-fontawesome": "^0.13.0",
+ "@fortawesome/fontawesome-svg-core": "^6.4.0",
+ "@fortawesome/free-brands-svg-icons": "^6.4.0",
+ "@fortawesome/free-regular-svg-icons": "^6.4.0",
+ "@fortawesome/free-solid-svg-icons": "^6.4.0",
+ "alertifyjs": "^1.13.1",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.13.0"
@@ -2768,6 +2774,75 @@
"node": ">=12"
}
},
+ "node_modules/@fortawesome/angular-fontawesome": {
+ "version": "0.13.0",
+ "resolved": "https://registry.npmjs.org/@fortawesome/angular-fontawesome/-/angular-fontawesome-0.13.0.tgz",
+ "integrity": "sha512-gzSPRdveOXNO7NIiMgTyB46aiHG0i98KinnAEqHXi8qzraM/kCcHn/0y3f4MhemX6kftwsFli0IU8RyHmtXlSQ==",
+ "dependencies": {
+ "tslib": "^2.4.1"
+ },
+ "peerDependencies": {
+ "@angular/core": "^16.0.0",
+ "@fortawesome/fontawesome-svg-core": "~1.2.27 || ~1.3.0-beta2 || ^6.1.0"
+ }
+ },
+ "node_modules/@fortawesome/fontawesome-common-types": {
+ "version": "6.4.0",
+ "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.0.tgz",
+ "integrity": "sha512-HNii132xfomg5QVZw0HwXXpN22s7VBHQBv9CeOu9tfJnhsWQNd2lmTNi8CSrnw5B+5YOmzu1UoPAyxaXsJ6RgQ==",
+ "hasInstallScript": true,
+ "engines": {
+ "node": ">=6"
+ }
+ },
+ "node_modules/@fortawesome/fontawesome-svg-core": {
+ "version": "6.4.0",
+ "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.4.0.tgz",
+ "integrity": "sha512-Bertv8xOiVELz5raB2FlXDPKt+m94MQ3JgDfsVbrqNpLU9+UE2E18GKjLKw+d3XbeYPqg1pzyQKGsrzbw+pPaw==",
+ "hasInstallScript": true,
+ "dependencies": {
+ "@fortawesome/fontawesome-common-types": "6.4.0"
+ },
+ "engines": {
+ "node": ">=6"
+ }
+ },
+ "node_modules/@fortawesome/free-brands-svg-icons": {
+ "version": "6.4.0",
+ "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.4.0.tgz",
+ "integrity": "sha512-qvxTCo0FQ5k2N+VCXb/PZQ+QMhqRVM4OORiO6MXdG6bKolIojGU/srQ1ptvKk0JTbRgaJOfL2qMqGvBEZG7Z6g==",
+ "hasInstallScript": true,
+ "dependencies": {
+ "@fortawesome/fontawesome-common-types": "6.4.0"
+ },
+ "engines": {
+ "node": ">=6"
+ }
+ },
+ "node_modules/@fortawesome/free-regular-svg-icons": {
+ "version": "6.4.0",
+ "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.4.0.tgz",
+ "integrity": "sha512-ZfycI7D0KWPZtf7wtMFnQxs8qjBXArRzczABuMQqecA/nXohquJ5J/RCR77PmY5qGWkxAZDxpnUFVXKwtY/jPw==",
+ "hasInstallScript": true,
+ "dependencies": {
+ "@fortawesome/fontawesome-common-types": "6.4.0"
+ },
+ "engines": {
+ "node": ">=6"
+ }
+ },
+ "node_modules/@fortawesome/free-solid-svg-icons": {
+ "version": "6.4.0",
+ "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.0.tgz",
+ "integrity": "sha512-kutPeRGWm8V5dltFP1zGjQOEAzaLZj4StdQhWVZnfGFCvAPVvHh8qk5bRrU4KXnRRRNni5tKQI9PBAdI6MP8nQ==",
+ "hasInstallScript": true,
+ "dependencies": {
+ "@fortawesome/fontawesome-common-types": "6.4.0"
+ },
+ "engines": {
+ "node": ">=6"
+ }
+ },
"node_modules/@gar/promisify": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",
@@ -3905,6 +3980,11 @@
"ajv": "^8.8.2"
}
},
+ "node_modules/alertifyjs": {
+ "version": "1.13.1",
+ "resolved": "https://registry.npmjs.org/alertifyjs/-/alertifyjs-1.13.1.tgz",
+ "integrity": "sha512-CckZE2dZDsEEXglOXKxT00vUDV5A6udZom+bn1XHdIWlbSFZgYq7UXCBlwkShhIH3Li/1VxLmr55GOQFQ12WSg=="
+ },
"node_modules/ansi-colors": {
"version": "4.1.3",
"resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",
diff --git a/package.json b/package.json
index 4102e83..5bc993e 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,12 @@
"@angular/platform-browser": "^16.0.0",
"@angular/platform-browser-dynamic": "^16.0.0",
"@angular/router": "^16.0.0",
+ "@fortawesome/angular-fontawesome": "^0.13.0",
+ "@fortawesome/fontawesome-svg-core": "^6.4.0",
+ "@fortawesome/free-brands-svg-icons": "^6.4.0",
+ "@fortawesome/free-regular-svg-icons": "^6.4.0",
+ "@fortawesome/free-solid-svg-icons": "^6.4.0",
+ "alertifyjs": "^1.13.1",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.13.0"
diff --git a/specyfikacja.txt b/specyfikacja.txt
new file mode 100644
index 0000000..82ba8bc
--- /dev/null
+++ b/specyfikacja.txt
@@ -0,0 +1,35 @@
+1. Wymagania funkcjonalne
+- Aplikacja umożliwia wpisanie znaku zodiaku przez użytkownika i wyświetla informacje dotyczące tego znaku, takie jak: planeta wodząca (ruling planet),
+ żywioł (element), zakres dat (date range).
+- Aplikacja umożliwia wyświetlanie spersonalizowanych wyników dla kobiet i mężczyzn. Dzięki dwóm zakładką dla kobiet i mężczyzn (woman/man),
+ które wyświetlają informację o kobietach/mężczyznach spod wybranego znaku.
+- Łatwość przełączania się między zakładkami: Zodiac i Numerology.
+- Aplikacja umożliwia wpisanie liczby przez użytkownika i wyświetla informacje dotyczące tego numeru na podstawie numerologii.
+
+2. Wymagania pozafunkcjonalne
+- Wyświetlanie grafiki spersonalizowanej do wpisanego znaku zodiaku.
+- Zmiana koloru przycisków odpowiadających za personalizację treści w zależności od płci.
+- Obsługa błędów
+ Zakładka Zodiac – wyświetla informację o niepoprawnie wpisanym znaku zodiaku
+ Zakładka Numerology - wyświetla informację o niepoprawnie wpisanej liczbie, lub jeżeli dla danej liczby nie ma informacji
+ Dla wszystkich error-ów związanych z http, wyświetlana jest informacja o kodzie błędu i treści błędu w postaci wyskakującego powiadomienia.
+
+3. Opis projektu
+Aplikacja umożliwia użytkownikowi uzyskanie informacji na temat znaku zodiaku i numerologii w łatwy i intuicyjny sposób. Aplikacja oferuje dwie zakładki.
+Pierwsza umożliwia wprowadzenie znaku zodiaku, aby otrzymać szczegółowe informacje na jego temat, takie jak planeta wodząca, żywioł, daty trwania
+i krótki opis zarówno dla kobiet jak i mężczyzn.
+Druga zakładka pozwala użytkownikom na wprowadzenie cyfry, a następnie wyświetla związane z nią informacje numerologiczne.
+Aplikacja jest responsywna i zachowuje dane o ostatnio sprawdzonej liczbie w zakładce numerology.
+
+4. Potencjalni odbiorcy
+- Osoby zainteresowane astrologią, które chcą zgłębiać informacje na temat swojego znaku zodiaku
+- Miłośnicy numerologii, którzy są ciekawi znaczenia liczb i chcą zgłębić informacje na temat swojej cyfry osobistej.
+
+5. Dwie potencjalne korzyści dla użytkowników
+- Lepsze zrozumienie siebie. Dzięki tej aplikacji użytkownicy będą mieli możliwość zgłębiania informacji na temat swojego znaku zodiaku i numerologii.
+- Rozwój osobisty i duchowy. Aplikacja może służyć jako narzędzie do rozwoju osobistego i duchowego użytkowników.
+
+6. Stos technologiczny
+- Angular
+- TypeScript
+
diff --git a/src/app/alertifyjs.d.ts b/src/app/alertifyjs.d.ts
new file mode 100644
index 0000000..1f08337
--- /dev/null
+++ b/src/app/alertifyjs.d.ts
@@ -0,0 +1 @@
+declare module 'alertifyjs';
\ No newline at end of file
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 0297262..2f68273 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -1,7 +1,16 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
+import { HoroscopeDataContainerComponent } from './horoscope-data-container/horoscope-data-container.component';
+import { NumerologyComponent } from './numerology/numerology.component';
-const routes: Routes = [];
+const routes: Routes = [
+ {
+ path: 'horoscope',
+ component: HoroscopeDataContainerComponent
+ },
+ { path: 'numerology', component: NumerologyComponent },
+ { path: '', redirectTo: '/horoscope', pathMatch: 'full' },
+ ];
@NgModule({
imports: [RouterModule.forRoot(routes)],
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 2a0fbf1..435cdfd 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,484 +1,2 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
{{ title }} app is running!
-
-
-
-
-
-
-
Resources
-
Here are some links to help you get started:
-
-
-
-
-
Next Steps
-
What do you want to do next with your app?
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
ng generate component xyz
-
ng add @angular/material
-
ng add @angular/pwa
-
ng add _____
-
ng test
-
ng build
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
index ab62144..9050167 100644
--- a/src/app/app.component.spec.ts
+++ b/src/app/app.component.spec.ts
@@ -1,29 +1,17 @@
-import { TestBed } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
-import { AppComponent } from './app.component';
+// import { TestBed } from '@angular/core/testing';
+// import { RouterTestingModule } from '@angular/router/testing';
+// import { AppComponent } from './app.component';
-describe('AppComponent', () => {
- beforeEach(() => TestBed.configureTestingModule({
- imports: [RouterTestingModule],
- declarations: [AppComponent]
- }));
+// describe('AppComponent', () => {
+// beforeEach(() => TestBed.configureTestingModule({
+// imports: [RouterTestingModule],
+// declarations: [AppComponent]
+// }));
- it('should create the app', () => {
- const fixture = TestBed.createComponent(AppComponent);
- const app = fixture.componentInstance;
- expect(app).toBeTruthy();
- });
-
- it(`should have as title 'my_app'`, () => {
- const fixture = TestBed.createComponent(AppComponent);
- const app = fixture.componentInstance;
- expect(app.title).toEqual('my_app');
- });
-
- it('should render title', () => {
- const fixture = TestBed.createComponent(AppComponent);
- fixture.detectChanges();
- const compiled = fixture.nativeElement as HTMLElement;
- expect(compiled.querySelector('.content span')?.textContent).toContain('my_app app is running!');
- });
-});
+// it('should create the app', () => {
+// const fixture = TestBed.createComponent(AppComponent);
+// const app = fixture.componentInstance;
+// expect(app).toBeTruthy();
+// });
+
+// });
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index e829ebf..5cb41eb 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,3 +1,4 @@
+import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';
@Component({
@@ -6,5 +7,4 @@ import { Component } from '@angular/core';
styleUrls: ['./app.component.css']
})
export class AppComponent {
- title = 'my_app';
}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index b1c6c96..11db1f2 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,18 +1,34 @@
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
-
import { AppRoutingModule } from './app-routing.module';
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/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
+ AppComponent,
+ HoroscopeComponent,
+ HoroscopeDataContainerComponent,
+ NavBarComponent,
+ NumerologyComponent
],
imports: [
BrowserModule,
- AppRoutingModule
+ AppRoutingModule,
+ HttpClientModule,
+ FormsModule,
+ FontAwesomeModule,
+ ],
+ providers: [
+ OpenHoroscopeService,
],
- providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
diff --git a/src/app/horoscope-data-container/horoscope-data-container.component.css b/src/app/horoscope-data-container/horoscope-data-container.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/horoscope-data-container/horoscope-data-container.component.html b/src/app/horoscope-data-container/horoscope-data-container.component.html
new file mode 100644
index 0000000..9cf6323
--- /dev/null
+++ b/src/app/horoscope-data-container/horoscope-data-container.component.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+
+
+
\ 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
new file mode 100644
index 0000000..070223c
--- /dev/null
+++ b/src/app/horoscope-data-container/horoscope-data-container.component.spec.ts
@@ -0,0 +1,22 @@
+// import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+// import { HoroscopeDataContainerComponent } from './horoscope-data-container.component';
+
+// describe('HoroscopeDataContainerComponent', () => {
+// let component: HoroscopeDataContainerComponent;
+// let fixture: ComponentFixture;
+
+// beforeEach(() => {
+// TestBed.configureTestingModule({
+// declarations: [HoroscopeDataContainerComponent]
+// });
+// fixture = TestBed.createComponent(HoroscopeDataContainerComponent);
+// component = fixture.componentInstance;
+// fixture.detectChanges();
+// });
+
+// it('should create', () => {
+// expect(component).toBeTruthy();
+// });
+
+// });
diff --git a/src/app/horoscope-data-container/horoscope-data-container.component.ts b/src/app/horoscope-data-container/horoscope-data-container.component.ts
new file mode 100644
index 0000000..e0fdb84
--- /dev/null
+++ b/src/app/horoscope-data-container/horoscope-data-container.component.ts
@@ -0,0 +1,54 @@
+import { Component, OnInit } from '@angular/core';
+import { HoroscopeData } from '../models/horoscope.model';
+import { OpenHoroscopeService } from '../open-horoscope/open-horoscope.service';
+import { faEarth, faFire, faCalendar} from '@fortawesome/free-solid-svg-icons';
+
+@Component({
+ selector: 'app-horoscope-data-container',
+ templateUrl: './horoscope-data-container.component.html',
+ styleUrls: ['./horoscope-data-container.component.css']
+})
+export class HoroscopeDataContainerComponent implements OnInit {
+
+ faGlobe = faEarth;
+ faFire = faFire;
+ faCalendar = faCalendar;
+
+ public sunSign: string = 'Libra'
+ public horoscopeData1?: HoroscopeData;
+ public gender: string = 'woman';
+ errormessage: any
+
+ constructor (private openHoroscopeService: OpenHoroscopeService) {
+
+ }
+
+ ngOnInit(): void {
+ this.getHoroscope();
+ this.sunSign = '';
+ }
+
+ onSubmit() {
+ this.getHoroscope();
+ this.sunSign = '';
+ }
+
+ getHoroscope() {
+ this.openHoroscopeService.getHoroscopeData(this.sunSign)
+ .subscribe({
+ next: (response) => {
+ this.horoscopeData1 = response;
+ console.log(response);
+ },
+ error: (error) => {
+ this.errormessage = error;
+ }
+
+ });
+ }
+
+ changeGender(newValue: string) {
+ this.gender = newValue;
+ }
+
+}
diff --git a/src/app/horoscope/horoscope.component.css b/src/app/horoscope/horoscope.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/horoscope/horoscope.component.html b/src/app/horoscope/horoscope.component.html
new file mode 100644
index 0000000..b962237
--- /dev/null
+++ b/src/app/horoscope/horoscope.component.html
@@ -0,0 +1,85 @@
+
+
+
+
+
![](../assets/aquarius.jpg)
+
![](../assets/aries.jpg)
+
![](../assets/cancer.jpg)
+
![](../assets/capricorn.jpg)
+
![](../assets/gemini.jpg)
+
![](../assets/leo.jpg)
+
![](../assets/libra.jpg)
+
![](../assets/pices.jpg)
+
![](../assets/sagittarius.jpg)
+
![](../assets/scorpio.jpg)
+
![](../assets/taurus.jpg)
+
![](../assets/virgo.jpg)
+
+
+
+
+ {{ horoscopeData.name }}
+
+
+
+
+
+ ruling
+ planet
+
+
+ {{ horoscopeData.ruling_planet }}
+
+
+
+
+
+ element
+
+
+
+ {{ horoscopeData.element }}
+
+
+
+
+
+ date
+ range
+
+
+ {{ horoscopeData.date_range }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Get to know yourselfs
+
+
+
+ {{ horoscopeData.woman }}
+
+
+ {{ horoscopeData.man }}
+
+
+
+
+
+
+ {{ horoscopeData.error }}
+
+
+
+
diff --git a/src/app/horoscope/horoscope.component.spec.ts b/src/app/horoscope/horoscope.component.spec.ts
new file mode 100644
index 0000000..ffe5e3f
--- /dev/null
+++ b/src/app/horoscope/horoscope.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HoroscopeComponent } from './horoscope.component';
+
+describe('HoroscopeComponent', () => {
+ let component: HoroscopeComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ declarations: [HoroscopeComponent]
+ });
+ fixture = TestBed.createComponent(HoroscopeComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/horoscope/horoscope.component.ts b/src/app/horoscope/horoscope.component.ts
new file mode 100644
index 0000000..afb9b1f
--- /dev/null
+++ b/src/app/horoscope/horoscope.component.ts
@@ -0,0 +1,42 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { OpenHoroscopeService } from '../open-horoscope/open-horoscope.service';
+import { HoroscopeData } from '../models/horoscope.model';
+import { faEarth, faFire, faCalendar} from '@fortawesome/free-solid-svg-icons';
+
+@Component({
+ selector: 'app-horoscope',
+ templateUrl: './horoscope.component.html',
+ styleUrls: ['./horoscope.component.css']
+})
+
+export class HoroscopeComponent implements OnInit {
+
+ faGlobe = faEarth;
+ faFire = faFire;
+ faCalendar = faCalendar;
+
+ public gender: string = 'woman'
+
+ @Input()
+ public horoscopeData?: HoroscopeData;
+
+
+ @Output()
+ public sunSign: string = 'Libra'
+ newSignEvent = new EventEmitter();
+
+ constructor(
+ ) { }
+
+ onSubmit() {
+ }
+
+ ngOnInit(): void {
+ }
+
+ changeGender(value: string) {
+ this.gender = value;
+ this.newSignEvent.emit(this.gender)
+ }
+
+}
diff --git a/src/app/models/horoscope.model.ts b/src/app/models/horoscope.model.ts
new file mode 100644
index 0000000..9d2e44c
--- /dev/null
+++ b/src/app/models/horoscope.model.ts
@@ -0,0 +1,20 @@
+export interface HoroscopeData {
+ about: string
+ career: string
+ compatibility: string
+ date_range: string
+ element: string
+ health: string
+ love: string
+ man: string
+ name: string
+ nature: string
+ relationship: string
+ ruling_planet: string
+ strengths: string
+ 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..56a9896
--- /dev/null
+++ b/src/app/nav-bar/nav-bar.component.css
@@ -0,0 +1,36 @@
+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 {
+ max-width: 800px;
+ margin: 0 auto;
+ }
+
+ @media (max-width: 768px) {
+ .nav-bar {
+ width: 90vw;
+ }
+ }
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/nav-bar/nav-bar.component.spec.ts b/src/app/nav-bar/nav-bar.component.spec.ts
new file mode 100644
index 0000000..6759c20
--- /dev/null
+++ b/src/app/nav-bar/nav-bar.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NavBarComponent } from './nav-bar.component';
+
+describe('NavBarComponent', () => {
+ let component: NavBarComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ declarations: [NavBarComponent]
+ });
+ fixture = TestBed.createComponent(NavBarComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
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..63bae2e
--- /dev/null
+++ b/src/app/numerology/numerology.component.css
@@ -0,0 +1,83 @@
+.container-numerology {
+ max-width: 768px;
+ 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
+}
+@media screen and (max-width: 768px) {
+ body {
+ font-size: 14px;
+ }
+
+ .container-numerology {
+ width: 90vw;
+ }
+
+}
diff --git a/src/app/numerology/numerology.component.html b/src/app/numerology/numerology.component.html
new file mode 100644
index 0000000..fbe53ee
--- /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..ff72fd6
--- /dev/null
+++ b/src/app/numerology/numerology.component.spec.ts
@@ -0,0 +1,43 @@
+import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
+
+import { NumerologyComponent } from './numerology.component';
+import { RouterTestingModule } from '@angular/router/testing';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { OpenNumerologyService } from '../open-numerology/open-numerology.service';
+import { NumerologyData } from '../models/numerology.model';
+import { delay, of } from 'rxjs';
+import { FormsModule } from '@angular/forms';
+
+describe('NumerologyComponent', () => {
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ declarations: [NumerologyComponent],
+ imports: [
+ RouterTestingModule,
+ HttpClientTestingModule,
+ FormsModule
+ ],
+ providers: [OpenNumerologyService]
+ }).compileComponents();
+
+ });
+
+ it('should call getNumerologyData correctly', fakeAsync(() => {
+ let fixture = TestBed.createComponent(NumerologyComponent);
+ let component = fixture.componentInstance;
+ let numerologyService = fixture.debugElement.injector.get(OpenNumerologyService);
+ const dummyData: NumerologyData = {
+ desc: 'numerology about number 1',
+ number: '1',
+ };
+ let stub = spyOn(numerologyService, "getNumerologyData").and.callFake(() => {
+ return of(dummyData).pipe(delay(300))
+ });
+ component.getNumerology();
+ tick(300);
+
+ expect(component.numerologyData).toEqual(dummyData);
+
+ })
+ );
+});
diff --git a/src/app/numerology/numerology.component.ts b/src/app/numerology/numerology.component.ts
new file mode 100644
index 0000000..e1dfa20
--- /dev/null
+++ b/src/app/numerology/numerology.component.ts
@@ -0,0 +1,44 @@
+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
+ public numerologyData?: NumerologyData
+ errormessage: any
+
+ constructor (private openNumerologyService: OpenNumerologyService) {}
+
+ ngOnInit(): void {
+ this.number = localStorage.getItem('number') || '7';
+ this.getNumerology();
+ this.number= '';
+
+ }
+
+ onSubmitNumber() {
+ localStorage.setItem('number', this.number);
+ this.getNumerology();
+ this.number = '';
+ }
+
+ getNumerology() {
+ this.openNumerologyService.getNumerologyData(this.number)
+ .subscribe({
+ next: (response) => {
+ this.numerologyData = response;
+ console.log(response);
+ },
+ error: (error) => {
+ this.errormessage = error;
+ }
+ });
+ }
+
+}
diff --git a/src/app/open-horoscope/open-horoscope.service.spec.ts b/src/app/open-horoscope/open-horoscope.service.spec.ts
new file mode 100644
index 0000000..4226157
--- /dev/null
+++ b/src/app/open-horoscope/open-horoscope.service.spec.ts
@@ -0,0 +1,16 @@
+// import { TestBed } from '@angular/core/testing';
+
+// import { OpenHoroscopeService } from './open-horoscope.service';
+
+// describe('OpenHoroscopeService', () => {
+// let service: OpenHoroscopeService;
+
+// beforeEach(() => {
+// TestBed.configureTestingModule({});
+// service = TestBed.inject(OpenHoroscopeService);
+// });
+
+// it('should be created', () => {
+// expect(service).toBeTruthy();
+// });
+// });
diff --git a/src/app/open-horoscope/open-horoscope.service.ts b/src/app/open-horoscope/open-horoscope.service.ts
new file mode 100644
index 0000000..d44886e
--- /dev/null
+++ b/src/app/open-horoscope/open-horoscope.service.ts
@@ -0,0 +1,47 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpErrorResponse, HttpHeaders, HttpParams } from '@angular/common/http';
+import { Observable, catchError, throwError } from 'rxjs';
+import { HoroscopeData } from '../models/horoscope.model';
+import * as alertifyjs from 'alertifyjs';
+import { env } from 'env';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class OpenHoroscopeService {
+
+ constructor( private http: HttpClient ) { }
+
+ getHoroscopeData(location: string): Observable{
+
+ const url = 'https://horoscope-astrology.p.rapidapi.com/sign?';
+ const headers = new HttpHeaders({
+ //'X-RapidAPI-Key': '5016ac0ebdmsha06ee5d995fe2c4p108e0fjsn03c8c4f21287',
+ 'X-RapidAPI-Key': env.API_KEY,
+ 'X-RapidAPI-Host': 'horoscope-astrology.p.rapidapi.com'
+ });
+ const params = new HttpParams()
+ .set('s', location.toLowerCase());
+
+ return this.http.get(url, {headers, params})
+ .pipe(
+ catchError(this.handleError)
+ );
+ }
+
+ private handleError(error: HttpErrorResponse) {
+ let errormessage = '';
+ if (error.status === 0) {
+ console.error('An error occurred:', error.error);
+ } else {
+ console.error(
+ `Backend returned code ${error.status}, body was: `, error.error);
+ errormessage = `Backend returned code ${error.status},\n`, error.error;
+ }
+ errormessage += 'Something bad happened; please try again later.';
+ alertifyjs.error(errormessage);
+ return throwError(() => new Error(errormessage));
+ }
+
+}
+
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..11f5398
--- /dev/null
+++ b/src/app/open-numerology/open-numerology.service.spec.ts
@@ -0,0 +1,43 @@
+import { TestBed } from '@angular/core/testing';
+import { HttpClientTestingModule, HttpTestingController} from '@angular/common/http/testing';
+
+import { OpenNumerologyService } from './open-numerology.service';
+import { NumerologyData } from '../models/numerology.model';
+
+describe('OpenNumerologyService', () => {
+ let service: OpenNumerologyService;
+ let httpMock: HttpTestingController;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ imports: [HttpClientTestingModule],
+ providers: [OpenNumerologyService]
+ });
+ service = TestBed.get(OpenNumerologyService);
+ httpMock = TestBed.get(HttpTestingController);
+ });
+
+ afterEach(() => {
+ httpMock.verify();
+ })
+
+ it('should retrive NumerologyData from the API via GET', () => {
+ const dummyData: NumerologyData = {
+ desc: 'numerology about number 1',
+ number: '1',
+ };
+ const testNumber: string = '1';
+
+ service.getNumerologyData(testNumber).subscribe(numerology => {
+ expect(numerology).toEqual(dummyData)
+ });
+
+ const request = httpMock.expectOne('https://horoscope-astrology.p.rapidapi.com/numerology?n=1');
+
+ expect(request.request.method).toBe('GET');
+
+ request.flush(dummyData);
+ })
+
+});
+
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..5aa31ba
--- /dev/null
+++ b/src/app/open-numerology/open-numerology.service.ts
@@ -0,0 +1,45 @@
+import { HttpClient, HttpErrorResponse, HttpHeaders, HttpParams } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { NumerologyData } from '../models/numerology.model';
+import { Observable } from 'rxjs/internal/Observable';
+import { catchError, throwError } from 'rxjs';
+import * as alertifyjs from 'alertifyjs';
+import { DefinePlugin, webpack } from 'webpack';
+import { env } from 'env';
+
+@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': env.API_KEY,
+ 'X-RapidAPI-Host': 'horoscope-astrology.p.rapidapi.com'
+ });
+ const params = new HttpParams()
+ .set('n', number.toLowerCase());
+
+ return this.http.get(url, {headers, params})
+ .pipe(catchError(this.handleError));
+
+ }
+
+ private handleError(error: HttpErrorResponse) {
+ let errormessage = '';
+ if (error.status === 0) {
+ console.error('An error occurred:', error.error);
+ } else {
+ console.error(
+ `Backend returned code ${error.status}, body was: `, error.error);
+ errormessage = `Backend returned code ${error.status},\n`, error.error;
+ }
+ errormessage += 'Something bad happened; please try again later.';
+ alertifyjs.error(errormessage);
+ return throwError(() => new Error(errormessage));
+ }
+}
diff --git a/src/assets/aquarius.jpg b/src/assets/aquarius.jpg
new file mode 100644
index 0000000..bdce241
Binary files /dev/null and b/src/assets/aquarius.jpg differ
diff --git a/src/assets/aries.jpg b/src/assets/aries.jpg
new file mode 100644
index 0000000..b8d0adb
Binary files /dev/null and b/src/assets/aries.jpg differ
diff --git a/src/assets/cancer.jpg b/src/assets/cancer.jpg
new file mode 100644
index 0000000..efbd0f5
Binary files /dev/null and b/src/assets/cancer.jpg differ
diff --git a/src/assets/capricorn.jpg b/src/assets/capricorn.jpg
new file mode 100644
index 0000000..64e7f14
Binary files /dev/null and b/src/assets/capricorn.jpg differ
diff --git a/src/assets/gemini.jpg b/src/assets/gemini.jpg
new file mode 100644
index 0000000..3af24c9
Binary files /dev/null and b/src/assets/gemini.jpg differ
diff --git a/src/assets/leo.jpg b/src/assets/leo.jpg
new file mode 100644
index 0000000..4c21ac6
Binary files /dev/null and b/src/assets/leo.jpg differ
diff --git a/src/assets/libra.jpg b/src/assets/libra.jpg
new file mode 100644
index 0000000..ac69247
Binary files /dev/null and b/src/assets/libra.jpg differ
diff --git a/src/assets/pices.jpg b/src/assets/pices.jpg
new file mode 100644
index 0000000..513b50b
Binary files /dev/null and b/src/assets/pices.jpg differ
diff --git a/src/assets/sagittarius.jpg b/src/assets/sagittarius.jpg
new file mode 100644
index 0000000..b593c90
Binary files /dev/null and b/src/assets/sagittarius.jpg differ
diff --git a/src/assets/scorpio.jpg b/src/assets/scorpio.jpg
new file mode 100644
index 0000000..56a3421
Binary files /dev/null and b/src/assets/scorpio.jpg differ
diff --git a/src/assets/taurus.jpg b/src/assets/taurus.jpg
new file mode 100644
index 0000000..6e3277f
Binary files /dev/null and b/src/assets/taurus.jpg differ
diff --git a/src/assets/virgo.jpg b/src/assets/virgo.jpg
new file mode 100644
index 0000000..03461d5
Binary files /dev/null and b/src/assets/virgo.jpg differ
diff --git a/src/styles.css b/src/styles.css
index 90d4ee0..7071d9f 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1 +1,247 @@
-/* You can add global styles to this file, and also import other style files */
+@import '../node_modules/alertifyjs/build/css/alertify.min.css';
+@import '../node_modules/alertifyjs/build/css/themes/bootstrap.min.css';
+
+: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);
+ --shadow-light: rgba(255,255,255,0.1);
+}
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+body {
+ font-family: Verdana, Geneva, Tahoma, sans-serif;
+ font-size: 16px;
+ width: 100%;
+ height: 100%;
+ background-color: var(--green-1);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+}
+.first-column {
+ width: 35%;
+ height: 78vh;
+ display: flex;
+ flex-direction: column;
+}
+.second-column {
+ width: 65%;
+ display: flex;
+ flex-direction: column;
+}
+.container {
+ width: 800px;
+ height: 78vh;
+ background-color: var(--green-2);
+ border-radius: 20px;
+ box-shadow: 10px 10px 10px var(--shadow-dark);
+ margin: 1em auto;
+ 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;
+ width: 100%;
+ height: 50%;
+ border-top-left-radius: 20px;
+ border-top-right-radius: 20px;
+}
+.lower-data {
+ position: relative;
+ overflow: hidden;
+ width: 100%;
+ height: 50%;
+ border-bottom-left-radius: 20px;
+ border-bottom-right-radius: 20px;
+ padding: 0 1em 1em 1em ;
+ display: flex;
+ flex-direction: column;
+}
+.upper-data img {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ padding: 1em;
+ border-top-left-radius: 30px;
+ border-top-right-radius: 30px;
+}
+.horoscope-data {
+ position: relative;
+ z-index: 1;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+.sign {
+ color:black;
+ text-align: center;
+ font-size: 2em;
+ font-weight: 700;
+}
+.search {
+ margin-top: 0.5em;
+ text-align: center;
+}
+.search input {
+ background-color: var(--shadow-dark);
+ outline: none;
+ border: none;
+ border-radius: 20px;
+ padding: 1em;
+ color: var(--white);
+ font-size: 0.8em;
+ text-align: center;
+}
+.search ::placeholder {
+ color: var(--white)
+}
+.more-info-label{
+ color: var(--white);
+ text-align: center;
+ font-size: 1.5em;
+ font-weight: 600;
+}
+.more-info-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;
+}
+.info-block {
+ width: 50%;
+ display: flex;
+ flex-direction: row;
+}
+.info-block-date {
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+}
+.info-block-label {
+ width: 50%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+}
+.info-block-label span {
+ color: var(--white);
+ font-size: 0.7em;
+}
+.info-block-value {
+ width: 50%;
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ color: var(--white);
+ font-size: 0.8em;
+}
+.info-block-label-date {
+ width: 25%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ color: var(--white);
+ font-size: 0.7em;
+}
+.info-block-value-date {
+ width: 75%;
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ color: var(--white);
+ font-size: 0.8em;
+}
+
+.details-block {
+ padding: 1em;
+ background-color: var(--shadow-light);
+ color: var(--white);
+ border-radius: 20px;
+ margin-top: 1em;
+ margin-right: 1em;
+ font-size: 0.9em;;
+}
+.details-label {
+ margin-top: 1em;
+ color: var(--white)
+}
+.details-label p {
+ text-align: center;
+}
+.button-row {
+ display: flex;
+ flex-direction: row;
+ padding-top: 1em;
+ justify-content: center;
+ align-items: center;
+}
+.button {
+ 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;
+}
+
+@media screen and (max-width: 768px) {
+ body {
+ font-size: 12px;
+ }
+
+ .container {
+ width: 90%;
+ margin: 0.5em;
+ }
+
+ .first-column,
+ .second-column {
+ width: 100%;
+ }
+
+ .upper-data img {
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ }
+
+ }
\ No newline at end of file
diff --git a/tsconfig.app.json b/tsconfig.app.json
index 374cc9d..9161a71 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -3,7 +3,7 @@
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
- "types": []
+ "types": ["node"]
},
"files": [
"src/main.ts"
diff --git a/tsconfig.json b/tsconfig.json
index ed966d4..cf877a6 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -22,7 +22,8 @@
"lib": [
"ES2022",
"dom"
- ]
+ ],
+ "typeRoots": ["srs/alertifyjs.s.ts", "node_modules/@types"]
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,