Build a pokemon search App (#2)

* add pokemon-app-certififaction project
fabianbernhart · Apr 14, 2024 · ecff218 · ecff218
1 parent 74b9038
commit ecff218
Show file tree

Hide file tree

Showing 5 changed files with 266 additions and 2 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/javascript-algorithmms-and-data-structures/build-a-pokemon-search-app/index.html b/src/javascript-algorithmms-and-data-structures/build-a-pokemon-search-app/index.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Pokémon Search App</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <main>
+      <img class="freecodecamp-logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo">
+      <h1>Pokémon Search App</h1>
+      <div class="container">
+        <form role="search" id="search-form">
+          <label for="search-input">Search for Pokémon Name or ID:</label>
+          <input type="text" name="pokemon" id="search-input" required="">
+          <button id="search-button">Search</button>
+        </form>
+        <div class="output">
+          <div class="top-container">
+            <div class="name-and-id">
+              <span id="pokemon-name">PIKACHU</span>
+              <span id="pokemon-id">#25</span>
+            </div>
+            <div class="size">
+              <span id="weight">Weight: 60</span>
+              <span id="height">Height: 4</span>
+            </div>
+            <div id="sprite-container" class="sprite-container">
+      <img id="sprite" src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/25.png" alt="pikachu front default sprite">
+    </div>
+            <div id="types"><span class="type electric">electric</span></div>
+          </div>
+          <div class="bottom-container">
+            <table>
+              <tbody><tr>
+                <th>Base</th>
+                <th>Stats</th>
+              </tr>
+              <tr>
+                <td>HP:</td>
+                <td id="hp">35</td>
+              </tr>
+              <tr>
+                <td>Attack:</td>
+                <td id="attack">55</td>
+              </tr>
+              <tr>
+                <td>Defense:</td>
+                <td id="defense">40</td>
+              </tr>
+              <tr>
+                <td>Sp. Attack:</td>
+                <td id="special-attack">50</td>
+              </tr>
+              <tr>
+                <td>Sp. Defense:</td>
+                <td id="special-defense">50</td>
+              </tr>
+              <tr>
+                <td>Speed:</td>
+                <td id="speed" class="speed">90</td>
+              </tr>
+            </tbody></table>
+          </div>
+        </div>
+      </div>
+      <script src="./script.js"></script>
+    </main>
+
+
+</body>
+</html>
diff --git a/src/javascript-algorithmms-and-data-structures/build-a-pokemon-search-app/scripts.js b/src/javascript-algorithmms-and-data-structures/build-a-pokemon-search-app/scripts.js
@@ -0,0 +1,73 @@
+const pokemonID = document.getElementById('pokemon-id');
+const pokemonName = document.getElementById('pokemon-name');
+const spriteContainer = document.getElementById('sprite-container');
+const types = document.getElementById('types');
+const height = document.getElementById('height');
+const weight = document.getElementById('weight');
+const hp = document.getElementById('hp');
+const attack = document.getElementById('attack');
+const defense = document.getElementById('defense');
+const specialAttack = document.getElementById('special-attack');
+const specialDefense = document.getElementById('special-defense');
+const speed = document.getElementById('speed');
+const searchForm = document.getElementById('search-form');
+const searchInput = document.getElementById('search-input');
+
+const getPokemon = async () => {
+  try {
+    const pokemonNameOrId = searchInput.value.toLowerCase();
+    const response = await fetch(
+      `https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/${pokemonNameOrId}`
+    );
+    const data = await response.json();
+
+    // Set Pokémon info
+    pokemonName.textContent = `${data.name.toUpperCase()}`;
+    pokemonID.textContent = `#${data.id}`;
+    weight.textContent = `Weight: ${data.weight}`;
+    height.textContent = `Height: ${data.height}`;
+    spriteContainer.innerHTML = `
+      <img id="sprite" src="${data.sprites.front_default}" alt="${data.name} front default sprite">
+    `;
+
+    // Set stats
+    hp.textContent = data.stats[0].base_stat;
+    attack.textContent = data.stats[1].base_stat;
+    defense.textContent = data.stats[2].base_stat;
+    specialAttack.textContent = data.stats[3].base_stat;
+    specialDefense.textContent = data.stats[4].base_stat;
+    speed.textContent = data.stats[5].base_stat;
+
+    // Set types
+    types.innerHTML = data.types
+      .map(obj => `<span class="type ${obj.type.name}">${obj.type.name}</span>`)
+      .join('');
+  } catch (err) {
+    resetDisplay();
+    alert('Pokémon not found');
+    console.log(`Pokémon not found: ${err}`);
+  }
+};
+
+const resetDisplay = () => {
+  const sprite = document.getElementById('sprite');
+  if (sprite) sprite.remove();
+
+  // reset stats
+  pokemonName.textContent = '';
+  pokemonID.textContent = '';
+  types.innerHTML = '';
+  height.textContent = '';
+  weight.textContent = '';
+  hp.textContent = '';
+  attack.textContent = '';
+  defense.textContent = '';
+  specialAttack.textContent = '';
+  specialDefense.textContent = '';
+  speed.textContent = '';
+};
+
+searchForm.addEventListener('submit', e => {
+  e.preventDefault();
+  getPokemon();
+});
diff --git a/src/javascript-algorithmms-and-data-structures/build-a-pokemon-search-app/styles.css b/src/javascript-algorithmms-and-data-structures/build-a-pokemon-search-app/styles.css
@@ -0,0 +1,118 @@
+/* Define colors as variables */
+:root {
+  --primary-blue: #1976d2; /* Blue */
+  --secondary-orange: #ff9800; /* Orange */
+  --background-white: #ffffff; /* White */
+   /* Electric type color */
+  --secondary-orange-darker: #40ff90; /* Darker shade of secondary orange */
+
+  --type-grass: #4CAF50; /* Green */
+  --type-poison: #9C27B0; /* Purple */
+  --type-electric: #fbc02d;
+}
+
+/* Apply colors to the HTML elements */
+body {
+  background-color: var(--background-white);
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+}
+
+main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+}
+
+.logo {
+  width: 200px;
+  height: auto;
+}
+
+h1 {
+  color: var(--primary-blue);
+}
+
+.container {
+  background-color: var(--primary-blue);
+  padding: 20px;
+  border-radius: 10px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  margin-top: 20px;
+}
+
+form {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+label {
+  color: var(--background-white);
+  margin-right: 10px;
+}
+
+input[type="text"] {
+  padding: 8px;
+  border: 2px solid var(--secondary-orange);
+  border-radius: 5px;
+  font-size: 16px;
+}
+
+button {
+  padding: 8px 20px;
+  background-color: var(--secondary-orange);
+  color: var(--background-white);
+  border: none;
+  border-radius: 5px;
+  font-size: 16px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+button:hover {
+  background-color: var(--secondary-orange-darker); /* Darker shade of secondary color */
+}
+
+.output {
+  margin-top: 20px;
+}
+
+/* Define specific colors for Pokémon types */
+.type {
+  padding: 4px 8px;
+  border-radius: 5px;
+  text-transform: uppercase;
+}
+
+.electric {
+  background-color: var(--type-electric);
+  color: var(--background-white);
+}
+
+.speed {
+  color: var(--secondary-orange); /* Secondary color for speed */
+}
+
+/* Style table */
+table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 20px;
+}
+
+th, td {
+  padding: 10px;
+  border-bottom: 1px solid var(--background-white);
+}
+
+th {
+  text-align: left;
+  background-color: var(--primary-blue);
+  color: var(--background-white);
+}
+
+/* Apply other specific styles as needed */
diff --git a/src/machine-learning-with-python/rock-paper-scissors/README.md b/src/machine-learning-with-python/rock-paper-scissors/README.md
@@ -42,4 +42,4 @@ The unit tests for this project are in `test_module.py`. We imported the tests f
 
 ### Submitting
 
-Copy your project's URL and submit it to freeCodeCamp.
+Copy your project's URL and submit it to freeCodeCamp.
Original file line number	Diff line number	Diff line change
Expand Up		@@ -42,4 +42,4 @@ The unit tests for this project are in `test_module.py`. We imported the tests f

		### Submitting

		Copy your project's URL and submit it to freeCodeCamp.
		Copy your project's URL and submit it to freeCodeCamp.