s473561/horoscope_app
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

routing, numerology page, handling wrong input

Browse Source
This commit is contained in:
s473561 2023-06-11 12:05:06 +02:00
parent 7f5b057e8e
commit 95bad57562
27 changed files with 364 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/app-routing.module.ts
View File

@ -1,14 +1,15 @@
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router'; import { RouterModule, Routes } from '@angular/router';
import { HoroscopeDataContainerComponent } from './horoscope-data-container/horoscope-data-container.component'; 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 = [ const routes: Routes = [
{ {
path: 'horoscope', path: 'horoscope',
component: HoroscopeDataContainerComponent component: HoroscopeDataContainerComponent
}, },
{ path: 'login', component: MockLoginComponent }, { path: 'numerology', component: NumerologyComponent },
{ path: '', redirectTo: '/horoscope', pathMatch: 'full' }, { path: '', redirectTo: '/horoscope', pathMatch: 'full' },
]; ];

1
src/app/app.component.html
View File

@ -4,4 +4,5 @@
<!-- <app-horoscope></app-horoscope> --> <!-- <app-horoscope></app-horoscope> -->
<!-- <app-horoscope-data-container></app-horoscope-data-container> <!-- <app-horoscope-data-container></app-horoscope-data-container>
--> -->
<app-nav-bar></app-nav-bar>
<router-outlet></router-outlet> <router-outlet></router-outlet>

2
src/app/app.component.ts
View File

@ -7,5 +7,5 @@ import { Component } from '@angular/core';
styleUrls: ['./app.component.css'] styleUrls: ['./app.component.css']
}) })
export class AppComponent { export class AppComponent {
// title = 'my_app'; title = 'my_app';
} }

8
src/app/app.module.ts
View File

