From 0f0cec09bc3421e03350bc7a93aa5fa5707df797 Mon Sep 17 00:00:00 2001 From: Sivert Smedsrud Date: Sat, 3 Oct 2026 08:51:51 +0200 Subject: [PATCH 1/3] "MockMon Search Users are now able to search mockmons and with whitespaces or upper and lowercase Authored: Siversm" --- project2/src/App.tsx | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/project2/src/App.tsx b/project2/src/App.tsx index b264960..a5d2efc 100644 --- a/project2/src/App.tsx +++ b/project2/src/App.tsx @@ -1,4 +1,5 @@ -import type { Pokemon, Ability, Type } from '../types/pokemon'; +import type { Pokemon, Ability, Type } from './types/pokemon'; +import { useState } from 'react'; // Mocking a base Abilty. const mockAbility: Ability = { @@ -158,6 +159,14 @@ const mockeMons: Pokemon[] = [ ]; function App() { + + const [searchTerm, setSearchTerm] = useState(''); + const filteredPokemon = mockeMons.filter((pokemon) => /*true betyr behold og false betyr fjern*/ + + pokemon.name.toLocaleLowerCase().includes(searchTerm.trim().toLocaleLowerCase())); + /*trim fjerner whitespace i starten og slutten av stringen PEDER du kan si ifra om du mener dette kan gjøres lettere*/ + + return ( <>
@@ -166,11 +175,13 @@ function App() { type="search" placeholder="Search" aria-label="Search pokemon" + value={searchTerm} + onChange={(e) => setSearchTerm(e.target.value)} >
-
+
    - {mockeMons.map((pokemon) => ( + {filteredPokemon.map((pokemon) => (
  • {pokemon.name} From d433dcab6c4e8ae5c62e41ae62de98011d8f81cc Mon Sep 17 00:00:00 2001 From: Sivert Smedsrud Date: Tue, 6 Oct 2026 11:26:22 +0200 Subject: [PATCH 2/3] "Mockmon Stats Page added Now People can tap the pokemon and see non-styled details about the Mockmon. Authored: Siversm " --- package-lock.json | 6 ++++++ project2/src/App.tsx | 21 ++++++++++++++++++++- 2 files changed, 26 insertions(+), 1 deletion(-) create mode 100644 package-lock.json diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..0d1f440 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "T26-Project-2", + "lockfileVersion": 3, + "requires": true, + "packages": {} +} diff --git a/project2/src/App.tsx b/project2/src/App.tsx index a5d2efc..9fb06f5 100644 --- a/project2/src/App.tsx +++ b/project2/src/App.tsx @@ -161,11 +161,14 @@ const mockeMons: Pokemon[] = [ function App() { const [searchTerm, setSearchTerm] = useState(''); + const [selectedPokemon, setSelectedPokemon] = useState(null); const filteredPokemon = mockeMons.filter((pokemon) => /*true betyr behold og false betyr fjern*/ - pokemon.name.toLocaleLowerCase().includes(searchTerm.trim().toLocaleLowerCase())); /*trim fjerner whitespace i starten og slutten av stringen PEDER du kan si ifra om du mener dette kan gjøres lettere*/ + const handlePokemonClick = (pokemon: Pokemon) => { + setSelectedPokemon(pokemon); + }; return ( <> @@ -180,17 +183,33 @@ function App() { >
    + {selectedPokemon ? ( +
    +

    {selectedPokemon.name}

    +

    #{String(selectedPokemon.id).padStart(4, '0')}

    +

    Attack: {selectedPokemon.attack}

    +

    Defence: {selectedPokemon.defence}

    +

    Special Attack: {selectedPokemon.special_attack}

    +

    Special Defence: {selectedPokemon.special_defence}

    +

    Speed: {selectedPokemon.speed}

    +

    HP: {selectedPokemon.hp}

    + +
    + ) : (
      {filteredPokemon.map((pokemon) => (
    • +
      • ))}
    + )}