workshop3 complete

include-interactive-workshops/include-workshop3-interactive/src/app/basics/page.jsx

@@ -21,6 +21,16 @@ export default function BasicsPage() {
             </div>
 			))}
         */}
+
+          {team.map((team) => (
+            <div key={team.id} className={styles.card}>
+            <img src={team.image} alt={team.name} className={styles.pokemonImage}/>
+            <h3>{team.name}</h3>
+            <p>Type: {team.type}</p>
+            </div>
+          ))
+          }
+
       </div>
 
       <div className={styles.buttonGroup}>

include-interactive-workshops/include-workshop3-interactive/src/app/pokemonTeam/page.jsx

@@ -6,6 +6,10 @@ export default function PokemonPage() {
   // *Insert team type filter here!*
   // const *Insert pokemon type variable!* = *Insert .filter function here!* => pokemon.type === ["*Insert type here*"]
 
+
+  const fireTeam = team.filter((pokemon) => pokemon.type === "Fire");
+
+
   return (
     <main className={styles.container}>
       <h1>Pokémon Team</h1>
@@ -14,36 +18,32 @@ export default function PokemonPage() {
         <h2>.Map Method</h2>
         <h3> Insert Map Function Here!</h3>
         <div className={styles.pokemonCards}>
-          {/*Insert .map function here!*/}
-
-          {/* Example skeleton:
-          {yourData.map((item) => (
-            <div key={ *unique key* } className={styles.card}>
-              <img src={ *item.image* } alt={ *item.name* } className={styles.pokemonImage} />
-              <h3>{ *item.name* }</h3>
-              <p>Category: { *item.category* }</p>
+          {team.map((team) => (
+            <div key={team.id} className={styles.card}>
+            <img src={team.image} alt={team.name} className={styles.pokemonImage}/>
+            <h3>{team.name}</h3>
+            <p>Type: {team.type}</p>
             </div>
-			))}
-        */}
+          ))
+          }
         </div>
+
       </section>
 
       <section className={styles.section}>
         <h2>.Filter Method</h2>
-        <h3> Insert Filter Function Here!</h3>
+        <h3> Fire Pokemon</h3>
 
         <div className={styles.pokemonCards}>
-          {/*Insert .map function here!*/}
-
-          {/* Example skeleton:
-          {yourData.map((item) => (
-            <div key={ *unique key* } className={styles.card}>
-              <img src={ *item.image* } alt={ *item.name* } className={styles.pokemonImage} />
-              <h3>{ *item.name* }</h3>
-              <p>Category: { *item.category* }</p>
+          {/* Insert .map function here! */}
+          {fireTeam.map((team) => (
+            <div key={team.id} className={styles.card}>
+            <img src={team.image} alt={team.name} className={styles.pokemonImage}/>
+            <h3>{team.name}</h3>
+            <p>Type: {team.type}</p>
             </div>
-			))}
-        */}
+          ))
+          }
         </div>
       </section>
 

include-interactive-workshops/include-workshop4-interactive/src/app/colorpicker/ColorButton.jsx

@@ -3,12 +3,14 @@
 import "./ColorButton.scss";
 
 // ✏️ Step 4: Add props here → it should receive { color, onPick } from the parent.
-export default function ColorButton() {
+export default function ColorButton({ color, onPick }) {
   return (
-    // ✏️ Step 5: Add a <button> with:
-    // - className="color-btn"
-    // - style={{ backgroundColor: color }}
-    // - onClick={() => onPick(color)}
-    <button className="color-btn">Color</button>
+    <button
+      className="color-btn"
+      // Set the button's color
+      style={{ backgroundColor: color }} 
+      // Call the parent's function with this color when clicked
+      onClick={() => onPick(color)} 
+    ></button>
   );
 }

include-interactive-workshops/include-workshop4-interactive/src/app/colorpicker/ColorPicker.jsx

@@ -7,21 +7,23 @@ import ColorButton from "./ColorButton";
 
 export default function ColorPicker() {
   // Step 1: Create a piece of state to track background color.
-  // Example: const [bg, setBg] = useState("white");
+
+  const [bg, setBg] = useState("white");
 
   // Step 2: Define your palette array of colors (name + hex value).
-  // Example:
-  // const palette = [
-  //   { name: "Red", hex: "#f87171" },
-  //   { name: "Blue", hex: "#60a5fa" },
-  //   { name: "Green", hex: "#34d399" },
-  //   { name: "Yellow", hex: "#fbbf24" },
-  // ];
+
+  const palette = [
+    { name: "Red", hex: "#f87171" },
+    { name: "Blue", hex: "#60a5fa" },
+    { name: "Green", hex: "#34d399" },
+    { name: "Yellow", hex: "#fbbf24" },
+  ];
 
   // Temporary fallback so the page runs before we fill in code.
   // You can remove these after adding your useState and palette above.
-  const bg = "white";
-  const palette = [];
+
+  // const bg = "white";
+  // const palette = [];
 
   return (
     <div className="color-picker" style={{ backgroundColor: bg }}>
@@ -31,14 +33,15 @@ export default function ColorPicker() {
       </p>
 
       {/* Step 3: Map through your palette and render a ColorButton for each color. */}
-      {/* Example:
-          {palette.map((c) => (
-            <ColorButton key={c.name} color={c.hex} onPick={setBg} />
-          ))}
-      */}
+
+      <div className="button-container">
+        {palette.map((c) => (
+          <ColorButton key={c.name} color={c.hex} onPick={setBg} />
+        ))}
+      </div>
 
       <div className="nav-links">
-        <Link href="/" className="nav-btn home">
+        <Link href="/colorpicker" className="nav-btn home">
           Back to Home
         </Link>
         <Link href="/colorpicker/solution" className="nav-btn back">