@ -6,15 +6,19 @@ import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http'; import { HttpClientModule } from '@angular/common/http';
import { HoroscopeComponent } from './horoscope/horoscope.component'; import { HoroscopeComponent } from './horoscope/horoscope.component';
import { FormsModule } from '@angular/forms'; 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 { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { HoroscopeDataContainerComponent } from './horoscope-data-container/horoscope-data-container.component'; 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({ @NgModule({
declarations: [ declarations: [
AppComponent, AppComponent,
HoroscopeComponent, HoroscopeComponent,
HoroscopeDataContainerComponent HoroscopeDataContainerComponent,
NavBarComponent,
NumerologyComponent
], ],
imports: [ imports: [
BrowserModule, BrowserModule,

3
src/app/horoscope-data-container/horoscope-data-container.component.html
View File

@ -1,3 +1,5 @@
<body>
<div class="search"> <div class="search">
<form #form="ngForm" (submit)="onSubmit()"> <form #form="ngForm" (submit)="onSubmit()">
<input type="text" placeholder="search sunsign" name="sunsign" [(ngModel)]="sunSign"> <input type="text" placeholder="search sunsign" name="sunsign" [(ngModel)]="sunSign">
@ -7,3 +9,4 @@
<app-horoscope [horoscopeData]="horoscopeData1" (newSignEvent) = "changeGender" <app-horoscope [horoscopeData]="horoscopeData1" (newSignEvent) = "changeGender"
> >
</app-horoscope> </app-horoscope>
</body>

7
src/app/horoscope-data-container/horoscope-data-container.component.spec.ts
View File

@ -18,4 +18,11 @@ describe('HoroscopeDataContainerComponent', () => {
it('should create', () => { it('should create', () => {
expect(component).toBeTruthy(); expect(component).toBeTruthy();
}); });
}); });
// describe('changeGender', () => {
// it('should asign to parameter gender woman if the input is woman', () => {
// const result = changeGender()
// })
// });

6
src/app/horoscope-data-container/horoscope-data-container.component.ts
View File

@ -1,6 +1,6 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { HoroscopeData } from '../models/horoscope.model'; 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'; import { faEarth, faFire, faCalendar} from '@fortawesome/free-solid-svg-icons';
@Component({ @Component({
@ -38,7 +38,11 @@ export class HoroscopeDataContainerComponent implements OnInit {
next: (response) => { next: (response) => {
this.horoscopeData1 = response; this.horoscopeData1 = response;
console.log(response); console.log(response);
},
error: (error) => {
console.log(error);
} }
}); });
} }

24
src/app/horoscope/horoscope.component.html
View File

@ -1,4 +1,5 @@
<div class="container" *ngIf="horoscopeData"> <div class="container" *ngIf="horoscopeData">
<div class="if-no-error" *ngIf="!horoscopeData.error; else ifError">
<div class="first-column"> <div class="first-column">
<div class="upper-data"> <div class="upper-data">
<img src="../assets/aquarius.jpg" *ngIf="horoscopeData.name === 'Aquarius'"> <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/scorpio.jpg" *ngIf="horoscopeData.name === 'Scorpio'">
<img src="../assets/taurus.jpg" *ngIf="horoscopeData.name === 'Tautus'"> <img src="../assets/taurus.jpg" *ngIf="horoscopeData.name === 'Tautus'">
<img src="../assets/virgo.jpg" *ngIf="horoscopeData.name === 'Virgo'"> <img src="../assets/virgo.jpg" *ngIf="horoscopeData.name === 'Virgo'">
<div class="horoscope-data">
<div class="sign">{{ horoscopeData.name }}</div>
</div>
</div> </div>
<div class="lower-data"> <div class="lower-data">
<div class="more-info-label"> <div class="more-info-label">
Information {{ horoscopeData.name }}
</div> </div>
<div class="more-info-container"> <div class="more-info-container">
<div class="info-block"> <div class="info-block">
<div class="info-block-label"> <div class="info-block-label">
<fa-icon style="color: white" [icon]="faGlobe"></fa-icon> <fa-icon style="color: white" [icon]="faGlobe"></fa-icon>
<span>ruling<br>planet</span> <span>ruling</span>
<span>planet</span>
</div> </div>
<div class="info-block-value"> <div class="info-block-value">
{{ horoscopeData.ruling_planet }} {{ horoscopeData.ruling_planet }}
@ -37,6 +35,7 @@
<div class="info-block-label"> <div class="info-block-label">
<fa-icon style="color: white" [icon]="faFire"></fa-icon> <fa-icon style="color: white" [icon]="faFire"></fa-icon>
<span>element</span> <span>element</span>
<span></span>
</div> </div>
<div class="info-block-value"> <div class="info-block-value">
{{ horoscopeData.element }} {{ horoscopeData.element }}
@ -45,7 +44,8 @@
<div class="info-block-date"> <div class="info-block-date">
<div class="info-block-label-date"> <div class="info-block-label-date">
<fa-icon style="color: white" [icon]="faCalendar"></fa-icon> <fa-icon style="color: white" [icon]="faCalendar"></fa-icon>
<span>date range</span> <span>date</span>
<span>range</span>
</div> </div>
<div class="info-block-value-date"> <div class="info-block-value-date">
{{ horoscopeData.date_range }} {{ horoscopeData.date_range }}
@ -64,7 +64,7 @@
</div> </div>
<div class="details-label"> <div class="details-label">
<p> <p>
Get to know yourself {{ gender }} Get to know yourselfs
</p> </p>
</div> </div>
<div class="details-block" *ngIf="gender === 'woman'"> <div class="details-block" *ngIf="gender === 'woman'">
@ -75,3 +75,11 @@
</div> </div>
</div> </div>
</div> </div>
<ng-template #ifError>
<div class="error-container">
<p>
{{ horoscopeData.error }}
</p>
</div>
</ng-template>
</div>

2
src/app/horoscope/horoscope.component.ts
View File

@ -1,5 +1,5 @@
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; 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 { HoroscopeData } from '../models/horoscope.model';
import { faEarth, faFire, faCalendar} from '@fortawesome/free-solid-svg-icons'; import { faEarth, faFire, faCalendar} from '@fortawesome/free-solid-svg-icons';

0
src/app/mock-login/mock-login.component.css
View File

1
src/app/mock-login/mock-login.component.html
View File

@ -1 +0,0 @@
<p>mock-login works!</p>

10
src/app/mock-login/mock-login.component.ts
View File

@ -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 {
}

1
src/app/models/horoscope.model.ts
View File

@ -15,5 +15,6 @@ export interface HoroscopeData {
symbol: string symbol: string
weaknesses: string weaknesses: string
woman: string woman: string
error: string
} }

4
src/app/models/numerology.model.ts Normal file
View File

@ -0,0 +1,4 @@
export interface NumerologyData{
desc: string
number: string
}

29
src/app/nav-bar/nav-bar.component.css Normal file
View File

@ -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;
}

18
src/app/nav-bar/nav-bar.component.html Normal file
View File

@ -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>

12
src/app/mock-login/mock-login.component.spec.ts → src/app/nav-bar/nav-bar.component.spec.ts
View File

@ -1,16 +1,16 @@
import { ComponentFixture, TestBed } from '@angular/core/testing'; import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MockLoginComponent } from './mock-login.component'; import { NavBarComponent } from './nav-bar.component';
describe('MockLoginComponent', () => { describe('NavBarComponent', () => {
let component: MockLoginComponent; let component: NavBarComponent;
let fixture: ComponentFixture<MockLoginComponent>; let fixture: ComponentFixture<NavBarComponent>;
beforeEach(() => { beforeEach(() => {
TestBed.configureTestingModule({ TestBed.configureTestingModule({
declarations: [MockLoginComponent] declarations: [NavBarComponent]
}); });
fixture = TestBed.createComponent(MockLoginComponent); fixture = TestBed.createComponent(NavBarComponent);
component = fixture.componentInstance; component = fixture.componentInstance;
fixture.detectChanges(); fixture.detectChanges();
}); });

10
src/app/nav-bar/nav-bar.component.ts Normal file
View File

@ -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 {
}

72
src/app/numerology/numerology.component.css Normal file
View File

@ -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
}

26
src/app/numerology/numerology.component.html Normal file
View File

@ -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>

21
src/app/numerology/numerology.component.spec.ts Normal file
View File

@ -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();
});
});

