catalogue

pokemon-app/src/app/app.component.html

@@ -1 +1,2 @@
+<app-navbar></app-navbar>
 <router-outlet></router-outlet>

pokemon-app/src/app/app.module.ts

@@ -13,6 +13,7 @@ import { FormsModule } from '@angular/forms';
 
 import { CataloguePokeElemComponent } from './components/catalogue-poke-elem/catalogue-poke-elem.component';
 import { PokemoncardComponent } from './components/pokemoncard/pokemoncard.component';
+import { NavbarComponent } from './components/navbar/navbar.component';
 
 
 @NgModule({
@@ -24,6 +25,7 @@ import { PokemoncardComponent } from './components/pokemoncard/pokemoncard.compo
     LoginFormComponent,
     CataloguePokeElemComponent,
     PokemoncardComponent,
+    NavbarComponent,
 
   ],
   imports: [

pokemon-app/src/app/components/navbar/navbar.component.css

@@ -0,0 +1,36 @@
+.navbar {
+    padding: 50px 0px 0px 0px;
+
+    width: 100%;
+    position: absolute;
+    top: 0;
+    z-index: 10;
+    text-align: end;
+
+}
+
+.nav-content {
+    margin-right: 200px;
+}
+
+.nav-content a {
+    text-decoration: none;
+    color: var(--blue);
+    font-family: 'Mansrope', sans-serif;
+    display: block;
+    margin-right: 50px;
+    font-size: 18px;
+    font-weight: 600;
+    cursor: pointer;
+}
+
+.navlinks a:hover {
+    color: var(--lightblue);
+}
+
+.navlinks {
+    display: flex;
+    justify-content: flex-end;
+      list-style-type: none;
+
+}

pokemon-app/src/app/components/navbar/navbar.component.html

@@ -0,0 +1,10 @@
+<div class="navbar">
+  <div class="nav-content">
+    <nav>
+  <ul class="navlinks">
+    <li><a routerLink="trainer">POKEDEX</a></li>
+    <li><a routerLink="pokemon">CATALOGUE</a></li>
+  </ul>
+</nav>
+  </div>
+</div>

pokemon-app/src/app/components/navbar/navbar.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NavbarComponent } from './navbar.component';
+
+describe('NavbarComponent', () => {
+  let component: NavbarComponent;
+  let fixture: ComponentFixture<NavbarComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ NavbarComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(NavbarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

pokemon-app/src/app/components/navbar/navbar.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-navbar',
+  templateUrl: './navbar.component.html',
+  styleUrls: ['./navbar.component.css']
+})
+export class NavbarComponent {
+
+}

pokemon-app/src/app/pages/pokemon-catalogue/pokemon-catalogue.page.css

@@ -49,55 +49,68 @@ p {
 }
 
 .catch-button:hover {
-    background-color: var(--yellow);
+  background-color: var(--yellow);
 }
 
 .catalogue-nav-data {
   height: calc(100vh - 200px);
 }
 
 .catch-button-cnt {
-    display: flex;
-    justify-content: center;
+  display: flex;
+  justify-content: center;
   position: absolute;
   bottom: 0;
   margin-left: 40px;
   margin-bottom: 55px;
 }
 
-
-
 /** CATALOGUE CONTENT **/
 
 .catalogue-content {
   display: flex;
-  justify-content: center;
+  flex-direction: column;
   width: 100%;
 }
 
 .pokemons-cnt {
   display: flex;
+
   flex-wrap: wrap;
   padding: 50px;
   content-visibility: auto;
   contain-intrinsic-size: 1000px;
 }
 
+.head-cnt {
+  padding: 200px 150px 0px 80px;
+}
+
+.head-cnt input {
+  border-style: none;
+
+  color: var(--blue);
+  font-size: 23px;
+  padding: 10px 50px;
+  border-bottom: 5px solid var(--blue);
+}
+
 /** POKEMON CARD **/
 
 .pokemoncard {
-    border-radius: 10px;
+  border-radius: 10px;
   width: 290px;
   height: 380px;
   background-color: var(--yellow);
   border: 8px solid orange;
   box-shadow: rgba(99, 99, 99, 0.5) 0px 2px 8px 0px;
   transition: 0.2s;
   position: relative;
-
 }
 
-
+.pokemoncard:hover {
+  margin-top: -5px;
+}
 
 .img-bg {
   height: 150px;
@@ -132,27 +145,23 @@ p {
 
 /** CATCH **/
 
-
-
 .remove-catched-btn {
-    background-color: transparent;
-    border-style: none;
-    font-size: 25px;
-    font-weight: 800;
-    color: var(--blue);
-    cursor: pointer;
-
-
+  background-color: transparent;
+  border-style: none;
+  font-size: 25px;
+  font-weight: 800;
+  color: var(--blue);
+  cursor: pointer;
 }
 
 .remove-catched-btn:hover {
-    color: white;
+  color: white;
 }
 
 .remove-catch-cnt {
-    width: 100%;
-    text-align: end;
-    padding-right: 30px;
+  width: 100%;
+  text-align: end;
+  padding-right: 30px;
 }
 
 .catch-pokemon {
@@ -205,7 +214,6 @@ p {
   background-color: var(--blue);
   height: 30px;
   padding: 2px 10px;
-
 }
 .catch-data p {
   font-size: 25px;
@@ -217,29 +225,15 @@ p {
 }
 
 .catch-button img {
-    width: 30px;
-    margin-right: 10px;
-}
-
-
-.filled {
-   width: 100%;
-    width: 100%;
-  background-color: rgb(184, 184, 184);
-  opacity: 0.5;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  left: 0;
+  width: 30px;
+  margin-right: 10px;
 }
 
 .catched-pokemons-holder {
-    overflow-y: scroll;
-    height: 67vh;
+  overflow-y: scroll;
+  height: 67vh;
 }
 
-
 .flip-card {
   border-radius: 20px;
   background-color: transparent;

pokemon-app/src/app/pages/pokemon-catalogue/pokemon-catalogue.page.html

@@ -41,34 +41,42 @@ <h1>Catalogue</h1>
       </div>
     </div>
   </div>
+
   <div class="catalogue-content">
-    <div class="pokemons-cnt">
-      <div *ngFor="let pokemon of filteredPokemonList">
-        <div
-          class="flip-card" [ngClass]="{ flipped: flippedCardIds.includes(pokemon.id) }"
-        >
-          <div class="flip-card-inner">
-            <div
-              class="flip-card-front pokemoncard"
-              (click)="onCardClick(pokemon.id)"
-              (click)="updateItem(pokemon)"
-
-            >
-              <div [ngClass]="filledClasses[pokemon.id]"></div>
-              <div class="img-bg">
-                <img
-                  src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/{{ pokemon.id }}.png"
-                  alt=""
-                />
-              </div>
-              <div class="pokemoncard-data">
-                <div class="header_pokemon">
-                  <p class="pokemonname">{{pokemon.pokemon.name}}</p>
+    <div class="head-cnt">
+        <input type="text" [(ngModel)]="searchQuery" placeholder="Search..." />
+      </div>
+    <div class="pokemons-holder">
+
+
+      <div class="pokemons-cnt">
+        <div *ngFor="let pokemon of filteredPokemonList">
+          <div
+            class="flip-card"
+            [ngClass]="{ flipped: flippedCardIds.includes(pokemon.id) }"
+          >
+            <div class="flip-card-inner">
+              <div
+                class="flip-card-front pokemoncard"
+                (click)="onCardClick(pokemon.id)"
+                (click)="updateItem(pokemon)"
+              >
+                <div [ngClass]="filledClasses[pokemon.id]"></div>
+                <div class="img-bg">
+                  <img
+                    src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/{{ pokemon.id }}.png"
+                    alt=""
+                  />
+                </div>
+                <div class="pokemoncard-data">
+                  <div class="header_pokemon">
+                    <p class="pokemonname">{{pokemon.pokemon.name}}</p>
+                  </div>
                 </div>
               </div>
-            </div>
-            <div class="flip-card-back" (click)="onCardClick(pokemon.id)">
-              <img src="../../../assets/cardback.png" alt="card" />
+              <div class="flip-card-back" (click)="onCardClick(pokemon.id)">
+                <img src="../../../assets/cardback.png" alt="card" />
+              </div>
             </div>
           </div>
         </div>

pokemon-app/src/app/pages/pokemon-catalogue/pokemon-catalogue.page.ts

@@ -44,7 +44,7 @@ export class PokemonCataloguePage implements OnInit {
     const dataObject = JSON.parse(sessionData);
     const id = dataObject.id;
 
-    fetch(`${apiURL}/translations/${id}`, {
+    fetch(`${apiURL}/trainers/${id}`, {
       method: 'PATCH',
       headers: {
         'X-API-Key': this.apiKey,
@@ -64,6 +64,8 @@ export class PokemonCataloguePage implements OnInit {
         console.log(updatedUser);
       })
       .catch((error) => {});
+
+    this.items = [];
   }
 
   updateItem(item: any) {

pokemon-app/src/environments/environment.development.ts

@@ -1,6 +1,6 @@
 export const environment = {
     production: false,
-    apiTrainers: "https://mkb-noroff-api.herokuapp.com/translations",
+    apiTrainers: "https://mkb-noroff-api.herokuapp.com/trainers",
     apiPokemons: "https://pokeapi.co/api/v2/",
     apiKey: "KvgEBVWGhEimxKi3IuvDyg=="
 };