styles(proyect): add cards

Author: CrisKroos25

src/components/App.jsx

@@ -5,23 +5,23 @@ export default function App() {
     <main>
       <PokemonCard name="pikachu" />
       <PokemonCard name="raichu" />
+      <PokemonCard name="pichu" />
+      <PokemonCard name="snorlax" />
       <PokemonCard name="charmander" />
       <PokemonCard name="charmeleon" />
       <PokemonCard name="charizard" />
+      <PokemonCard name="jigglypuff" />
       <PokemonCard name="squirtle" />
       <PokemonCard name="wartortle" />
       <PokemonCard name="blastoise" />
+      <PokemonCard name="ditto" />
       <PokemonCard name="bulbasaur" />
       <PokemonCard name="ivysaur" />
       <PokemonCard name="venusaur" />
-      <PokemonCard name="caterpie" />
       <PokemonCard name="weedle" />
       <PokemonCard name="pidgey" />
-      <PokemonCard name="rattata" />
-      <PokemonCard name="jigglypuff" />
       <PokemonCard name="meowth" />
       <PokemonCard name="psyduck" />
-      <PokemonCard name="snorlax" />
       <PokemonCard name="mewtwo" />      
     </main>
   );

src/components/PokemonCard.jsx

@@ -43,7 +43,7 @@ export default function PokemonCard({ name = "pikachu" }) {
             <h2 className="card__title"> {data.name.toUpperCase()} #{data.id}</h2>
             <img src={sprite} alt={data.name} width={200} height={200} />
             <p><b>Types:</b> {data.types.map(t => t.type.name).join(", ")}</p>
-            <p><b>Height:</b> {data.height}  |  <b>Weight:</b> {data.weight}</p>
+            <p><b>Height:</b> {data.height * 10}cm |  <b>Weight:</b> {data.weight*0.1}kg </p>
             <ul className="list">
                 {data.stats.map(s => (
                 <li className="list-item" key={s.stat.name}>