innitial commit

Wkinson · Nov 30, 2022 · bd2762d · bd2762d
commit bd2762d
Show file tree

Hide file tree

Showing 4 changed files with 109 additions and 0 deletions.
diff --git a/IMG/pokebola.png b/IMG/pokebola.png
diff --git a/PokeWed.js b/PokeWed.js
@@ -0,0 +1,40 @@
+const fetchPokemon = async () => {
+    const pokeNameInput = document.getElementById("pokeName");
+    let pokeName = pokeNameInput.value;
+    pokeName = pokeName.toLowerCase();
+    const url = `https://pokeapi.co/api/v2/pokemon/${pokeName}`;
+
+    const data = await fetch(url).then((res) => {
+        if (res.status != "200") {
+            console.log(res);
+            pokeImage("https://www.google.com/url?sa=i&url=https%3A%2F%2Flatam.ign.com%2Fpokemon-tv%2F64560%2Fnews%2Fpokemon-este-es-el-pasado-triste-de-pikachu&psig=AOvVaw34TAve0KeZDHdy2fT1uXHY&ust=1668633004175000&source=images&cd=vfe&ved=0CBAQjRxqFwoTCODFw76MsfsCFQAAAAAdAAAAABAE")
+        }
+        else {
+            return res.json();
+        }
+    })
+
+    if (data) {
+        console.log(data);
+        let pokeImg = data.sprites.front_default;
+        let pokeInfo = data.abilities;
+        pokeImage(pokeImg);
+        pokeData(pokeInfo);
+        console.log(pokeImg);
+    }
+
+}
+
+const pokeImage = (url) => {
+    const pokePhoto = document.getElementById("pokeImg");
+    pokePhoto.src = url;
+}
+
+const pokeData = (abilities) => {
+    const pokeAbilities = document.getElementById('abilities');
+    const abilitiesName = abilities.map((item) => item.ability.name);
+    pokeAbilities.innerHTML = abilitiesName;
+
+}
+
+
diff --git a/pokeWed.css b/pokeWed.css
@@ -0,0 +1,36 @@
+*{
+    font-family: Arial, Helvetica, sans-serif;
+}
+.pokedex{
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    background-color: red;
+    width: 600px;
+    height: 400px;
+    border-color: black;
+    border: 16px;
+}
+
+.pokePhoto{
+    background-color: white;
+    border-color: black;
+    border-style: solid;
+    border-radius: 8px;
+    max-width: auto;
+}
+
+.pokeInfo{
+    display: flex;
+    flex-direction: column;
+    border-color: black;
+    border: 16px;
+}
+
+.pokeScreen{
+    background-color: #8b8b8b;
+    color: #ffffff;
+    width: 200px;
+    height: 150px;
+    font-size: 15px;
+}
diff --git a/pokeWed.html b/pokeWed.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>PokeWed para tus pokemones</title>
+    <link rel="stylesheet" href="pokeWed.css">
+</head>
+<body>
+    <h1>PokeWed</h1>
+    <div class="pokedex">
+        <div class="pokePhoto">
+            <img src="IMG\pokebola.png" alt="pokebola o pokemon" id="pokeImg" name="pokeImg" >
+        </div>
+        <div class="pokeInfo">
+            <input type="text" id="pokeName" name="pokeName">
+            <button onclick="fetchPokemon()">Buscar pokemon</button>
+
+            <div class="pokeScreen" id="abilities">
+
+
+            </div>
+
+        </div>
+
+    </div>
+
+
+</body>
+
+<script src="PokeWed.js"></script>
+</html>