From a55981426085b1ffb5eec377ad31584bfc90144d Mon Sep 17 00:00:00 2001 From: shafiqns <115532625+shafiqns@users.noreply.github.com> Date: Thu, 26 Jan 2023 22:31:47 +0800 Subject: [PATCH 1/7] Update PokeDex.js --- src/PokeDex.js | 115 ++++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 99 insertions(+), 16 deletions(-) diff --git a/src/PokeDex.js b/src/PokeDex.js index c7b071b04..af16de35e 100644 --- a/src/PokeDex.js +++ b/src/PokeDex.js @@ -1,13 +1,59 @@ -import "./App.css"; -import { useState, useEffect } from "react"; -import ReactLoading from "react-loading"; -import axios from "axios"; -import Modal from "react-modal"; +import './App.css'; +import { useState, useEffect } from 'react'; +import ReactLoading from 'react-loading'; +import axios from 'axios'; +import Modal from 'react-modal'; + +import DetailCard from './components/DetailCard'; +import ThumbnailCard from './components/ThumbnailCard'; +import { MdNavigateNext, MdNavigateBefore } from 'react-icons/md'; function PokeDex() { - const [pokemons, setPokemons] = useState([]); - const [pokemonDetail, setPokemonDetail] = useState(null); - const [isLoading, setIsLoading] = useState(false); + const [pokemons, setPokemons] = useState([]); + const [currentPokemonList, setCurrentPokemonList] = useState([]); + const [pokemonDetail, setPokemonDetail] = useState(null); + const [isLoading, setIsLoading] = useState(true); + const [nextLink, setNextLink] = useState(''); + const [prevLink, setPrevLink] = useState(''); + const [search, setSearch] = useState(''); + const [notfound, setNotfound] = useState(false); + const [pokemonApi, setPokemonApi] = useState('https://pokeapi.co/api/v2/pokemon'); + + useEffect(() => { + axios.get(pokemonApi).then((response) => { + console.log(response); + setPokemons(response.data.results); + setCurrentPokemonList(response.data.results); + setNextLink(response.data.next); + setPrevLink(response.data.previous); + }); + setIsLoading(false); + }, [pokemonApi]); + + useEffect(() => { + if (search === '') { + setPokemons(currentPokemonList); + setNotfound(false); + } else { + const searchedPokemon = currentPokemonList.filter((value) => { + return value.name.toLowerCase().includes(search.toLowerCase()); + }); + if (searchedPokemon.length > 0) { + setNotfound(false); + setPokemons(searchedPokemon); + } else { + setNotfound(true); + } + } + }, [search, currentPokemonList]); + + const handleChange = (e) => setSearch(e.target.value); + + + + const onClickNext = () => setPokemonApi(nextLink); + + const onClickPrev = () => setPokemonApi(prevLink); const customStyles = { content: { @@ -31,10 +77,13 @@ function PokeDex() {

Requirement:

@@ -56,15 +108,43 @@ function PokeDex() { <>
- Implement loader here +
) : ( <> -

Welcome to pokedex !

- Implement Pokedex list here - +

Welcome to pokedex !

+
+ + + +
+ {notfound &&

Couldn't find the searched pokemon!

} + {pokemons && ( +
+ {pokemons.map((pokemon, index) => ( + + ))} +
+ )} + )} {pokemonDetail && ( @@ -85,7 +165,10 @@ function PokeDex() { required in tabular format
  • Create a bar chart based on the stats above
    • -
  • Create a buttton to download the information generated in this modal as pdf. (images and chart must be included)
    • +
  • + Create a buttton to download the information generated in this + modal as pdf. (images and chart must be included) +
    • From 46c7923eaa624f3263f660af6ac430952ea8e07a Mon Sep 17 00:00:00 2001 From: shafiqns <115532625+shafiqns@users.noreply.github.com> Date: Thu, 26 Jan 2023 22:32:43 +0800 Subject: [PATCH 2/7] Update Home.js --- src/Home.js | 36 ++++++++++++++++++++++++++---------- 1 file changed, 26 insertions(+), 10 deletions(-) diff --git a/src/Home.js b/src/Home.js index afa7452a0..f7305dd2f 100644 --- a/src/Home.js +++ b/src/Home.js @@ -1,4 +1,4 @@ -import "./App.css"; +import "../../App.css"; import { useState, useEffect } from "react"; import { NavLink } from "react-router-dom"; @@ -6,24 +6,40 @@ function Home() { const [text, setText] = useState(""); const [isReady, setIsReady] = useState(false); + const InputHandler = (event) => { + setText(event.target.value); + if (event.target.value === "Ready!") { + setIsReady(true); + } + if (event.target.value !== "Ready!"){ + setIsReady(false) + } + }; + return (
    - + + + Requirement: Try to show the hidden image and make it clickable that goes to /pokedex when the input below is "Ready!" remember to hide the red text away when "Ready!" is in the textbox.

    Are you ready to be a pokemon master?

    - - I am not ready yet! + + {isReady ? ( + "" + ) : ( + I am not ready yet! + )}
    ); From 846e1ca60f672950a91e416323a643331a57112c Mon Sep 17 00:00:00 2001 From: shafiqns <115532625+shafiqns@users.noreply.github.com> Date: Thu, 26 Jan 2023 22:37:13 +0800 Subject: [PATCH 3/7] Add files via upload --- src/components/ThumbnailCard.css | 64 ++++++++++++++++++++++++++++++++ src/components/ThumbnailCard.jsx | 15 ++++++++ 2 files changed, 79 insertions(+) create mode 100644 src/components/ThumbnailCard.css create mode 100644 src/components/ThumbnailCard.jsx diff --git a/src/components/ThumbnailCard.css b/src/components/ThumbnailCard.css new file mode 100644 index 000000000..146f1b0ae --- /dev/null +++ b/src/components/ThumbnailCard.css @@ -0,0 +1,64 @@ +.item-card { + width: 100px; + height: 135px; + margin-bottom: 20px; + text-align: center; + display: grid; + border: 1px white solid; + border-radius: 10px; + color: aliceblue; + cursor: pointer; +} +.item-card:hover { + background-color: yellow; + color: black; +} + +.img-box { + width: 100px; + height: 100px; + display: flex; + align-items: center; + justify-content: center; +} + +.item-img { + width: 80px; + height: 80px; +} +.item-img:hover { + width: 100px; + height: 100px; +} + +.item-name { + font-size: 16px; + padding-bottom: 8px; + font-weight: bold; + text-transform: capitalize; +} + +@media only screen and (min-width: 770px) { + .item-card { + width: 200px; + height: 250px; + } + + .img-box { + width: 200px; + height: 200px; + } + + .item-img { + width: 150px; + height: 150px; + } + .item-img:hover { + width: 200px; + height: 200px; + } + + .item-name { + font-size: 20px; + } + } \ No newline at end of file diff --git a/src/components/ThumbnailCard.jsx b/src/components/ThumbnailCard.jsx new file mode 100644 index 000000000..6da6b7f53 --- /dev/null +++ b/src/components/ThumbnailCard.jsx @@ -0,0 +1,15 @@ +import React from 'react' +import './ThumbnailCard.css' + +const ThumbnailCard = (props) => { + return ( +
    +
    + item thumbnail +
    + {props.name} +
    + ) +} + +export default ThumbnailCard \ No newline at end of file From bf5a5ad2f04e20c7d2a68ddd58e0b10450f81e3f Mon Sep 17 00:00:00 2001 From: shafiqns <115532625+shafiqns@users.noreply.github.com> Date: Thu, 26 Jan 2023 22:42:11 +0800 Subject: [PATCH 4/7] Create DetailCard.css --- src/components/DetailCard.css | 84 +++++++++++++++++++++++++++++++++++ 1 file changed, 84 insertions(+) create mode 100644 src/components/DetailCard.css diff --git a/src/components/DetailCard.css b/src/components/DetailCard.css new file mode 100644 index 000000000..3afe87f24 --- /dev/null +++ b/src/components/DetailCard.css @@ -0,0 +1,84 @@ +.card-container { + width: 80vw; + height: auto; +} + +.pokemon-name { + font-size: xx-large; + font-weight: bold; + line-height: 0%; + text-transform: capitalize; +} + +.top-content { + display: grid; +} + +.pokemon-img { + width: 100%; + max-height: 200px; + object-fit: cover; +} + +table { + width: 100%; + text-align: left; + padding: 5px; + border: 1px aliceblue solid; +} + +td, th { + text-transform: capitalize; +} + +.table-wrapper { + display: flex; + align-items: center; +} + +.barchart-wrapper { + width: 100%; + padding-top: 20px; + margin: 0 auto; +} + +.bar-box { + background-color: #302e2e; + width: 150px; + height: 6px; +} + +.progress-bar { + background-color: yellow; + height: 6px; +} + +button { + padding: 5px; + background-color: yellow; + color: black; + margin-top: 20px; +} + +@media only screen and (min-width: 770px) { + .card-container { + width: 600px; + } + .top-content { + grid-template-columns: 50% 50%; + } + .pokemon-img { + width: 80%; + height: auto; + max-height: none; + object-fit: cover; + } + + .barchart-wrapper { + padding-top: 0; + } + + .bar-box { + width: 200px; + } +} From 96d2ddb4eb1cf918a2e796c7575dd4ca1c80aa3c Mon Sep 17 00:00:00 2001 From: shafiqns <115532625+shafiqns@users.noreply.github.com> Date: Thu, 26 Jan 2023 22:42:41 +0800 Subject: [PATCH 5/7] Create DetailCard.jsx --- src/components/DetailCard.jsx | 62 +++++++++++++++++++++++++++++++++++ 1 file changed, 62 insertions(+) create mode 100644 src/components/DetailCard.jsx diff --git a/src/components/DetailCard.jsx b/src/components/DetailCard.jsx new file mode 100644 index 000000000..9245cc3fd --- /dev/null +++ b/src/components/DetailCard.jsx @@ -0,0 +1,62 @@ +import React, { useRef } from "react"; +import './DetailCard.css'; +import { useReactToPrint } from "react-to-print"; + +const DetailCard = (props) => { + const printRef = useRef(null); // ref to point when print pdf is triggered + const name = props?.detail?.name; + const image = props?.detail?.sprites?.front_default; + const detailStats = props?.detail?.stats; + + const onDownloadPdf = useReactToPrint({ + content: () => printRef.current + }); + + const renderStatsTable = (stats) => ( +
    + + + + + + {stats.map((stat, index) => ( + + + + + ))} +
    NameBase Stats
    {stat.stat.name}{stat.base_stat}
    +
    + ); + + const renderBarChart = (stats) => ( +
    + + {stats.map((stat, index) => ( + + + + + ))} +
    {stat.stat.name} +
    +
    +
    +
    +
    + ); + + return ( +
    + {name} +
    + {name} + {renderStatsTable(detailStats)} +
    + {renderBarChart(detailStats)} + +
    + ); +}; + +export default DetailCard; From 96af31ad5748fddca1986a61276e87050c3eb605 Mon Sep 17 00:00:00 2001 From: shafiqns <115532625+shafiqns@users.noreply.github.com> Date: Thu, 26 Jan 2023 22:49:00 +0800 Subject: [PATCH 6/7] Update Home.js --- src/Home.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Home.js b/src/Home.js index f7305dd2f..8a97f772e 100644 --- a/src/Home.js +++ b/src/Home.js @@ -46,3 +46,4 @@ function Home() { } export default Home; + From bffd93c867625945efde30d67bc6d80dcb25a79f Mon Sep 17 00:00:00 2001 From: shafiqns <115532625+shafiqns@users.noreply.github.com> Date: Thu, 26 Jan 2023 22:49:51 +0800 Subject: [PATCH 7/7] Update PokeDex.js --- src/PokeDex.js | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/src/PokeDex.js b/src/PokeDex.js index af16de35e..4487f992d 100644 --- a/src/PokeDex.js +++ b/src/PokeDex.js @@ -49,7 +49,12 @@ function PokeDex() { const handleChange = (e) => setSearch(e.target.value); - + const onClickPokemon = (url) => { + axios.get(url).then((response) => { + console.log(response.data); + setPokemonDetail(response.data); + }); + }; const onClickNext = () => setPokemonApi(nextLink); @@ -140,7 +145,7 @@ function PokeDex() { {pokemons && (
    {pokemons.map((pokemon, index) => ( - + onClickPokemon(pokemon.url)} name={pokemon.name} /> ))}
    )} @@ -156,7 +161,8 @@ function PokeDex() { }} style={customStyles} > -
    + + {/*
    Requirement:
    • show the sprites front_default as the pokemon image
      • @@ -170,7 +176,7 @@ function PokeDex() { modal as pdf. (images and chart must be included)
    -
    +
    */} )}