Pokemon stats

package.json

@@ -41,6 +41,7 @@
     "react-scripts": "5.0.0",
     "react-shimmer-effect": "^1.0.9",
     "react-simple-maps": "^2.3.0",
+    "react-toastify": "^9.0.8",
     "react-twitter-widgets": "^1.11.0",
     "redux": "^4.2.0",
     "redux-persist": "^6.0.0",

src/plays/pokemon-stats/PokemonStats.js

@@ -0,0 +1,70 @@
+import PlayHeader from "common/playlists/PlayHeader";
+import { useState } from "react";
+import "./styles.css";
+import axios from "axios";
+import Pokemoncard from "./components/Pokemoncard";
+import Search from "./components/Search";
+import { ToastContainer, toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+// WARNING: Do not change the entry componenet name
+function PokemonStats(props) {
+  // Your Code Start below.
+  const [pokemon, setpokemon] = useState();
+  const [name, setname] = useState("");
+  const fetchPokemonDetails = (e) => {
+    e.preventDefault();
+    axios
+      .get(`https://pokeapi.co/api/v2/pokemon/${name.toLowerCase()}`)
+      .then((response) => {
+        setpokemon(response.data);
+      })
+      .catch((err) => {
+        toast.error("Pokemon you are searching is not found, try another.", {
+          position: "bottom-left",
+          autoClose: 2000,
+          hideProgressBar: false,
+          closeOnClick: true,
+          pauseOnHover: true,
+          draggable: true,
+          progress: undefined,
+        });
+      });
+  };
+  return (
+    <>
+      <div className="play-details">
+        <PlayHeader play={props} />
+        {/* Your Code Starts Here */}
+        <div className="skeleton-pokemon-app">
+          <ToastContainer
+            position="bottom-left"
+            autoClose={2000}
+            hideProgressBar={false}
+            newestOnTop={false}
+            closeOnClick
+            rtl={false}
+            pauseOnFocusLoss
+            draggable
+            pauseOnHover
+          />
+          {pokemon ? (
+            <div className="poke-card-container">
+              <Pokemoncard pokemon={pokemon} />
+            </div>
+          ) : (
+            <div className="poke-search-container">
+              <Search
+                setname={setname}
+                name={name}
+                fetchPokemonDetails={fetchPokemonDetails}
+              />
+            </div>
+          )}
+        </div>
+        {/* Your Code Ends Here */}
+      </div>
+    </>
+  );
+}
+
+export default PokemonStats;

src/plays/pokemon-stats/Readme.md

@@ -0,0 +1,19 @@
+# Pokemon stats
+
+So , its kinda fun type app it will give details of a specific pokemon on search like its hp, moves and etc....
+
+## Play Demographic
+
+- Language: js
+- Level: Intermediate
+
+## Creator Information
+
+- User: yung-coder
+- Gihub Link: https://github.com/yung-coder
+- Blog: 
+- Video: 
+
+## Implementation Details
+
+So, it's a app that gives you details about a paticular pokemon on search it displays the pokemon in a card with its details.

src/plays/pokemon-stats/components/Pokemoncard.jsx

@@ -0,0 +1,41 @@
+import React from "react";
+import "./pokecard.css";
+const Pokemoncard = (props) => {
+  const { pokemon } = props;
+  return (
+    <div className="poke-card-cont">
+      <div className="wrapper">
+        <div className="pokemon-card pokemon">
+          <div className="pokemon-card__image pokemon-card__image--pokemon">
+            <img src={pokemon.sprites.front_default} alt="pokemon" />
+          </div>
+          <div className="poke-name">{pokemon.species.name}</div>
+
+          <div className="pokemon-stats">
+            <div className="one-third">
+              <div className="stat">HP:</div>
+              <div className="stat-value"> {pokemon.stats[0].base_stat} </div>
+            </div>
+
+            <div className="one-third">
+              <div className="stat">ATTACK:</div>
+              <div className="stat-value">{pokemon.stats[1].base_stat}</div>
+            </div>
+
+            <div className="one-third no-border">
+              <div className="stat">DEFENSE:</div>
+              <div className="stat-value">{pokemon.stats[2].base_stat}</div>
+            </div>
+
+            <div className="one-third no-border">
+              <div className="stat">TYPE:</div>
+              <div className="stat-value">{pokemon.types[0].type.name}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Pokemoncard;

src/plays/pokemon-stats/components/Search.jsx

@@ -0,0 +1,31 @@
+import React from "react";
+import "./search.css";
+const search = (props) => {
+  const { setname, fetchPokemonDetails, name } = props;
+  return (
+    <div className="poke-main-cont">
+      <div className="poke-input-cont field">
+        <form onSubmit={fetchPokemonDetails} className="poke-form">
+          <input
+            type="input"
+            value={name}
+            className="poke-input-field"
+            placeholder=" "
+            name="name"
+            id="name"
+            required
+            onChange={(e) => setname(e.target.value)}
+          />
+          <label htmlFor="name" className="poke-form-label">
+            Pokemon name
+          </label>
+          <button className="poke-stats-sumbit-btn" type="sumbit">
+            Search
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default search;

src/plays/pokemon-stats/components/pokecard.css

@@ -0,0 +1,88 @@
+.poke-card-cont {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-position: center;
+  background-size: cover;
+  height: 100%;
+  width: 100%;
+  font-family: sans-serif;
+}
+.pokemon-card {
+  width: 300px;
+  display: inline-block;
+  margin: auto;
+  border-radius: 19px;
+  position: relative;
+  text-align: center;
+  box-shadow: rgb(0, 0, 0) 0px 20px 30px -10px;
+  z-index: 9999;
+  backdrop-filter: blur(20px);
+}
+.pokemon-card:hover{
+  transform: scale(1.01);
+}
+
+.pokemon-card__image {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 150px;
+  border-top-left-radius: 14px;
+  border-top-right-radius: 14px;
+}
+.poke-name{
+  font-weight: 900;
+  font-size: 25px;
+  font-style: italic;
+  color: white;
+}
+.pokemon-card__image--pokemon img {
+  width: 150px;
+  position: absolute;
+}
+
+.pokemon-card__level {
+  text-transform: uppercase;
+  font-size: 12px;
+  font-weight: 700;
+  margin-bottom: 3px;
+}
+
+.pokemon-card__level--pokemon {
+  color: #ec9b3b;
+}
+
+.pokemon-stats {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 5px 5px;
+  flex-direction: column;
+}
+
+
+.one-third{
+  display: flex;
+  color: white;
+  font-family: serif;
+  font-style: oblique;
+  padding: 5px 5px;
+}
+
+
+
+.stat-value{
+  margin-left: 6px;
+}
+
+@media (max-width: 764px){
+   .pokemon-stats{
+     padding: 3px 3px;
+   }
+
+   .one-third{
+    padding: 2px 2px;
+   }
+}

src/plays/pokemon-stats/components/search.css

@@ -0,0 +1,118 @@
+.poke-main-cont {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.poke-input-cont {
+  position: relative;
+  padding: 15px 0 0;
+  margin-top: 10px;
+  width: 30%;
+}
+
+.poke-input-field {
+  font-family: inherit;
+  width: 100%;
+  border: 0;
+  border-bottom: 2px solid #9b9b9b;
+  outline: 0;
+  font-size: 1.3rem;
+  color: #fff;
+  padding: 7px 0;
+  background: transparent;
+  transition: border-color 0.2s;
+}
+.poke-input-field::placeholder {
+  color: transparent;
+}
+.poke-input-field:placeholder-shown ~ .poke-form-label {
+  cursor: text;
+  top: 20px;
+}
+
+.poke-form-label {
+  position: absolute;
+  top: 0;
+  display: block;
+  transition: 0.2s;
+  font-size: 1rem;
+  color: #9b9b9b;
+}
+
+.poke-input-field:focus {
+  padding-bottom: 6px;
+  font-weight: 700;
+  border-width: 3px;
+  border-image: linear-gradient(to right, #11998e, #38ef7d);
+  border-image-slice: 1;
+}
+.poke-input-field:focus ~ .poke-form-label {
+  position: absolute;
+  top: 0;
+  display: block;
+  transition: 0.2s;
+  font-size: 1rem;
+  color: #11998e;
+  font-weight: 700;
+}
+
+.poke-input-field:required,
+.poke-input-field:invalid {
+  box-shadow: none;
+}
+
+.poke-stats-sumbit-btn {
+  align-items: center;
+  margin-top: 35px;
+  appearance: none;
+  background-color: #fcfcfd;
+  border-radius: 4px;
+  border-width: 0;
+  box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,
+    rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #d6d6e7 0 -3px 0 inset;
+  box-sizing: border-box;
+  color: #36395a;
+  cursor: pointer;
+  display: inline-flex;
+  font-family: "JetBrains Mono", monospace;
+  height: 35px;
+  justify-content: center;
+  line-height: 1;
+  overflow: hidden;
+  padding: 0px 16px;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transition: box-shadow 0.15s, transform 0.15s;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
+  white-space: nowrap;
+  will-change: box-shadow, transform;
+  font-size: 18px;
+}
+
+.poke-stats-sumbit-btn:focus {
+  box-shadow: #d6d6e7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px,
+    rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #d6d6e7 0 -3px 0 inset;
+}
+
+.poke-stats-sumbit-btn:hover {
+  box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px,
+    rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #d6d6e7 0 -3px 0 inset;
+  transform: translateY(-2px);
+}
+
+.poke-stats-sumbit-btn:active {
+  box-shadow: #d6d6e7 0 3px 7px inset;
+  transform: translateY(2px);
+}
+
+@media (max-width: 764px) {
+  .poke-input-cont {
+    width: 50%;
+  }
+}

src/plays/pokemon-stats/styles.css

@@ -0,0 +1,14 @@
+/* enter stlyes here */
+.poke-card-container{    
+    width: 100%;
+    height: 100%;
+}
+.poke-search-container{
+    width: 100%;
+    height: 100%;
+}
+.skeleton-pokemon-app{
+    background: url('./images/background.jpg');
+    background-size: cover;
+    height: 100%;
+}