diff --git "a/week-3/solution/easy/The-Pok\303\251mon/README.md" "b/week-3/solution/easy/The-Pok\303\251mon/README.md"
new file mode 100644
index 000000000..d4f0e73ec
--- /dev/null
+++ "b/week-3/solution/easy/The-Pok\303\251mon/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\303\251mon/public/index.html" "b/week-3/solution/easy/The-Pok\303\251mon/public/index.html"
new file mode 100644
index 000000000..0229d92df
--- /dev/null
+++ "b/week-3/solution/easy/The-Pok\303\251mon/public/index.html"
@@ -0,0 +1,47 @@
+
+
+
+ Pokemon
+
+
Pokemon World
+
+
+
+
+
+
No Pokémon found for the selected category.
`;
+ 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 = `An error occurred while loading Pokémon. Please try again.
`;
+ 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;
+}
\ No newline at end of file
diff --git "a/week-3/solution/easy/The-Pok\303\251mon/public/styles.css" "b/week-3/solution/easy/The-Pok\303\251mon/public/styles.css"
new file mode 100644
index 000000000..601008072
--- /dev/null
+++ "b/week-3/solution/easy/The-Pok\303\251mon/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\303\251mon/server.js" "b/week-3/solution/easy/The-Pok\303\251mon/server.js"
new file mode 100644
index 000000000..e69de29bb
diff --git a/week-3/solution/easy/bg-color-changer/README.md b/week-3/solution/easy/bg-color-changer/README.md
new file mode 100644
index 000000000..9fc2a61ed
--- /dev/null
+++ 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..
+
+
+
+
+- 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.
\ No newline at end of file
diff --git a/week-3/solution/easy/bg-color-changer/index.html b/week-3/solution/easy/bg-color-changer/index.html
new file mode 100644
index 000000000..aff7001c8
--- /dev/null
+++ b/week-3/solution/easy/bg-color-changer/index.html
@@ -0,0 +1,20 @@
+
+
+
+ Color Factory
+
+
Colour Factory
+
+
+
Quiz App
+
+
Quiz App
+
+
Start Quiz
+
Back
+
Next
+
+
Taskify
+
+
Taskify
+
+
+
+
+ Add
+
+
Document
+
+
Form Builder
+
Field type
+
+ Heading
+ Input
+ Datalist
+ Radio
+
+
+
+
Field Label
+
+
+
Placeholder (for Input)
+
+
+
+ Add
+
+
+
Form Preview
+
+
+
+
+
+
\ No newline at end of file
diff --git a/week-3/solution/medium/Form-Builder/script.js b/week-3/solution/medium/Form-Builder/script.js
new file mode 100644
index 000000000..33f444f57
--- /dev/null
+++ b/week-3/solution/medium/Form-Builder/script.js
@@ -0,0 +1,89 @@
+document.getElementById("addButton").addEventListener("click", function () {
+ const elementToCreate = document.getElementById("type").value;
+ const labelToBeAttached = document.getElementById("labelName").value;
+ const placeholder = document.getElementById("placeholder").value;
+
+ elementCreator(elementToCreate, labelToBeAttached, placeholder);
+
+ // Clear input fields after adding an element
+ document.getElementById("labelName").value = "";
+ document.getElementById("placeholder").value = "";
+});
+
+function elementCreator(elementToCreate, labelToBeAttached, placeholder) {
+ const previewContainer = document.getElementById("preview");
+
+ // Create a container for the new element and its label
+ const elementContainer = document.createElement("div");
+ elementContainer.className = "form-element";
+
+ // Create a label for the element
+ const labelElement = document.createElement("label");
+ labelElement.textContent = labelToBeAttached;
+
+ // Create the new element based on the selected type
+ let newElement;
+ switch (elementToCreate) {
+ case "h3":
+ newElement = document.createElement("h3");
+ newElement.textContent = labelToBeAttached;
+ break;
+
+ case "input":
+ newElement = document.createElement("input");
+ newElement.type = "text";
+ newElement.placeholder = placeholder || "";
+ break;
+
+ case "datalist":
+ newElement = document.createElement("input");
+ newElement.type = "text";
+ newElement.placeholder = placeholder || "";
+ const datalist = document.createElement("datalist");
+ datalist.id = "datalist-" + labelToBeAttached.replace(/\s+/g, "-").toLowerCase();
+ newElement.setAttribute("list", datalist.id);
+
+ // Add some example options to the datalist
+ const options = ["Option 1", "Option 2", "Option 3"];
+ options.forEach(option => {
+ const optionElement = document.createElement("option");
+ optionElement.value = option;
+ datalist.appendChild(optionElement);
+ });
+
+ elementContainer.appendChild(datalist);
+ break;
+
+ case "radio":
+ newElement = document.createElement("div");
+ const radioOptions = ["Option 1", "Option 2", "Option 3"];
+ radioOptions.forEach((option, index) => {
+ const radioInput = document.createElement("input");
+ radioInput.type = "radio";
+ radioInput.id = "radio-" + labelToBeAttached.replace(/\s+/g, "-").toLowerCase() + "-" + index;
+ radioInput.name = labelToBeAttached.replace(/\s+/g, "-").toLowerCase();
+
+ const radioLabel = document.createElement("label");
+ radioLabel.htmlFor = radioInput.id;
+ radioLabel.textContent = option;
+
+ newElement.appendChild(radioInput);
+ newElement.appendChild(radioLabel);
+ newElement.appendChild(document.createElement("br"));
+ });
+ break;
+
+ default:
+ console.error("Invalid element type");
+ return;
+ }
+
+ // Append the label and the new element to the container
+ if (elementToCreate !== "h3") {
+ elementContainer.appendChild(labelElement);
+ }
+ elementContainer.appendChild(newElement);
+
+ // Append the container to the preview section
+ previewContainer.appendChild(elementContainer);
+}
\ No newline at end of file
diff --git a/week-3/solution/medium/Form-Builder/styles.css b/week-3/solution/medium/Form-Builder/styles.css
new file mode 100644
index 000000000..800046079
--- /dev/null
+++ b/week-3/solution/medium/Form-Builder/styles.css
@@ -0,0 +1,37 @@
+.container {
+ margin: 20px;
+ padding: 20px;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+}
+
+.form-element {
+ margin-bottom: 15px;
+}
+
+label {
+ display: block;
+ margin-bottom: 5px;
+ font-weight: bold;
+}
+
+input[type="text"] {
+ width: 100%;
+ padding: 8px;
+ margin-bottom: 10px;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+}
+
+button {
+ padding: 10px 20px;
+ background-color: #007bff;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+}
+
+button:hover {
+ background-color: #0056b3;
+}
\ No newline at end of file