39
src/app/numerology/numerology.component.ts Normal file
View File

@ -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);
}
});
}
}

0
src/app/open-horoscope.service.spec.ts → src/app/open-horoscope/open-horoscope.service.spec.ts
View File

2
src/app/open-horoscope.service.ts → src/app/open-horoscope/open-horoscope.service.ts
View File

@ -1,7 +1,7 @@
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http'; import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { Observable } from 'rxjs'; import { Observable } from 'rxjs';
import { HoroscopeData } from './models/horoscope.model'; import { HoroscopeData } from '../models/horoscope.model';
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root'

16
src/app/open-numerology/open-numerology.service.spec.ts Normal file
View File

@ -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();
});
});

26
src/app/open-numerology/open-numerology.service.ts Normal file
View File

@ -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});
}
}

74
src/styles.css
View File

@ -2,6 +2,8 @@
:root{ :root{
--green-1: #728c5d; --green-1: #728c5d;
--green-2: #364d23; --green-2: #364d23;
--dark-red: #3f0302;
--light-orange: #fedaa9;
--white: #FFF; --white: #FFF;
--grey: #EDEDED; --grey: #EDEDED;
--shadow-dark: rgba(0,0,0,0.3); --shadow-dark: rgba(0,0,0,0.3);
@ -16,22 +18,51 @@ body {
font-family: Verdana, Geneva, Tahoma, sans-serif; font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 16px; font-size: 16px;
width: 100%; width: 100%;
height: 100vh; height: 100%;
background-color: var(--green-1); background-color: var(--green-1);
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: 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 { .container {
width: 800px; width: 800px;
height: 80vh; height: 78vh;
background-color: var(--green-2); background-color: var(--green-2);
border-radius: 20px; border-radius: 20px;
box-shadow: 10px 10px 10px var(--shadow-dark); box-shadow: 10px 10px 10px var(--shadow-dark);
/* display: flex;
flex-direction: row; */
margin: 1em;
margin-top: 0.5em;
}
.if-no-error{
display: flex; display: flex;
flex-direction: row; 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 { .upper-data {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
@ -47,7 +78,7 @@ body {
height: 50%; height: 50%;
border-bottom-left-radius: 20px; border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px; border-bottom-right-radius: 20px;
padding: 1em; padding: 0 1em 1em 1em ;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@ -77,7 +108,7 @@ body {
font-weight: 700; font-weight: 700;
} }
.search { .search {
margin-bottom: 1em; margin-top: 0.5em;
text-align: center; text-align: center;
} }
.search input { .search input {
@ -95,6 +126,9 @@ body {
} }
.more-info-label{ .more-info-label{
color: var(--white); color: var(--white);
text-align: center;
font-size: 1.5em;
font-weight: 600;
} }
.more-info-container{ .more-info-container{
flex: 1; flex: 1;
@ -126,15 +160,15 @@ body {
} }
.info-block-label span { .info-block-label span {
color: var(--white); color: var(--white);
font-size: 0.8em; font-size: 0.7em;
} }
.info-block-value { .info-block-value {
width: 50%; width: 50%;
display: flex; display: flex;
padding-left: 10%;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
color: var(--white); color: var(--white);
font-size: 0.8em;
} }
.info-block-label-date { .info-block-label-date {
width: 25%; width: 25%;
@ -143,26 +177,17 @@ body {
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
color: var(--white); color: var(--white);
font-size: 0.8em; font-size: 0.7em;
} }
.info-block-value-date { .info-block-value-date {
width: 75%; width: 75%;
padding-left: 5%;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
color: var(--white); 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 { .details-block {
padding: 1em; padding: 1em;
background-color: var(--shadow-light); background-color: var(--shadow-light);
@ -170,6 +195,7 @@ body {
border-radius: 20px; border-radius: 20px;
margin-top: 1em; margin-top: 1em;
margin-right: 1em; margin-right: 1em;
font-size: 0.9em;;
} }
.details-label { .details-label {
margin-top: 1em; margin-top: 1em;
@ -186,15 +212,15 @@ body {
align-items: center; align-items: center;
} }
.button { .button {
border-radius: 20px; border-radius: 15px;
padding: 0.8em; padding-top: 0.6em;
padding-bottom: 0.6em;
padding-left: 1.5em;
padding-right: 1.5em;
background-color: var(--green-1); background-color: var(--green-1);
color: black; color: black;
border: none; border: none;
color: white; color: white;
margin-right: 10%; margin-right: 10%;
} text-align: center;
.button #woman{
background-color: pink;
} }