100xdevs-cohort-3 · iGeeklOrd · Feb 14, 2025
diff --git a/week-3/solution/easy/The-Pokémon/README.md b/week-3/solution/easy/The-Pokémon/README.md
@@ -0,0 +1,19 @@
+
+# The-Pokémon
+
+Your task is to design and implement an application that display Pokémon Cards.
+
+- user comes to site and enter number of cards and select category of Pokémon.
+
+**Hint**: take category and no of Pokémon, use API and render.
+
+## Resources:
+
+- refer this: https://pokeapi.co/
+- use this `https://pokeapi.co/api/v2/pokemon/${id}` api to get the pokemon data by id.
+
+**Note**: here id is a number. for example `https://pokeapi.co/api/v2/pokemon/1`
+
+
+
+
diff --git a/week-3/solution/easy/The-Pokémon/public/index.html b/week-3/solution/easy/The-Pokémon/public/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Pokemon</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="container" id="container">  <!-- Corrected the typo -->
+        <h1>Pokemon World</h1>
+        <form id="pokemonForm" aria-labelledby="formHeader"> <!-- Added aria-labelledby -->
+            <h2 id = "formHeader">Find your pokemon</h2>
+            <label for="numPokemon">Number of Pokémon:</label>
+            <input type="number" id="numPokemon" min="1" max="20" required aria-describedby="numPokemonHelp"> <!-- Added aria-describedby -->
+            <small id="numPokemonHelp">Enter a number between 1 and 20</small>
+            <label for="category">Category:</label>
+            <select id="category" aria-label="Select Pokémon Type"> <!-- Added aria-label -->
+                <option value="fire">Fire</option>
+                <option value="water">Water</option>
+                <option value="grass">Grass</option>
+                <option value="electric">Electric</option>
+                <option value="psychic">Psychic</option>
+                <option value="ice">Ice</option>
+                <option value="dragon">Dragon</option>
+                <option value="dark">Dark</option>
+                <option value="fairy">Fairy</option>
+                <option value="normal">Normal</option>
+                <option value="fighting">Fighting</option>
+                <option value="flying">Flying</option>
+                <option value="poison">Poison</option>
+                <option value="ground">Ground</option>
+                <option value="rock">Rock</option>
+                <option value="bug">Bug</option>
+                <option value="ghost">Ghost</option>
+                <option value="steel">Steel</option>
+            </select>
+            <button type="submit">Get Pokémon</button>
+        </form>
+        <div id="messageContainer" aria-live="polite"></div> <!-- Added aria-live -->
+        <div id="pokemonContainer"></div>
+
+
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/week-3/solution/easy/The-Pokémon/public/script.js b/week-3/solution/easy/The-Pokémon/public/script.js
@@ -0,0 +1,104 @@
+document.getElementById("pokemonForm").addEventListener("submit", async function (e) {
+    e.preventDefault();
+
+    const numPokemon = parseInt(document.getElementById("numPokemon").value, 10); // Parse as integer
+    const category = document.getElementById("category").value;
+    const container = document.getElementById("pokemonContainer");
+    const messageContainer = document.getElementById("messageContainer");
+
+    if (!numPokemon) {
+        messageContainer.innerText = "Please enter a number to generate cards";
+        return;
+    }
+
+    container.innerHTML = "";
+    messageContainer.innerText = "Loading Pokémon... Please wait.";
+
+    try {
+        const pokemonCards = await fetchUniquePokemon(numPokemon, category);
+
+        if (pokemonCards.length === 0) {
+            container.innerHTML = `<p>No Pokémon found for the selected category.</p>`;
+            messageContainer.textContent = "No Pokémon found.";
+        } else {
+            pokemonCards.forEach(card => container.appendChild(card));
+            messageContainer.textContent = "Pokémon cards loaded successfully!";
+        }
+    } catch (error) {
+        console.error("Error fetching and displaying Pokémon:", error);
+        container.innerHTML = `<p>An error occurred while loading Pokémon. Please try again.</p>`;
+        messageContainer.textContent = "Error loading Pokémon.";
+    } finally {
+        setTimeout(() => (messageContainer.textContent = ""), 5 * 1000);
+    }
+});
+
+const cache = {}; // Simple in-memory cache
+
+async function fetchUniquePokemon(numPokemon, category) {
+    const pokemonCards = [];
+    const fetchedPokemon = new Set(); // Use a Set to track fetched IDs
+    let id = Math.floor(Math.random()) + 1;
+
+    while (pokemonCards.length < numPokemon && id <= 1000) {
+        try {
+            // Check cache first
+            if (cache[id]) {
+                const data = cache[id];
+                if (data.types.some(type => type.type.name === category)) {
+                    if (!fetchedPokemon.has(id)) { //Ensure pokemon is unique
+                        const card = createPokemonCard(data);
+                        pokemonCards.push(card);
+                        fetchedPokemon.add(id);
+                    }
+
+                }
+            } else {
+                const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${id}`);
+                if (!response.ok) {
+                    throw new Error(`HTTP error! Status: ${response.status}`);
+                }
+                const data = await response.json();
+                cache[id] = data; // Store data in cache
+
+                if (data.types.some(type => type.type.name === category)) {
+                    if (!fetchedPokemon.has(id)) { //Ensure pokemon is unique
+                        const card = createPokemonCard(data);
+                        pokemonCards.push(card);
+                        fetchedPokemon.add(id);
+                    }
+
+                }
+            }
+
+
+        } catch (err) {
+            console.error(`Failed to process Pokémon with ID ${id}: `, err);
+        }
+        id++;
+    }
+
+    return pokemonCards;
+}
+
+function createPokemonCard(data) {
+    const card = document.createElement("div");
+    card.className = "card";
+
+    const img = document.createElement("img");
+    img.src = data.sprites.front_default;
+    img.alt = data.name;
+    img.onerror = () => { img.src = 'path/to/default/image.png'; }; // Handle image loading errors
+
+    const name = document.createElement("h3");
+    name.textContent = data.name;
+
+    const type = document.createElement("p");
+    type.textContent = `Type: ${data.types.map(t => t.type.name).join(", ")}`;
+
+    card.appendChild(img);
+    card.appendChild(name);
+    card.appendChild(type);
+
+    return card;
+}
diff --git a/week-3/solution/easy/The-Pokémon/public/styles.css b/week-3/solution/easy/The-Pokémon/public/styles.css
@@ -0,0 +1,144 @@
+/* styles.css */
+
+/* Global Styles */
+:root {
+    --pokemon-blue: #29B6F6;       /* Light Blue - Electric/Water */
+    --pokemon-yellow: #FFCA28;     /* Light Yellow - Electric */
+    --pokemon-red: #E57373;        /* Light Red - Fire */
+    --pokemon-green: #81C784;      /* Light Green - Grass/Poison */
+    --pokemon-text: #263238;       /* Dark Blue-Gray - Improved readability */
+    --pokemon-background: #ECEFF1; /* Light Gray-Blue - Softer background */
+    --pokemon-card-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px; /* Even lighter shadow */
+}
+
+body {
+    font-family: 'Roboto', sans-serif;
+    background-color: var(--pokemon-background);
+    color: var(--pokemon-text);
+    line-height: 1.6;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+}
+
+/* Container Styles */
+.container { /* Corrected typo: contianer -> container */
+    background-color: #fff;
+    border-radius: 8px;
+    box-shadow: var(--pokemon-card-shadow);
+    padding: 2rem;
+    width: 90%;
+    max-width: 600px;
+    text-align: center;
+}
+
+/* Heading Styles */
+h1 {
+    color: var(--pokemon-blue);
+    font-size: 2.5rem;
+    margin-bottom: 1rem;
+}
+
+/* Form Styles */
+form {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+}
+
+label {
+    font-weight: bold;
+    margin-bottom: 0.5rem;
+    color: var(--pokemon-text);
+}
+
+input[type="number"],
+select {
+    padding: 0.75rem;
+    margin-bottom: 1rem;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 1rem;
+}
+
+/* Button Styles */
+button {
+    background-color: var(--pokemon-green);
+    color: white;
+    padding: 0.75rem 1.5rem;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 1.1rem;
+    transition: background-color 0.3s ease;
+}
+
+button:hover {
+    background-color: var(--pokemon-blue);
+}
+
+/* Message Container Styles */
+#messageContainer {
+    margin-top: 1rem;
+    font-style: italic;
+    color: var(--pokemon-red);
+}
+
+/* Pokemon Container Styles */
+#pokemonContainer {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 1rem;
+    margin-top: 2rem;
+}
+
+/* Card Styles */
+.card {
+    background-color: #fff;
+    border-radius: 8px;
+    box-shadow: var(--pokemon-card-shadow);
+    padding: 1rem;
+    width: 150px;
+    text-align: center;
+}
+
+.card img {
+    max-width: 100%;
+    height: auto;
+    margin-bottom: 0.5rem;
+}
+
+.card h3 {
+    color: var(--pokemon-blue);
+    font-size: 1.2rem;
+    margin-bottom: 0.5rem;
+}
+
+.card p {
+    font-size: 0.9rem;
+    color: var(--pokemon-text);
+}
+
+/* Media Queries for Responsiveness */
+@media (max-width: 600px) {
+    .container { /* Corrected typo: contianer -> container */
+        width: 95%;
+        padding: 1rem;
+    }
+
+    h1 {
+        font-size: 2rem;
+    }
+
+    form {
+        margin-bottom: 1.5rem;
+    }
+
+    .card {
+        width: calc(50% - 0.5rem);
+    }
+}
diff --git a/week-3/solution/easy/The-Pokémon/server.js b/week-3/solution/easy/The-Pokémon/server.js
diff --git a/week-3/solution/easy/bg-color-changer/README.md b/week-3/solution/easy/bg-color-changer/README.md
@@ -0,0 +1,17 @@
+
+# BG-Color-Changer
+
+Your task is to design and implement a Bg-Color-Changer application that meets the following requirements:
+
+- The UI should resemble the example shown below..
+
+![Image](https://utfs.io/f/7e57da15-803c-48c7-8487-dcade58eef91-wx71zg.png)
+
+
+- When user clicks on a red button, the background color should change to red.
+
+
+- User should also be able to add custom colors to the color panel.
+
+
+### Don't copy UI as it is, only take reference from it.
diff --git a/week-3/solution/easy/bg-color-changer/index.html b/week-3/solution/easy/bg-color-changer/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Color Factory</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Colour Factory</h1>
+        <div class="color-selector">
+            <button id="white" data-color="white"></button>
+            <button id="black" data-color="black"></button>
+            <input type="color" id="colorPicker" value="#0000">
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/week-3/solution/easy/bg-color-changer/script.js b/week-3/solution/easy/bg-color-changer/script.js
@@ -0,0 +1,23 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const colorPicker = document.getElementById("colorPicker");
+    const whiteButton = document.getElementById("white");
+    const blackButton = document.getElementById("black");
+
+    function changeBackgroundColor(color) {
+        document.body.style.backgroundColor = color;
+    }
+
+    colorPicker.addEventListener("input", function(e) {
+        const color = e.target.value;
+        changeBackgroundColor(color);
+    });
+
+    whiteButton.addEventListener("click", function() {
+        changeBackgroundColor("white");
+    });
+
+    blackButton.addEventListener("click", function() {
+        changeBackgroundColor("black");
+    });
+
+});