Skip to content
Snippets Groups Projects
Commit 67633890 authored by vera's avatar vera
Browse files

Add a Homepage button

parent 7359e206
No related branches found
No related tags found
No related merge requests found
No preview for this file type
.image {
display: block;
margin: 0 auto;
width: 70%;
}
display: block;
margin: 0 auto;
padding-top: 10px;
width: 50%;
}
.dog_code {
font-style: italic;
position: relative;
top: -25px;
}
.return_button {
position: absolute;
top: 25px;
left: 15px;
border-radius: 5px;
height: 35px;
width: 100px;
color: #fff;
background-color: #007bff;
border-color: #007bff;
}
.return_button:hover {
color: #fff;
background-color: #0069d9;
border-color: #0062cc;
}
.return_button:focus, .return_button.focus {
color: #fff;
background-color: #0069d9;
border-color: #0062cc;
box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}
.return_button.disabled, .return_button:disabled {
color: #fff;
background-color: #007bff;
border-color: #007bff;
}
.return_button:not(:disabled):not(.disabled):active, .return_button:not(:disabled):not(.disabled).active,
.show > .return_button.dropdown-toggle {
color: #fff;
background-color: #0062cc;
border-color: #005cbf;
}
.return_button:not(:disabled):not(.disabled):active:focus, .return_button:not(:disabled):not(.disabled).active:focus,
.show > .return_button.dropdown-toggle:focus {
box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}
.header {
text-align: center;
background-color: #d372bdb0;
background-size: contain;
height: 80px;
}
.separator {
border: none;
border-top: solid #d372bdb0;
/* margin: 20px 0; */
}
.title {
font-size: 20px;
font-weight: bold;
......@@ -31,4 +79,4 @@
border-radius: 25px;
color: black;
font-size: 18px;
}
\ No newline at end of file
}
\ No newline at end of file
<div *ngIf="dog">
<header class="header">
<h1>Detailed Information</h1>
<p>Dog: {{dog.status_code}}</p>
<div><button class="return_button" (click)="return_homepage()">Homepage</button><h1>Detailed Information</h1></div>
<h2 class="dog_code">Dog: {{dog.status_code}}</h2>
</header>
<img class="image" [src]="dog.image['jpg']" [alt]="dog.status_code" title={{dog.title}} (mouseover)="dog.showDescription = true" (mouseout)="dog.showDescription = false">
<img class="image" [src]="dog.image['jpg']" title={{dog.title}} (mouseover)="dog.showDescription = true" (mouseout)="dog.showDescription = false">
<div *ngIf="dog.showDescription" class="description">
<p class="title">Text description:</p>
<hr class="separator">
<p>{{ dog.description }}</p>
<p>{{dog.description}}</p>
</div>
</div>
// import { Component } from '@angular/core';
// @Component({
// selector: 'app-dog-detail',
// templateUrl: './dog-detail.component.html',
// styleUrls: ['./dog-detail.component.css']
// })
// export class DogDetailComponent {
// }
import { Component, Input, OnInit } from '@angular/core';
import { Dog } from '../dog.model';
import { DogService } from '../dog.service';
import { ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common'
@Component({
selector: 'app-dog-detail',
......@@ -24,14 +14,26 @@ export class DogDetailComponent implements OnInit {
dog?: Dog;
constructor(
// To fetch the incoming data
private route: ActivatedRoute,
private dogService: DogService
// To get the information for each single dog
private dogService: DogService,
// To navigate back to the Homepage
private location: Location
) {}
// Write the function for the Return-To-Homepage button
return_homepage(): void {
this.location.back()
}
ngOnInit(): void {
// Get the dog's code by the incoming data
this.route.params.subscribe((data) => {
const dogId = data['status_code'];
console.log(dogId)
// Extend the new (key-value) pairs for Dog object
this.dogService.getSingleDog(dogId).subscribe(data => {
switch (data['status_code']) {
case 203 : { data['description'] = "The lion, scientifically known as Panthera leo, stands as one of the most majestic and iconic creatures in the animal kingdom. Renowned for its regal appearance and powerful presence, the lion holds a special place in human culture, symbolizing strength, courage, and leadership."; break;}
......
.header {
.header {
text-align: center;
background-color: #d372bdb0;
background-size: contain;
height: 80px;
}
.dog-grid {
.dog-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
......
<header class="header">
<h1>🐶 Welcome to Dogs' Home 🐶 </h1>
<h1 style="padding-top: 15px">🐶 Welcome to Dogs' Home 🐶</h1>
</header>
<div class="dog-grid">
<div *ngFor="let dog of dogs" class="dog-card">
<a [routerLink]="['/details', dog.status_code]" routerLinkActive="active">
<img [src]="dog.image['jpg']" title="{{dog.url}}">
<p>{{ dog.status_code }}</p>
</a>
</div>
<div class="dog-grid">
<div *ngFor="let dog of dogs" class="dog-card">
<a [routerLink]="['/details', dog.status_code]" routerLinkActive="active">
<img [src]="dog.image['jpg']" title="{{dog.url}}">
<p>{{dog.status_code}}</p>
</a>
</div>
</div>
\ No newline at end of file
import { Component, OnInit } from '@angular/core';
import { Component } from '@angular/core';
import { DogService } from '../dog.service';
import { Dog } from '../dog.model';
import { Router } from '@angular/router';
@Component({
selector: 'app-dog-home',
......@@ -9,16 +8,17 @@ import { Router } from '@angular/router';
styleUrls: ['./dog-home.component.css']
})
export class DogHomeComponent {
// Define a Dog-Array
dogs: Dog[] = [];
constructor(
private dogService: DogService,
private router: Router) {}
private dogService: DogService) {}
ngOnInit(): void {
// Fetch the data from the defined service DogService
this.dogService.getDogData().subscribe((data: any) => {
console.log(data)
// this.dogs = data.message;
// Save every single Dog data in the defined Dog-Array
for(let i=0; i<=15; i++){
this.dogs.push(data[i])
}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment