From f03ae19e7b27ede6c4495617be56ab69af0040a4 Mon Sep 17 00:00:00 2001 From: Osasu Imariagbe Date: Tue, 1 Apr 2025 03:31:43 -0400 Subject: [PATCH] first commit --- css/styles.css | 0 index.html | 23 +++++++++++++++++++++++ js/app.js | 40 ++++++++++++++++++++++++++++++++++++++++ 3 files changed, 63 insertions(+) create mode 100644 css/styles.css create mode 100644 index.html create mode 100644 js/app.js diff --git a/css/styles.css b/css/styles.css new file mode 100644 index 0000000..e69de29 diff --git a/index.html b/index.html new file mode 100644 index 0000000..6a59c06 --- /dev/null +++ b/index.html @@ -0,0 +1,23 @@ + + + + + + + Simple API Project + + + +

Pokémon Finder

+ + + + +

+ +

+ + + + + \ No newline at end of file diff --git a/js/app.js b/js/app.js new file mode 100644 index 0000000..f7faeb5 --- /dev/null +++ b/js/app.js @@ -0,0 +1,40 @@ +document.addEventListener("DOMContentLoaded", () => { + const fetchBtn = document.getElementById("fetchBtn"); + + fetchBtn.addEventListener("click", fetchData); + + function fetchData() { + const nameInput = document.getElementById("pokemonName").value.toLowerCase(); + const image = document.getElementById("pokemonSprite"); + const weightElement = document.getElementById("pokemonWeight"); + + if (!nameInput) { + alert("Please enter a Pokémon name."); + return; + } + + fetch(`https://pokeapi.co/api/v2/pokemon/${nameInput}`) + .then((response) => { + if (!response.ok) { + throw new Error("Could not fetch resource"); + } + return response.json(); + }) + .then((data) => { + const spriteURL = data.sprites.front_default; + const weight = data.weight; + + image.src = spriteURL; + image.style.display = "block"; + + weightElement.textContent = `Weight: ${weight}`; + }) + .catch((error) => { + console.error(error); + image.style.display = "none"; + weightElement.textContent = ""; + alert("Pokémon not found!"); + }); + } + }); + \ No newline at end of file