From aef294aa528f80bd81d5ada8e79403c517bc665d Mon Sep 17 00:00:00 2001
From: SiyaM108 <deprominent@gmail.com>
Date: Tue, 9 Dec 2025 16:19:30 +0000
Subject: [PATCH 01/24] complete IdCard.js

---
 IdCard.js | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 IdCard.js

diff --git a/IdCard.js b/IdCard.js
new file mode 100644
index 0000000..6648267
--- /dev/null
+++ b/IdCard.js
@@ -0,0 +1,16 @@
+function IdCard({ lastName, firstName, gender, height, birth, picture }) {
+  return (
+    <div className="id-card">
+      <img src={picture} alt={firstName} />
+      <div>
+        <p><strong>Last name:</strong> {lastName}</p>
+        <p><strong>First name:</strong> {firstName}</p>
+        <p><strong>Gender:</strong> {gender}</p>
+        <p><strong>Height:</strong> {height / 100}m</p>
+        <p><strong>Birth:</strong> {birth.toDateString()}</p>
+      </div>
+    </div>
+  );
+}
+
+export default IdCard;

From 340441cd32e661515d7e4c4246500d03f805fe4f Mon Sep 17 00:00:00 2001
From: SiyaM108 <deprominent@gmail.com>
Date: Tue, 9 Dec 2025 16:22:41 +0000
Subject: [PATCH 02/24] complete Greetings/js

---
 src/Greetings.js | 16 ++++++++++++++++
 src/IdCard.js    | 16 ++++++++++++++++
 2 files changed, 32 insertions(+)
 create mode 100644 src/Greetings.js
 create mode 100644 src/IdCard.js

diff --git a/src/Greetings.js b/src/Greetings.js
new file mode 100644
index 0000000..70fe5a4
--- /dev/null
+++ b/src/Greetings.js
@@ -0,0 +1,16 @@
+function Greetings({ lang, children }) {
+  const messages = {
+    de: "Hallo",
+    en: "Hello",
+    es: "Hola",
+    fr: "Bonjour",
+  };
+
+  return (
+    <div className="greetings">
+      {messages[lang]} {children}
+    </div>
+  );
+}
+
+export default Greetings;
diff --git a/src/IdCard.js b/src/IdCard.js
new file mode 100644
index 0000000..6648267
--- /dev/null
+++ b/src/IdCard.js
@@ -0,0 +1,16 @@
+function IdCard({ lastName, firstName, gender, height, birth, picture }) {
+  return (
+    <div className="id-card">
+      <img src={picture} alt={firstName} />
+      <div>
+        <p><strong>Last name:</strong> {lastName}</p>
+        <p><strong>First name:</strong> {firstName}</p>
+        <p><strong>Gender:</strong> {gender}</p>
+        <p><strong>Height:</strong> {height / 100}m</p>
+        <p><strong>Birth:</strong> {birth.toDateString()}</p>
+      </div>
+    </div>
+  );
+}
+
+export default IdCard;

From 15e1edeb438950cf847abaae84be99889566f044 Mon Sep 17 00:00:00 2001
From: SiyaM108 <deprominent@gmail.com>
Date: Tue, 9 Dec 2025 16:26:10 +0000
Subject: [PATCH 03/24] move IdCard.js to src

---
 IdCard.js | 16 ----------------
 1 file changed, 16 deletions(-)
 delete mode 100644 IdCard.js

diff --git a/IdCard.js b/IdCard.js
deleted file mode 100644
index 6648267..0000000
--- a/IdCard.js
+++ /dev/null
@@ -1,16 +0,0 @@
-function IdCard({ lastName, firstName, gender, height, birth, picture }) {
-  return (
-    <div className="id-card">
-      <img src={picture} alt={firstName} />
-      <div>
-        <p><strong>Last name:</strong> {lastName}</p>
-        <p><strong>First name:</strong> {firstName}</p>
-        <p><strong>Gender:</strong> {gender}</p>
-        <p><strong>Height:</strong> {height / 100}m</p>
-        <p><strong>Birth:</strong> {birth.toDateString()}</p>
-      </div>
-    </div>
-  );
-}
-
-export default IdCard;

From 93a04c1f57d2fdcbc3401142c73600fe01bf5d24 Mon Sep 17 00:00:00 2001
From: SiyaM108 <deprominent@gmail.com>
Date: Tue, 9 Dec 2025 16:29:03 +0000
Subject: [PATCH 04/24] complete Random.js

---
 src/Random.js | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 src/Random.js

diff --git a/src/Random.js b/src/Random.js
new file mode 100644
index 0000000..db3b962
--- /dev/null
+++ b/src/Random.js
@@ -0,0 +1,11 @@
+function Random({ min, max }) {
+  const rand = Math.floor(Math.random() * (max - min + 1)) + min;
+
+  return (
+    <p>
+      Random value between {min} and {max} =&gt; {rand}
+    </p>
+  );
+}
+
+export default Random;

From f5652f9b37ba945887b0132109d9811d74aefa2e Mon Sep 17 00:00:00 2001
From: SiyaM108 <deprominent@gmail.com>
Date: Tue, 9 Dec 2025 16:31:05 +0000
Subject: [PATCH 05/24] complete BoxColor.js

---
 src/BoxColor.js | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)
 create mode 100644 src/BoxColor.js

diff --git a/src/BoxColor.js b/src/BoxColor.js
new file mode 100644
index 0000000..0883954
--- /dev/null
+++ b/src/BoxColor.js
@@ -0,0 +1,17 @@
+function BoxColor({ r, g, b }) {
+  const rgb = `rgb(${r},${g},${b})`;
+  const hex =
+    "#" +
+    [r, g, b]
+      .map((x) => x.toString(16).padStart(2, "0"))
+      .join("");
+
+  return (
+    <div style={{ backgroundColor: rgb, padding: "20px", border: "1px solid black" }}>
+      <p>{rgb}</p>
+      <p>{hex}</p>
+    </div>
+  );
+}
+
+export default BoxColor;

From b013b2fcbe79b6cee4946bebbbba84619986d9fc Mon Sep 17 00:00:00 2001
From: SiyaM108 <deprominent@gmail.com>
Date: Tue, 9 Dec 2025 16:32:08 +0000
Subject: [PATCH 06/24] complete CreditCard.js

---
 src/CreditCard.js | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)
 create mode 100644 src/CreditCard.js

diff --git a/src/CreditCard.js b/src/CreditCard.js
new file mode 100644
index 0000000..50fa749
--- /dev/null
+++ b/src/CreditCard.js
@@ -0,0 +1,26 @@
+function CreditCard({
+  type,
+  number,
+  expirationMonth,
+  expirationYear,
+  bank,
+  owner,
+  bgColor,
+  color,
+}) {
+  const last4 = number.slice(-4);
+
+  return (
+    <div className="credit-card" style={{ backgroundColor: bgColor, color }}>
+      <div className="type">{type}</div>
+      <div className="number">•••• •••• •••• {last4}</div>
+      <div className="details">
+        <span>Expires {String(expirationMonth).padStart(2, "0")}/{String(expirationYear).slice(-2)}</span>
+        <span className="bank">{bank}</span>
+      </div>
+      <div className="owner">{owner}</div>
+    </div>
+  );
+}
+
+export default CreditCard;

From 2a9941bb1f3476355012525901199beceab35cd4 Mon Sep 17 00:00:00 2001
From: SiyaM108 <deprominent@gmail.com>
Date: Tue, 9 Dec 2025 16:33:08 +0000
Subject: [PATCH 07/24] complete Rating.js

---
 src/Rating.js | 8 ++++++++
 1 file changed, 8 insertions(+)
 create mode 100644 src/Rating.js

diff --git a/src/Rating.js b/src/Rating.js
new file mode 100644
index 0000000..bc6eb7e
--- /dev/null
+++ b/src/Rating.js
@@ -0,0 +1,8 @@
+function Rating({ children }) {
+  const rounded = Math.round(children);
+  const stars = "★".repeat(rounded) + "☆".repeat(5 - rounded);
+
+  return <div>{stars}</div>;
+}
+
+export default Rating;

From f2a390e859503237ca4a163a084c5944070a2bd2 Mon Sep 17 00:00:00 2001
From: SiyaM108 <deprominent@gmail.com>
Date: Tue, 9 Dec 2025 16:33:59 +0000
Subject: [PATCH 08/24] complete DriverCard.js

---
 src/DriverCard.js | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 src/DriverCard.js

diff --git a/src/DriverCard.js b/src/DriverCard.js
new file mode 100644
index 0000000..856989f
--- /dev/null
+++ b/src/DriverCard.js
@@ -0,0 +1,16 @@
+import Rating from "./Rating";
+
+function DriverCard({ name, rating, img, car }) {
+  return (
+    <div className="driver-card">
+      <img src={img} alt={name} />
+      <div>
+        <h2>{name}</h2>
+        <Rating>{rating}</Rating>
+        <p>{car.model} — {car.licensePlate}</p>
+      </div>
+    </div>
+  );
+}
+
+export default DriverCard;

From e45cc84f8d3de7e019aa5c1dbdaac038b8061d8d Mon Sep 17 00:00:00 2001
From: SiyaM108 <deprominent@gmail.com>
Date: Tue, 9 Dec 2025 16:34:47 +0000
Subject: [PATCH 09/24] complete LikeButton

---
 src/LikeButton | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)
 create mode 100644 src/LikeButton

diff --git a/src/LikeButton b/src/LikeButton
new file mode 100644
index 0000000..56318e7
--- /dev/null
+++ b/src/LikeButton
@@ -0,0 +1,18 @@
+import { useState } from "react";
+
+const colors = ['purple','blue','green','yellow','orange','red'];
+
+function LikeButton() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <button
+      style={{ backgroundColor: colors[count % colors.length] }}
+      onClick={() => setCount(count + 1)}
+    >
+      {count} Likes
+    </button>
+  );
+}
+
+export default LikeButton;

From 19ddec3a437c56d5629140db310739e599d3b602 Mon Sep 17 00:00:00 2001
From: SiyaM108 <deprominent@gmail.com>
Date: Tue, 9 Dec 2025 16:36:09 +0000
Subject: [PATCH 10/24] save LikeButton as LikeButton.js

---
 src/{LikeButton => LikeButton.js} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/{LikeButton => LikeButton.js} (100%)

diff --git a/src/LikeButton b/src/LikeButton.js
similarity index 100%
rename from src/LikeButton
rename to src/LikeButton.js

From 6b41655ca9e45ad96c2828175fe11180871d0e65 Mon Sep 17 00:00:00 2001
From: SiyaM108 <deprominent@gmail.com>
Date: Tue, 9 Dec 2025 16:37:17 +0000
Subject: [PATCH 11/24] comlete ClickablePicture.js

---
 src/ClickablePicture.js | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 src/ClickablePicture.js

diff --git a/src/ClickablePicture.js b/src/ClickablePicture.js
new file mode 100644
index 0000000..ddf4f8f
--- /dev/null
+++ b/src/ClickablePicture.js
@@ -0,0 +1,16 @@
+import { useState } from "react";
+
+function ClickablePicture({ img, imgClicked }) {
+  const [clicked, setClicked] = useState(false);
+
+  return (
+    <img
+      src={clicked ? imgClicked : img}
+      alt="clickable"
+      onClick={() => setClicked(!clicked)}
+      style={{ cursor: "pointer" }}
+    />
+  );
+}
+
+export default ClickablePicture;

From 6fca9765807f79301954259860e3adc735d57fab Mon Sep 17 00:00:00 2001
From: SiyaM108 <deprominent@gmail.com>
Date: Tue, 9 Dec 2025 16:37:59 +0000
Subject: [PATCH 12/24] complete Dice.js

---
 src/Dice.js | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)
 create mode 100644 src/Dice.js

diff --git a/src/Dice.js b/src/Dice.js
new file mode 100644
index 0000000..a9f9100
--- /dev/null
+++ b/src/Dice.js
@@ -0,0 +1,26 @@
+import { useState } from "react";
+
+const diceImages = [
+  "/assets/images/dice1.png",
+  "/assets/images/dice2.png",
+  "/assets/images/dice3.png",
+  "/assets/images/dice4.png",
+  "/assets/images/dice5.png",
+  "/assets/images/dice6.png",
+];
+
+function Dice() {
+  const [dice, setDice] = useState("/assets/images/dice-empty.png");
+
+  const rollDice = () => {
+    setDice("/assets/images/dice-empty.png");
+    setTimeout(() => {
+      const random = Math.floor(Math.random() * 6);
+      setDice(diceImages[random]);
+    }, 1000);
+  };
+
+  return <img src={dice} alt="dice" onClick={rollDice} />;
+}
+
+export default Dice;

From 045e0907c35e9c14c89da458e59839c852b0a83a Mon Sep 17 00:00:00 2001
From: SiyaM108 <deprominent@gmail.com>
Date: Tue, 9 Dec 2025 16:38:59 +0000
Subject: [PATCH 13/24] complete Carousel.js

---
 src/Carousel.js | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)
 create mode 100644 src/Carousel.js

diff --git a/src/Carousel.js b/src/Carousel.js
new file mode 100644
index 0000000..2b03ea6
--- /dev/null
+++ b/src/Carousel.js
@@ -0,0 +1,21 @@
+import { useState } from "react";
+
+function Carousel({ images }) {
+  const [index, setIndex] = useState(0);
+
+  return (
+    <div>
+      <button onClick={() => setIndex((index - 1 + images.length) % images.length)}>
+        Left
+      </button>
+
+      <img src={images[index]} alt="carousel" />
+
+      <button onClick={() => setIndex((index + 1) % images.length)}>
+        Right
+      </button>
+    </div>
+  );
+}
+
+export default Carousel;

From 7fc92dd3abce2b1c0068abe65ea2f9ba1db1032c Mon Sep 17 00:00:00 2001
From: SiyaM108 <deprominent@gmail.com>
Date: Tue, 9 Dec 2025 16:39:55 +0000
Subject: [PATCH 14/24] complete NumbersTable.js

---
 src/NumbersTable.js | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)
 create mode 100644 src/NumbersTable.js

diff --git a/src/NumbersTable.js b/src/NumbersTable.js
new file mode 100644
index 0000000..c6cf5c2
--- /dev/null
+++ b/src/NumbersTable.js
@@ -0,0 +1,22 @@
+function NumbersTable({ limit }) {
+  const array = Array.from({ length: limit }, (_, i) => i + 1);
+
+  return (
+    <div className="numbers-table">
+      {array.map((n) => (
+        <div
+          key={n}
+          style={{
+            backgroundColor: n % 2 === 0 ? "red" : "white",
+            border: "1px solid black",
+            padding: "20px",
+          }}
+        >
+          {n}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default NumbersTable;

From 0917ff18cf8404da3ce1ecd4c40f9352f39dd658 Mon Sep 17 00:00:00 2001
From: SiyaM108 <deprominent@gmail.com>
Date: Tue, 9 Dec 2025 16:40:51 +0000
Subject: [PATCH 15/24] complete RGBColorPicker.js

---
 src/RGBColorPicker.js | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)
 create mode 100644 src/RGBColorPicker.js

diff --git a/src/RGBColorPicker.js b/src/RGBColorPicker.js
new file mode 100644
index 0000000..53ef10c
--- /dev/null
+++ b/src/RGBColorPicker.js
@@ -0,0 +1,29 @@
+function SingleColorPicker({ color, value, onChange }) {
+  const label = { r: 'Red', g: 'Green', b: 'Blue' }[color];
+
+  return (
+    <div>
+      <div
+        style={{
+          backgroundColor: `rgb(${color === 'r' ? value : 0},
+                                ${color === 'g' ? value : 0},
+                                ${color === 'b' ? value : 0})`,
+          width: 50,
+          height: 50,
+        }}
+      ></div>
+
+      <input
+        type="number"
+        min="0"
+        max="255"
+        value={value}
+        onChange={(e) => onChange(Number(e.target.value))}
+      />
+
+      <span>{label}</span>
+    </div>
+  );
+}
+
+export default SingleColorPicker;

From a192a798a748ae9da5cd3e1b88ba333b3c015526 Mon Sep 17 00:00:00 2001
From: SiyaM108 <deprominent@gmail.com>
Date: Tue, 9 Dec 2025 16:43:05 +0000
Subject: [PATCH 16/24] complete SingleColorPicker.js

---
 src/RGBColorPicker.js    | 35 +++++++++++++++--------------------
 src/SingleColorPicker.js | 29 +++++++++++++++++++++++++++++
 2 files changed, 44 insertions(+), 20 deletions(-)
 create mode 100644 src/SingleColorPicker.js

diff --git a/src/RGBColorPicker.js b/src/RGBColorPicker.js
index 53ef10c..034448c 100644
--- a/src/RGBColorPicker.js
+++ b/src/RGBColorPicker.js
@@ -1,29 +1,24 @@
-function SingleColorPicker({ color, value, onChange }) {
-  const label = { r: 'Red', g: 'Green', b: 'Blue' }[color];
+import { useState } from "react";
+import SingleColorPicker from "./SingleColorPicker";
+
+function RGBColorPicker() {
+  const [rValue, setR] = useState(0);
+  const [gValue, setG] = useState(0);
+  const [bValue, setB] = useState(0);
+
+  const rgb = `rgb(${rValue},${gValue},${bValue})`;
 
   return (
     <div>
+      <SingleColorPicker color="r" value={rValue} onChange={setR} />
+      <SingleColorPicker color="g" value={gValue} onChange={setG} />
+      <SingleColorPicker color="b" value={bValue} onChange={setB} />
+
       <div
-        style={{
-          backgroundColor: `rgb(${color === 'r' ? value : 0},
-                                ${color === 'g' ? value : 0},
-                                ${color === 'b' ? value : 0})`,
-          width: 50,
-          height: 50,
-        }}
+        style={{ backgroundColor: rgb, width: 100, height: 100, marginTop: 20 }}
       ></div>
-
-      <input
-        type="number"
-        min="0"
-        max="255"
-        value={value}
-        onChange={(e) => onChange(Number(e.target.value))}
-      />
-
-      <span>{label}</span>
     </div>
   );
 }
 
-export default SingleColorPicker;
+export default RGBColorPicker;
diff --git a/src/SingleColorPicker.js b/src/SingleColorPicker.js
new file mode 100644
index 0000000..53ef10c
--- /dev/null
+++ b/src/SingleColorPicker.js
@@ -0,0 +1,29 @@
+function SingleColorPicker({ color, value, onChange }) {
+  const label = { r: 'Red', g: 'Green', b: 'Blue' }[color];
+
+  return (
+    <div>
+      <div
+        style={{
+          backgroundColor: `rgb(${color === 'r' ? value : 0},
+                                ${color === 'g' ? value : 0},
+                                ${color === 'b' ? value : 0})`,
+          width: 50,
+          height: 50,
+        }}
+      ></div>
+
+      <input
+        type="number"
+        min="0"
+        max="255"
+        value={value}
+        onChange={(e) => onChange(Number(e.target.value))}
+      />
+
+      <span>{label}</span>
+    </div>
+  );
+}
+
+export default SingleColorPicker;

From fa90059480b17364c1a889e4c654a7d2bca5019c Mon Sep 17 00:00:00 2001
From: SiyaM108 <deprominent@gmail.com>
Date: Tue, 9 Dec 2025 16:56:30 +0000
Subject: [PATCH 17/24] complete IdCard.css

---
 src/components/IdCard/IdCard.css      | 15 +++++++++++++++
 src/{ => components/IdCard}/IdCard.js |  0
 2 files changed, 15 insertions(+)
 create mode 100644 src/components/IdCard/IdCard.css
 rename src/{ => components/IdCard}/IdCard.js (100%)

diff --git a/src/components/IdCard/IdCard.css b/src/components/IdCard/IdCard.css
new file mode 100644
index 0000000..8338b09
--- /dev/null
+++ b/src/components/IdCard/IdCard.css
@@ -0,0 +1,15 @@
+.IdCard {
+  display: flex;
+  border: 1px solid #ccc;
+  padding: 16px;
+  margin: 15px 0;
+}
+
+.IdCard img {
+  width: 120px;
+  margin-right: 20px;
+}
+
+.IdCard-info p {
+  margin: 4px 0;
+}
diff --git a/src/IdCard.js b/src/components/IdCard/IdCard.js
similarity index 100%
rename from src/IdCard.js
rename to src/components/IdCard/IdCard.js

From ec1df4fcbc1b38baeb7d6deda17e631f29895bbd Mon Sep 17 00:00:00 2001
From: SiyaM108 <deprominent@gmail.com>
Date: Tue, 9 Dec 2025 17:00:14 +0000
Subject: [PATCH 18/24] complete Greetings.css

---
 src/components/Greetings/Greetings.css      | 5 +++++
 src/{ => components/Greetings}/Greetings.js | 0
 2 files changed, 5 insertions(+)
 create mode 100644 src/components/Greetings/Greetings.css
 rename src/{ => components/Greetings}/Greetings.js (100%)

diff --git a/src/components/Greetings/Greetings.css b/src/components/Greetings/Greetings.css
new file mode 100644
index 0000000..86fa2af
--- /dev/null
+++ b/src/components/Greetings/Greetings.css
@@ -0,0 +1,5 @@
+.Greetings {
+  border: 1px solid black;
+  padding: 12px;
+  margin: 15px 0;
+}
diff --git a/src/Greetings.js b/src/components/Greetings/Greetings.js
similarity index 100%
rename from src/Greetings.js
rename to src/components/Greetings/Greetings.js

From 78792d70db9cd71900b5a46d85129b7af58d6cca Mon Sep 17 00:00:00 2001
From: SiyaM108 <deprominent@gmail.com>
Date: Tue, 9 Dec 2025 17:02:06 +0000
Subject: [PATCH 19/24] complete Random.css

---
 src/components/Random/Random.css      | 5 +++++
 src/{ => components/Random}/Random.js | 0
 2 files changed, 5 insertions(+)
 create mode 100644 src/components/Random/Random.css
 rename src/{ => components/Random}/Random.js (100%)

diff --git a/src/components/Random/Random.css b/src/components/Random/Random.css
new file mode 100644
index 0000000..57b0851
--- /dev/null
+++ b/src/components/Random/Random.css
@@ -0,0 +1,5 @@
+.Random {
+  border: 1px solid black;
+  padding: 12px;
+  margin: 15px 0;
+}
diff --git a/src/Random.js b/src/components/Random/Random.js
similarity index 100%
rename from src/Random.js
rename to src/components/Random/Random.js

From 7e7dd3da0a75f0d4794bb52b074e09ecfe41c9ce Mon Sep 17 00:00:00 2001
From: SiyaM108 <deprominent@gmail.com>
Date: Tue, 9 Dec 2025 17:31:35 +0000
Subject: [PATCH 20/24] complete BoxColor.css

---
 src/components/BoxColor/BoxColor.css      | 6 ++++++
 src/{ => components/BoxColor}/BoxColor.js | 0
 2 files changed, 6 insertions(+)
 create mode 100644 src/components/BoxColor/BoxColor.css
 rename src/{ => components/BoxColor}/BoxColor.js (100%)

diff --git a/src/components/BoxColor/BoxColor.css b/src/components/BoxColor/BoxColor.css
new file mode 100644
index 0000000..bfaa4a5
--- /dev/null
+++ b/src/components/BoxColor/BoxColor.css
@@ -0,0 +1,6 @@
+.BoxColor {
+  padding: 20px;
+  border: 1px solid black;
+  margin: 15px 0;
+  text-align: center;
+}
diff --git a/src/BoxColor.js b/src/components/BoxColor/BoxColor.js
similarity index 100%
rename from src/BoxColor.js
rename to src/components/BoxColor/BoxColor.js

From a1453f0ce0c2b0bd033b77bdff108663c6c09097 Mon Sep 17 00:00:00 2001
From: SiyaM108 <deprominent@gmail.com>
Date: Tue, 9 Dec 2025 17:44:27 +0000
Subject: [PATCH 21/24] complete all necessary css files

---
 src/components/Carousel/Carousel.css          | 10 +++++++
 src/{ => components/Carousel}/Carousel.js     |  0
 .../ClickablePicture/ClickablePicture.css     |  4 +++
 .../ClickablePicture}/ClickablePicture.js     |  0
 src/components/CreditCard/CreditCard.css      | 26 +++++++++++++++++++
 src/{ => components/CreditCard}/CreditCard.js |  0
 src/components/Dice/Dice.css                  |  4 +++
 src/{ => components/Dice}/Dice.js             |  0
 src/components/DriverCard/DriverCard.css      | 15 +++++++++++
 src/{ => components/DriverCard}/DriverCard.js |  0
 src/components/LikeButton/LikeButton.css      |  5 ++++
 src/{ => components/LikeButton}/LikeButton.js |  0
 src/components/NumbersTable/NumbersTable.css  | 10 +++++++
 .../NumbersTable}/NumbersTable.js             |  0
 .../RGBColorPicker/RGBColorPicker.css         | 19 ++++++++++++++
 .../RGBColorPicker}/RGBColorPicker.js         |  0
 .../RGBColorPicker}/SingleColorPicker.js      |  0
 src/components/Rating/Rating.css              |  4 +++
 src/{ => components/Rating}/Rating.js         |  0
 19 files changed, 97 insertions(+)
 create mode 100644 src/components/Carousel/Carousel.css
 rename src/{ => components/Carousel}/Carousel.js (100%)
 create mode 100644 src/components/ClickablePicture/ClickablePicture.css
 rename src/{ => components/ClickablePicture}/ClickablePicture.js (100%)
 create mode 100644 src/components/CreditCard/CreditCard.css
 rename src/{ => components/CreditCard}/CreditCard.js (100%)
 create mode 100644 src/components/Dice/Dice.css
 rename src/{ => components/Dice}/Dice.js (100%)
 create mode 100644 src/components/DriverCard/DriverCard.css
 rename src/{ => components/DriverCard}/DriverCard.js (100%)
 create mode 100644 src/components/LikeButton/LikeButton.css
 rename src/{ => components/LikeButton}/LikeButton.js (100%)
 create mode 100644 src/components/NumbersTable/NumbersTable.css
 rename src/{ => components/NumbersTable}/NumbersTable.js (100%)
 create mode 100644 src/components/RGBColorPicker/RGBColorPicker.css
 rename src/{ => components/RGBColorPicker}/RGBColorPicker.js (100%)
 rename src/{ => components/RGBColorPicker}/SingleColorPicker.js (100%)
 create mode 100644 src/components/Rating/Rating.css
 rename src/{ => components/Rating}/Rating.js (100%)

diff --git a/src/components/Carousel/Carousel.css b/src/components/Carousel/Carousel.css
new file mode 100644
index 0000000..2949f2a
--- /dev/null
+++ b/src/components/Carousel/Carousel.css
@@ -0,0 +1,10 @@
+.Carousel {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin: 15px 0;
+}
+
+.Carousel img {
+  width: 200px;
+}
diff --git a/src/Carousel.js b/src/components/Carousel/Carousel.js
similarity index 100%
rename from src/Carousel.js
rename to src/components/Carousel/Carousel.js
diff --git a/src/components/ClickablePicture/ClickablePicture.css b/src/components/ClickablePicture/ClickablePicture.css
new file mode 100644
index 0000000..72287c4
--- /dev/null
+++ b/src/components/ClickablePicture/ClickablePicture.css
@@ -0,0 +1,4 @@
+.ClickablePicture {
+  width: 200px;
+  cursor: pointer;
+}
diff --git a/src/ClickablePicture.js b/src/components/ClickablePicture/ClickablePicture.js
similarity index 100%
rename from src/ClickablePicture.js
rename to src/components/ClickablePicture/ClickablePicture.js
diff --git a/src/components/CreditCard/CreditCard.css b/src/components/CreditCard/CreditCard.css
new file mode 100644
index 0000000..267e322
--- /dev/null
+++ b/src/components/CreditCard/CreditCard.css
@@ -0,0 +1,26 @@
+.CreditCard {
+  width: 280px;
+  padding: 20px;
+  border-radius: 10px;
+  margin: 15px 0;
+  font-size: 1.1rem;
+}
+
+.type {
+  text-align: right;
+  font-size: 1.4rem;
+}
+
+.number {
+  font-size: 1.6rem;
+  margin: 20px 0;
+}
+
+.details {
+  display: flex;
+  justify-content: space-between;
+}
+
+.owner {
+  margin-top: 10px;
+}
diff --git a/src/CreditCard.js b/src/components/CreditCard/CreditCard.js
similarity index 100%
rename from src/CreditCard.js
rename to src/components/CreditCard/CreditCard.js
diff --git a/src/components/Dice/Dice.css b/src/components/Dice/Dice.css
new file mode 100644
index 0000000..81f6bbf
--- /dev/null
+++ b/src/components/Dice/Dice.css
@@ -0,0 +1,4 @@
+.Dice {
+  width: 150px;
+  cursor: pointer;
+}
diff --git a/src/Dice.js b/src/components/Dice/Dice.js
similarity index 100%
rename from src/Dice.js
rename to src/components/Dice/Dice.js
diff --git a/src/components/DriverCard/DriverCard.css b/src/components/DriverCard/DriverCard.css
new file mode 100644
index 0000000..1d49590
--- /dev/null
+++ b/src/components/DriverCard/DriverCard.css
@@ -0,0 +1,15 @@
+.DriverCard {
+  background-color: #455eb5;
+  color: white;
+  display: flex;
+  align-items: center;
+  padding: 20px;
+  border-radius: 10px;
+  margin: 15px 0;
+}
+
+.DriverCard img {
+  width: 100px;
+  border-radius: 50%;
+  margin-right: 20px;
+}
diff --git a/src/DriverCard.js b/src/components/DriverCard/DriverCard.js
similarity index 100%
rename from src/DriverCard.js
rename to src/components/DriverCard/DriverCard.js
diff --git a/src/components/LikeButton/LikeButton.css b/src/components/LikeButton/LikeButton.css
new file mode 100644
index 0000000..c632926
--- /dev/null
+++ b/src/components/LikeButton/LikeButton.css
@@ -0,0 +1,5 @@
+.LikeButton {
+  padding: 10px 20px;
+  font-size: 1.2rem;
+  margin: 10px;
+}
diff --git a/src/LikeButton.js b/src/components/LikeButton/LikeButton.js
similarity index 100%
rename from src/LikeButton.js
rename to src/components/LikeButton/LikeButton.js
diff --git a/src/components/NumbersTable/NumbersTable.css b/src/components/NumbersTable/NumbersTable.css
new file mode 100644
index 0000000..d780e79
--- /dev/null
+++ b/src/components/NumbersTable/NumbersTable.css
@@ -0,0 +1,10 @@
+.NumbersTable {
+  display: grid;
+  grid-template-columns: repeat(6, 80px);
+}
+
+.cell {
+  border: 1px solid black;
+  padding: 20px;
+  text-align: center;
+}
diff --git a/src/NumbersTable.js b/src/components/NumbersTable/NumbersTable.js
similarity index 100%
rename from src/NumbersTable.js
rename to src/components/NumbersTable/NumbersTable.js
diff --git a/src/components/RGBColorPicker/RGBColorPicker.css b/src/components/RGBColorPicker/RGBColorPicker.css
new file mode 100644
index 0000000..b295033
--- /dev/null
+++ b/src/components/RGBColorPicker/RGBColorPicker.css
@@ -0,0 +1,19 @@
+.SingleColorPicker {
+  display: flex;
+  align-items: center;
+  margin: 10px 0;
+}
+
+.SingleColorPicker .preview {
+  width: 40px;
+  height: 40px;
+  margin-right: 10px;
+  border: 1px solid #000;
+}
+
+.color-preview {
+  width: 100px;
+  height: 100px;
+  margin-top: 15px;
+  border: 1px solid #000;
+}
diff --git a/src/RGBColorPicker.js b/src/components/RGBColorPicker/RGBColorPicker.js
similarity index 100%
rename from src/RGBColorPicker.js
rename to src/components/RGBColorPicker/RGBColorPicker.js
diff --git a/src/SingleColorPicker.js b/src/components/RGBColorPicker/SingleColorPicker.js
similarity index 100%
rename from src/SingleColorPicker.js
rename to src/components/RGBColorPicker/SingleColorPicker.js
diff --git a/src/components/Rating/Rating.css b/src/components/Rating/Rating.css
new file mode 100644
index 0000000..6b15990
--- /dev/null
+++ b/src/components/Rating/Rating.css
@@ -0,0 +1,4 @@
+.Rating {
+  font-size: 2rem;
+  margin: 10px 0;
+}
diff --git a/src/Rating.js b/src/components/Rating/Rating.js
similarity index 100%
rename from src/Rating.js
rename to src/components/Rating/Rating.js

From 0d113949df9852158bb43a5d768e41ab94ee3fc5 Mon Sep 17 00:00:00 2001
From: SiyaM108 <deprominent@gmail.com>
Date: Tue, 9 Dec 2025 17:55:24 +0000
Subject: [PATCH 22/24] update all functions

---
 src/components/BoxColor/BoxColor.js           | 14 ++++-----
 src/components/Carousel/Carousel.js           |  5 +--
 .../ClickablePicture/ClickablePicture.js      |  7 +++--
 src/components/CreditCard/CreditCard.js       | 11 +++++--
 src/components/Dice/Dice.js                   | 31 ++++++++++---------
 src/components/DriverCard/DriverCard.js       |  5 +--
 src/components/Greetings/Greetings.js         |  8 +++--
 src/components/IdCard/IdCard.js               |  7 +++--
 src/components/LikeButton/LikeButton.js       |  6 ++--
 src/components/NumbersTable/NumbersTable.js   | 15 +++++----
 .../RGBColorPicker/RGBColorPicker.js          | 25 +++++++--------
 .../RGBColorPicker/SingleColorPicker.js       | 25 +++++++--------
 src/components/Random/Random.js               | 10 +++---
 src/components/Rating/Rating.js               |  4 ++-
 14 files changed, 96 insertions(+), 77 deletions(-)

diff --git a/src/components/BoxColor/BoxColor.js b/src/components/BoxColor/BoxColor.js
index 0883954..84279ba 100644
--- a/src/components/BoxColor/BoxColor.js
+++ b/src/components/BoxColor/BoxColor.js
@@ -1,13 +1,13 @@
+import './BoxColor.css';
+
 function BoxColor({ r, g, b }) {
-  const rgb = `rgb(${r},${g},${b})`;
-  const hex =
-    "#" +
-    [r, g, b]
-      .map((x) => x.toString(16).padStart(2, "0"))
-      .join("");
+  const rgb = `rgb(${r}, ${g}, ${b})`;
+  const hex = "#" + [r, g, b]
+    .map((v) => v.toString(16).padStart(2, "0"))
+    .join("");
 
   return (
-    <div style={{ backgroundColor: rgb, padding: "20px", border: "1px solid black" }}>
+    <div className="BoxColor" style={{ backgroundColor: rgb }}>
       <p>{rgb}</p>
       <p>{hex}</p>
     </div>
diff --git a/src/components/Carousel/Carousel.js b/src/components/Carousel/Carousel.js
index 2b03ea6..b025900 100644
--- a/src/components/Carousel/Carousel.js
+++ b/src/components/Carousel/Carousel.js
@@ -1,10 +1,11 @@
-import { useState } from "react";
+import './Carousel.css';
+import { useState } from 'react';
 
 function Carousel({ images }) {
   const [index, setIndex] = useState(0);
 
   return (
-    <div>
+    <div className="Carousel">
       <button onClick={() => setIndex((index - 1 + images.length) % images.length)}>
         Left
       </button>
diff --git a/src/components/ClickablePicture/ClickablePicture.js b/src/components/ClickablePicture/ClickablePicture.js
index ddf4f8f..b09a78c 100644
--- a/src/components/ClickablePicture/ClickablePicture.js
+++ b/src/components/ClickablePicture/ClickablePicture.js
@@ -1,4 +1,5 @@
-import { useState } from "react";
+import './ClickablePicture.css';
+import { useState } from 'react';
 
 function ClickablePicture({ img, imgClicked }) {
   const [clicked, setClicked] = useState(false);
@@ -6,9 +7,9 @@ function ClickablePicture({ img, imgClicked }) {
   return (
     <img
       src={clicked ? imgClicked : img}
-      alt="clickable"
       onClick={() => setClicked(!clicked)}
-      style={{ cursor: "pointer" }}
+      className="ClickablePicture"
+      alt="toggle"
     />
   );
 }
diff --git a/src/components/CreditCard/CreditCard.js b/src/components/CreditCard/CreditCard.js
index 50fa749..b3be392 100644
--- a/src/components/CreditCard/CreditCard.js
+++ b/src/components/CreditCard/CreditCard.js
@@ -1,3 +1,5 @@
+import './CreditCard.css';
+
 function CreditCard({
   type,
   number,
@@ -11,13 +13,18 @@ function CreditCard({
   const last4 = number.slice(-4);
 
   return (
-    <div className="credit-card" style={{ backgroundColor: bgColor, color }}>
+    <div className="CreditCard" style={{ backgroundColor: bgColor, color }}>
       <div className="type">{type}</div>
       <div className="number">•••• •••• •••• {last4}</div>
+
       <div className="details">
-        <span>Expires {String(expirationMonth).padStart(2, "0")}/{String(expirationYear).slice(-2)}</span>
+        <span>
+          Expires {String(expirationMonth).padStart(2, "0")}/
+          {String(expirationYear).slice(-2)}
+        </span>
         <span className="bank">{bank}</span>
       </div>
+
       <div className="owner">{owner}</div>
     </div>
   );
diff --git a/src/components/Dice/Dice.js b/src/components/Dice/Dice.js
index a9f9100..8f19d6e 100644
--- a/src/components/Dice/Dice.js
+++ b/src/components/Dice/Dice.js
@@ -1,26 +1,27 @@
-import { useState } from "react";
-
-const diceImages = [
-  "/assets/images/dice1.png",
-  "/assets/images/dice2.png",
-  "/assets/images/dice3.png",
-  "/assets/images/dice4.png",
-  "/assets/images/dice5.png",
-  "/assets/images/dice6.png",
-];
+import './Dice.css';
+import { useState } from 'react';
 
 function Dice() {
-  const [dice, setDice] = useState("/assets/images/dice-empty.png");
+  const diceImgs = [
+    '/assets/images/dice1.png',
+    '/assets/images/dice2.png',
+    '/assets/images/dice3.png',
+    '/assets/images/dice4.png',
+    '/assets/images/dice5.png',
+    '/assets/images/dice6.png',
+  ];
+
+  const [dice, setDice] = useState('/assets/images/dice-empty.png');
 
-  const rollDice = () => {
-    setDice("/assets/images/dice-empty.png");
+  const roll = () => {
+    setDice('/assets/images/dice-empty.png');
     setTimeout(() => {
       const random = Math.floor(Math.random() * 6);
-      setDice(diceImages[random]);
+      setDice(diceImgs[random]);
     }, 1000);
   };
 
-  return <img src={dice} alt="dice" onClick={rollDice} />;
+  return <img src={dice} onClick={roll} className="Dice" alt="dice" />;
 }
 
 export default Dice;
diff --git a/src/components/DriverCard/DriverCard.js b/src/components/DriverCard/DriverCard.js
index 856989f..68b2e43 100644
--- a/src/components/DriverCard/DriverCard.js
+++ b/src/components/DriverCard/DriverCard.js
@@ -1,8 +1,9 @@
-import Rating from "./Rating";
+import './DriverCard.css';
+import Rating from '../Rating/Rating';
 
 function DriverCard({ name, rating, img, car }) {
   return (
-    <div className="driver-card">
+    <div className="DriverCard">
       <img src={img} alt={name} />
       <div>
         <h2>{name}</h2>
diff --git a/src/components/Greetings/Greetings.js b/src/components/Greetings/Greetings.js
index 70fe5a4..89f0293 100644
--- a/src/components/Greetings/Greetings.js
+++ b/src/components/Greetings/Greetings.js
@@ -1,5 +1,7 @@
+import './Greetings.css';
+
 function Greetings({ lang, children }) {
-  const messages = {
+  const text = {
     de: "Hallo",
     en: "Hello",
     es: "Hola",
@@ -7,8 +9,8 @@ function Greetings({ lang, children }) {
   };
 
   return (
-    <div className="greetings">
-      {messages[lang]} {children}
+    <div className="Greetings">
+      {text[lang]} {children}
     </div>
   );
 }
diff --git a/src/components/IdCard/IdCard.js b/src/components/IdCard/IdCard.js
index 6648267..ed3aef4 100644
--- a/src/components/IdCard/IdCard.js
+++ b/src/components/IdCard/IdCard.js
@@ -1,8 +1,11 @@
+import './IdCard.css';
+
 function IdCard({ lastName, firstName, gender, height, birth, picture }) {
   return (
-    <div className="id-card">
+    <div className="IdCard">
       <img src={picture} alt={firstName} />
-      <div>
+
+      <div className="IdCard-info">
         <p><strong>Last name:</strong> {lastName}</p>
         <p><strong>First name:</strong> {firstName}</p>
         <p><strong>Gender:</strong> {gender}</p>
diff --git a/src/components/LikeButton/LikeButton.js b/src/components/LikeButton/LikeButton.js
index 56318e7..a79e928 100644
--- a/src/components/LikeButton/LikeButton.js
+++ b/src/components/LikeButton/LikeButton.js
@@ -1,12 +1,14 @@
-import { useState } from "react";
+import './LikeButton.css';
+import { useState } from 'react';
 
-const colors = ['purple','blue','green','yellow','orange','red'];
+const colors = ['purple', 'blue', 'green', 'yellow', 'orange', 'red'];
 
 function LikeButton() {
   const [count, setCount] = useState(0);
 
   return (
     <button
+      className="LikeButton"
       style={{ backgroundColor: colors[count % colors.length] }}
       onClick={() => setCount(count + 1)}
     >
diff --git a/src/components/NumbersTable/NumbersTable.js b/src/components/NumbersTable/NumbersTable.js
index c6cf5c2..3b4e579 100644
--- a/src/components/NumbersTable/NumbersTable.js
+++ b/src/components/NumbersTable/NumbersTable.js
@@ -1,16 +1,15 @@
+import './NumbersTable.css';
+
 function NumbersTable({ limit }) {
-  const array = Array.from({ length: limit }, (_, i) => i + 1);
+  const numbers = Array.from({ length: limit }, (_, i) => i + 1);
 
   return (
-    <div className="numbers-table">
-      {array.map((n) => (
+    <div className="NumbersTable">
+      {numbers.map((n) => (
         <div
           key={n}
-          style={{
-            backgroundColor: n % 2 === 0 ? "red" : "white",
-            border: "1px solid black",
-            padding: "20px",
-          }}
+          className="cell"
+          style={{ backgroundColor: n % 2 === 0 ? 'red' : 'white' }}
         >
           {n}
         </div>
diff --git a/src/components/RGBColorPicker/RGBColorPicker.js b/src/components/RGBColorPicker/RGBColorPicker.js
index 034448c..bf27602 100644
--- a/src/components/RGBColorPicker/RGBColorPicker.js
+++ b/src/components/RGBColorPicker/RGBColorPicker.js
@@ -1,22 +1,21 @@
-import { useState } from "react";
-import SingleColorPicker from "./SingleColorPicker";
+import './RGBColorPicker.css';
+import { useState } from 'react';
+import SingleColorPicker from './SingleColorPicker';
 
 function RGBColorPicker() {
-  const [rValue, setR] = useState(0);
-  const [gValue, setG] = useState(0);
-  const [bValue, setB] = useState(0);
+  const [rValue, setRValue] = useState(0);
+  const [gValue, setGValue] = useState(0);
+  const [bValue, setBValue] = useState(0);
 
-  const rgb = `rgb(${rValue},${gValue},${bValue})`;
+  const rgb = `rgb(${rValue}, ${gValue}, ${bValue})`;
 
   return (
-    <div>
-      <SingleColorPicker color="r" value={rValue} onChange={setR} />
-      <SingleColorPicker color="g" value={gValue} onChange={setG} />
-      <SingleColorPicker color="b" value={bValue} onChange={setB} />
+    <div className="RGBColorPicker">
+      <SingleColorPicker color="r" value={rValue} onChange={setRValue} />
+      <SingleColorPicker color="g" value={gValue} onChange={setGValue} />
+      <SingleColorPicker color="b" value={bValue} onChange={setBValue} />
 
-      <div
-        style={{ backgroundColor: rgb, width: 100, height: 100, marginTop: 20 }}
-      ></div>
+      <div className="color-preview" style={{ backgroundColor: rgb }}></div>
     </div>
   );
 }
diff --git a/src/components/RGBColorPicker/SingleColorPicker.js b/src/components/RGBColorPicker/SingleColorPicker.js
index 53ef10c..6ef58cb 100644
--- a/src/components/RGBColorPicker/SingleColorPicker.js
+++ b/src/components/RGBColorPicker/SingleColorPicker.js
@@ -1,18 +1,19 @@
+import './RGBColorPicker.css';
+
 function SingleColorPicker({ color, value, onChange }) {
-  const label = { r: 'Red', g: 'Green', b: 'Blue' }[color];
+  const label = { r: "Red", g: "Green", b: "Blue" }[color];
+
+  const previewColor = {
+    backgroundColor: `rgb(${color === 'r' ? value : 0},
+                          ${color === 'g' ? value : 0},
+                          ${color === 'b' ? value : 0})`
+  };
 
   return (
-    <div>
-      <div
-        style={{
-          backgroundColor: `rgb(${color === 'r' ? value : 0},
-                                ${color === 'g' ? value : 0},
-                                ${color === 'b' ? value : 0})`,
-          width: 50,
-          height: 50,
-        }}
-      ></div>
+    <div className="SingleColorPicker">
+      <div className="preview" style={previewColor}></div>
 
+      <label>{label}</label>
       <input
         type="number"
         min="0"
@@ -20,8 +21,6 @@ function SingleColorPicker({ color, value, onChange }) {
         value={value}
         onChange={(e) => onChange(Number(e.target.value))}
       />
-
-      <span>{label}</span>
     </div>
   );
 }
diff --git a/src/components/Random/Random.js b/src/components/Random/Random.js
index db3b962..d053ea8 100644
--- a/src/components/Random/Random.js
+++ b/src/components/Random/Random.js
@@ -1,10 +1,12 @@
+import './Random.css';
+
 function Random({ min, max }) {
-  const rand = Math.floor(Math.random() * (max - min + 1)) + min;
+  const randomNum = Math.floor(Math.random() * (max - min + 1)) + min;
 
   return (
-    <p>
-      Random value between {min} and {max} =&gt; {rand}
-    </p>
+    <div className="Random">
+      Random value between {min} and {max} =&gt; {randomNum}
+    </div>
   );
 }
 
diff --git a/src/components/Rating/Rating.js b/src/components/Rating/Rating.js
index bc6eb7e..3c0ad46 100644
--- a/src/components/Rating/Rating.js
+++ b/src/components/Rating/Rating.js
@@ -1,8 +1,10 @@
+import './Rating.css';
+
 function Rating({ children }) {
   const rounded = Math.round(children);
   const stars = "★".repeat(rounded) + "☆".repeat(5 - rounded);
 
-  return <div>{stars}</div>;
+  return <div className="Rating">{stars}</div>;
 }
 
 export default Rating;

From cc33f662d02c03b5b611121191dbf650fc927cf7 Mon Sep 17 00:00:00 2001
From: SiyaM108 <deprominent@gmail.com>
Date: Tue, 9 Dec 2025 18:09:11 +0000
Subject: [PATCH 23/24] update App.js

---
 src/App.js | 183 ++++++++++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 167 insertions(+), 16 deletions(-)

diff --git a/src/App.js b/src/App.js
index 3784575..7f48141 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,23 +1,174 @@
-import logo from './logo.svg';
-import './App.css';
+import "./App.css";
+
+// Iteration 1–13 Components
+import IdCard from "./components/IdCard/IdCard";
+import Greetings from "./components/Greetings/Greetings";
+import Random from "./components/Random/Random";
+import BoxColor from "./components/BoxColor/BoxColor";
+import CreditCard from "./components/CreditCard/CreditCard";
+import Rating from "./components/Rating/Rating";
+import DriverCard from "./components/DriverCard/DriverCard";
+import LikeButton from "./components/LikeButton/LikeButton";
+import ClickablePicture from "./components/ClickablePicture/ClickablePicture";
+import Dice from "./components/Dice/Dice";
+import Carousel from "./components/Carousel/Carousel";
+import NumbersTable from "./components/NumbersTable/NumbersTable";
+import RGBColorPicker from "./components/RGBColorPicker/RGBColorPicker";
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+
+      {/* -------------------------------------------------- */}
+      {/*              ITERATION 1: ID CARD                  */}
+      {/* -------------------------------------------------- */}
+      <IdCard
+        lastName="Doe"
+        firstName="John"
+        gender="male"
+        height={178}
+        birth={new Date("1992-07-14")}
+        picture="https://randomuser.me/api/portraits/men/44.jpg"
+      />
+
+      <IdCard
+        lastName="Delores"
+        firstName="Obrien"
+        gender="female"
+        height={172}
+        birth={new Date("1988-05-11")}
+        picture="https://randomuser.me/api/portraits/women/44.jpg"
+      />
+
+      {/* -------------------------------------------------- */}
+      {/*            ITERATION 2: GREETINGS                 */}
+      {/* -------------------------------------------------- */}
+      <Greetings lang="de">Ludwig</Greetings>
+      <Greetings lang="fr">François</Greetings>
+
+      {/* -------------------------------------------------- */}
+      {/*             ITERATION 3: RANDOM                   */}
+      {/* -------------------------------------------------- */}
+      <Random min={1} max={6} />
+      <Random min={1} max={100} />
+
+      {/* -------------------------------------------------- */}
+      {/*            ITERATION 4: BOX COLOR                 */}
+      {/* -------------------------------------------------- */}
+      <BoxColor r={255} g={0} b={0} />
+      <BoxColor r={128} g={255} b={0} />
+
+      {/* -------------------------------------------------- */}
+      {/*           ITERATION 5: CREDIT CARD                */}
+      {/* -------------------------------------------------- */}
+      <div className="credit-card-container">
+        <CreditCard
+          type="Visa"
+          number="0123456789018845"
+          expirationMonth={3}
+          expirationYear={2021}
+          bank="BNP"
+          owner="Maxence Bouret"
+          bgColor="#11aa99"
+          color="#ffffff"
+        />
+
+        <CreditCard
+          type="Master Card"
+          number="0123456789010995"
+          expirationMonth={3}
+          expirationYear={2021}
+          bank="N26"
+          owner="Maxence Bouret"
+          bgColor="#eeeeee"
+          color="#222222"
+        />
+
+        <CreditCard
+          type="Visa"
+          number="0123456789016984"
+          expirationMonth={12}
+          expirationYear={2019}
+          bank="Name of the Bank"
+          owner="Firstname Lastname"
+          bgColor="#ddbb55"
+          color="white"
+        />
+      </div>
+
+      {/* -------------------------------------------------- */}
+      {/*               ITERATION 6: RATING                 */}
+      {/* -------------------------------------------------- */}
+      <Rating>0</Rating>
+      <Rating>1.49</Rating>
+      <Rating>1.5</Rating>
+      <Rating>3</Rating>
+      <Rating>4</Rating>
+      <Rating>5</Rating>
+
+      {/* -------------------------------------------------- */}
+      {/*             ITERATION 7: DRIVER CARD              */}
+      {/* -------------------------------------------------- */}
+      <DriverCard
+        name="Travis Kalanick"
+        rating={4.2}
+        img="https://i.imgur.com/OZaT7jl.png"
+        car={{
+          model: "Toyota Corolla Altis",
+          licensePlate: "CO42DE",
+        }}
+      />
+
+      <DriverCard
+        name="Dara Khosrowshahi"
+        rating={4.9}
+        img="https://i.imgur.com/ID9gH5m.png"
+        car={{
+          model: "Audi A3",
+          licensePlate: "BE33ER",
+        }}
+      />
+
+      {/* -------------------------------------------------- */}
+      {/*             ITERATION 8: LIKE BUTTON              */}
+      {/* -------------------------------------------------- */}
+      <LikeButton />
+      <LikeButton />
+
+      {/* -------------------------------------------------- */}
+      {/*         ITERATION 9: CLICKABLE PICTURE            */}
+      {/* -------------------------------------------------- */}
+      <ClickablePicture
+        img="/assets/images/maxence.png"
+        imgClicked="/assets/images/maxence-glasses.png"
+      />
+
+      {/* -------------------------------------------------- */}
+      {/*                  ITERATION 10: DICE               */}
+      {/* -------------------------------------------------- */}
+      <Dice />
+
+      {/* -------------------------------------------------- */}
+      {/*                ITERATION 11: CAROUSEL             */}
+      {/* -------------------------------------------------- */}
+      <Carousel
+        images={[
+          "https://randomuser.me/api/portraits/women/1.jpg",
+          "https://randomuser.me/api/portraits/men/1.jpg",
+          "https://randomuser.me/api/portraits/women/2.jpg",
+          "https://randomuser.me/api/portraits/men/2.jpg",
+        ]}
+      />
+
+      {/* -------------------------------------------------- */}
+      {/*             ITERATION 12: NUMBERS TABLE           */}
+      {/* -------------------------------------------------- */}
+      <NumbersTable limit={12} />
+
+      {/* -------------------------------------------------- */}
+      {/*          ITERATION 13: RGB COLOR PICKER           */}
+      {/* -------------------------------------------------- */}
+      <RGBColorPicker />
     </div>
   );
 }

From 3c38edc7fcef9c85a1a67251290a9572d24aa4d3 Mon Sep 17 00:00:00 2001
From: SiyaM108 <deprominent@gmail.com>
Date: Tue, 9 Dec 2025 18:35:42 +0000
Subject: [PATCH 24/24] done

---
 src/components/Carousel/Carousel.css          | 15 +++++---
 src/components/Carousel/Carousel.js           | 19 ++++------
 .../ClickablePicture/ClickablePicture.css     |  5 ++-
 .../ClickablePicture/ClickablePicture.js      |  8 ++--
 src/components/CreditCard/CreditCard.css      | 23 +++++------
 src/components/CreditCard/CreditCard.js       | 18 ++++++---
 src/components/Dice/Dice.css                  |  5 ++-
 src/components/Dice/Dice.js                   | 38 +++++++++++--------
 src/components/DriverCard/DriverCard.css      | 12 +++---
 src/components/DriverCard/DriverCard.js       | 12 +++---
 src/components/LikeButton/LikeButton.css      |  8 +++-
 src/components/LikeButton/LikeButton.js       | 12 +++---
 src/components/NumbersTable/NumbersTable.css  | 19 ++++++----
 src/components/NumbersTable/NumbersTable.js   |  8 ++--
 .../RGBColorPicker/RGBColorPicker.css         | 24 +++++-------
 .../RGBColorPicker/RGBColorPicker.js          | 29 +++++++-------
 .../RGBColorPicker/SingleColorPicker.js       | 28 --------------
 src/components/Rating/Rating.js               |  8 ++--
 .../SingleColorPicker/SingleColorPicker.css   | 17 +++++++++
 .../SingleColorPicker/SingleColorPicker.js    | 29 ++++++++++++++
 20 files changed, 193 insertions(+), 144 deletions(-)
 delete mode 100644 src/components/RGBColorPicker/SingleColorPicker.js
 create mode 100644 src/components/SingleColorPicker/SingleColorPicker.css
 create mode 100644 src/components/SingleColorPicker/SingleColorPicker.js

diff --git a/src/components/Carousel/Carousel.css b/src/components/Carousel/Carousel.css
index 2949f2a..5ca6aa9 100644
--- a/src/components/Carousel/Carousel.css
+++ b/src/components/Carousel/Carousel.css
@@ -1,10 +1,15 @@
-.Carousel {
+.carousel {
   display: flex;
   align-items: center;
-  gap: 10px;
-  margin: 15px 0;
+  margin: 10px 0;
 }
 
-.Carousel img {
-  width: 200px;
+.carousel img {
+  width: 150px;
+  margin: 0 10px;
+}
+
+.carousel button {
+  padding: 5px 10px;
+  cursor: pointer;
 }
diff --git a/src/components/Carousel/Carousel.js b/src/components/Carousel/Carousel.js
index b025900..1a45662 100644
--- a/src/components/Carousel/Carousel.js
+++ b/src/components/Carousel/Carousel.js
@@ -1,20 +1,17 @@
-import './Carousel.css';
-import { useState } from 'react';
+import { useState } from "react";
+import "./Carousel.css";
 
 function Carousel({ images }) {
   const [index, setIndex] = useState(0);
 
-  return (
-    <div className="Carousel">
-      <button onClick={() => setIndex((index - 1 + images.length) % images.length)}>
-        Left
-      </button>
+  const prev = () => setIndex((index - 1 + images.length) % images.length);
+  const next = () => setIndex((index + 1) % images.length);
 
+  return (
+    <div className="carousel">
+      <button onClick={prev}>Left</button>
       <img src={images[index]} alt="carousel" />
-
-      <button onClick={() => setIndex((index + 1) % images.length)}>
-        Right
-      </button>
+      <button onClick={next}>Right</button>
     </div>
   );
 }
diff --git a/src/components/ClickablePicture/ClickablePicture.css b/src/components/ClickablePicture/ClickablePicture.css
index 72287c4..30a27e0 100644
--- a/src/components/ClickablePicture/ClickablePicture.css
+++ b/src/components/ClickablePicture/ClickablePicture.css
@@ -1,4 +1,5 @@
-.ClickablePicture {
-  width: 200px;
+.clickable-picture {
   cursor: pointer;
+  width: 200px;
+  margin: 10px 0;
 }
diff --git a/src/components/ClickablePicture/ClickablePicture.js b/src/components/ClickablePicture/ClickablePicture.js
index b09a78c..9d8b744 100644
--- a/src/components/ClickablePicture/ClickablePicture.js
+++ b/src/components/ClickablePicture/ClickablePicture.js
@@ -1,15 +1,15 @@
-import './ClickablePicture.css';
-import { useState } from 'react';
+import "./ClickablePicture.css";
+import { useState } from "react";
 
 function ClickablePicture({ img, imgClicked }) {
   const [clicked, setClicked] = useState(false);
 
   return (
     <img
+      className="clickable-picture"
       src={clicked ? imgClicked : img}
+      alt="clickable"
       onClick={() => setClicked(!clicked)}
-      className="ClickablePicture"
-      alt="toggle"
     />
   );
 }
diff --git a/src/components/CreditCard/CreditCard.css b/src/components/CreditCard/CreditCard.css
index 267e322..01837f0 100644
--- a/src/components/CreditCard/CreditCard.css
+++ b/src/components/CreditCard/CreditCard.css
@@ -1,22 +1,23 @@
-.CreditCard {
-  width: 280px;
-  padding: 20px;
+.credit-card {
+  width: 300px;
   border-radius: 10px;
-  margin: 15px 0;
-  font-size: 1.1rem;
+  padding: 20px;
+  margin: 12px;
+  display: flex;
+  flex-direction: column;
 }
 
-.type {
-  text-align: right;
-  font-size: 1.4rem;
+.card-logo {
+  width: 60px;
+  align-self: flex-end;
 }
 
-.number {
-  font-size: 1.6rem;
+.card-number {
+  font-size: 1.5rem;
   margin: 20px 0;
 }
 
-.details {
+.exp-bank {
   display: flex;
   justify-content: space-between;
 }
diff --git a/src/components/CreditCard/CreditCard.js b/src/components/CreditCard/CreditCard.js
index b3be392..d1f2f6f 100644
--- a/src/components/CreditCard/CreditCard.js
+++ b/src/components/CreditCard/CreditCard.js
@@ -1,4 +1,4 @@
-import './CreditCard.css';
+import "./CreditCard.css";
 
 function CreditCard({
   type,
@@ -10,14 +10,20 @@ function CreditCard({
   bgColor,
   color,
 }) {
-  const last4 = number.slice(-4);
+  const cardTypeImg =
+    type === "Visa"
+      ? "/assets/images/visa.png"
+      : "/assets/images/master-card.svg";
+
+  const maskedNumber = "•••• •••• •••• " + number.slice(-4);
 
   return (
-    <div className="CreditCard" style={{ backgroundColor: bgColor, color }}>
-      <div className="type">{type}</div>
-      <div className="number">•••• •••• •••• {last4}</div>
+    <div className="credit-card" style={{ backgroundColor: bgColor, color }}>
+      <img className="card-logo" src={cardTypeImg} alt={type} />
+
+      <div className="card-number">{maskedNumber}</div>
 
-      <div className="details">
+      <div className="exp-bank">
         <span>
           Expires {String(expirationMonth).padStart(2, "0")}/
           {String(expirationYear).slice(-2)}
diff --git a/src/components/Dice/Dice.css b/src/components/Dice/Dice.css
index 81f6bbf..1aa84ef 100644
--- a/src/components/Dice/Dice.css
+++ b/src/components/Dice/Dice.css
@@ -1,4 +1,5 @@
-.Dice {
-  width: 150px;
+.dice {
+  width: 100px;
   cursor: pointer;
+  margin: 10px 0;
 }
diff --git a/src/components/Dice/Dice.js b/src/components/Dice/Dice.js
index 8f19d6e..7cc2fad 100644
--- a/src/components/Dice/Dice.js
+++ b/src/components/Dice/Dice.js
@@ -1,27 +1,35 @@
-import './Dice.css';
-import { useState } from 'react';
+import { useState } from "react";
+import "./Dice.css";
+
+const diceImages = [
+  "/assets/images/dice1.png",
+  "/assets/images/dice2.png",
+  "/assets/images/dice3.png",
+  "/assets/images/dice4.png",
+  "/assets/images/dice5.png",
+  "/assets/images/dice6.png",
+];
 
 function Dice() {
-  const diceImgs = [
-    '/assets/images/dice1.png',
-    '/assets/images/dice2.png',
-    '/assets/images/dice3.png',
-    '/assets/images/dice4.png',
-    '/assets/images/dice5.png',
-    '/assets/images/dice6.png',
-  ];
+  const [dice, setDice] = useState(diceImages[0]);
 
-  const [dice, setDice] = useState('/assets/images/dice-empty.png');
+  const rollDice = () => {
+    setDice("/assets/images/dice-empty.png");
 
-  const roll = () => {
-    setDice('/assets/images/dice-empty.png');
     setTimeout(() => {
       const random = Math.floor(Math.random() * 6);
-      setDice(diceImgs[random]);
+      setDice(diceImages[random]);
     }, 1000);
   };
 
-  return <img src={dice} onClick={roll} className="Dice" alt="dice" />;
+  return (
+    <img
+      src={dice}
+      alt="dice"
+      className="dice"
+      onClick={rollDice}
+    />
+  );
 }
 
 export default Dice;
diff --git a/src/components/DriverCard/DriverCard.css b/src/components/DriverCard/DriverCard.css
index 1d49590..635e18d 100644
--- a/src/components/DriverCard/DriverCard.css
+++ b/src/components/DriverCard/DriverCard.css
@@ -1,15 +1,15 @@
-.DriverCard {
+.driver-card {
   background-color: #455eb5;
   color: white;
+  border-radius: 10px;
+  padding: 20px;
   display: flex;
   align-items: center;
-  padding: 20px;
-  border-radius: 10px;
-  margin: 15px 0;
+  margin: 10px 0;
 }
 
-.DriverCard img {
-  width: 100px;
+.driver-card img {
+  width: 120px;
   border-radius: 50%;
   margin-right: 20px;
 }
diff --git a/src/components/DriverCard/DriverCard.js b/src/components/DriverCard/DriverCard.js
index 68b2e43..18ad367 100644
--- a/src/components/DriverCard/DriverCard.js
+++ b/src/components/DriverCard/DriverCard.js
@@ -1,14 +1,16 @@
-import './DriverCard.css';
-import Rating from '../Rating/Rating';
+import "./DriverCard.css";
+import Rating from "../Rating/Rating";
 
 function DriverCard({ name, rating, img, car }) {
   return (
-    <div className="DriverCard">
+    <div className="driver-card">
       <img src={img} alt={name} />
       <div>
-        <h2>{name}</h2>
+        <h3>{name}</h3>
         <Rating>{rating}</Rating>
-        <p>{car.model} — {car.licensePlate}</p>
+        <p>
+          {car.model} – {car.licensePlate}
+        </p>
       </div>
     </div>
   );
diff --git a/src/components/LikeButton/LikeButton.css b/src/components/LikeButton/LikeButton.css
index c632926..f1e8633 100644
--- a/src/components/LikeButton/LikeButton.css
+++ b/src/components/LikeButton/LikeButton.css
@@ -1,5 +1,9 @@
-.LikeButton {
+.like-button {
   padding: 10px 20px;
-  font-size: 1.2rem;
   margin: 10px;
+  border: none;
+  color: white;
+  cursor: pointer;
+  border-radius: 6px;
+  font-size: 1rem;
 }
diff --git a/src/components/LikeButton/LikeButton.js b/src/components/LikeButton/LikeButton.js
index a79e928..c523f2f 100644
--- a/src/components/LikeButton/LikeButton.js
+++ b/src/components/LikeButton/LikeButton.js
@@ -1,15 +1,17 @@
-import './LikeButton.css';
-import { useState } from 'react';
+import { useState } from "react";
+import "./LikeButton.css";
 
-const colors = ['purple', 'blue', 'green', 'yellow', 'orange', 'red'];
+const colors = ["purple", "blue", "green", "yellow", "orange", "red"];
 
 function LikeButton() {
   const [count, setCount] = useState(0);
 
+  const color = colors[count % colors.length];
+
   return (
     <button
-      className="LikeButton"
-      style={{ backgroundColor: colors[count % colors.length] }}
+      className="like-button"
+      style={{ backgroundColor: color }}
       onClick={() => setCount(count + 1)}
     >
       {count} Likes
diff --git a/src/components/NumbersTable/NumbersTable.css b/src/components/NumbersTable/NumbersTable.css
index d780e79..1717ca5 100644
--- a/src/components/NumbersTable/NumbersTable.css
+++ b/src/components/NumbersTable/NumbersTable.css
@@ -1,10 +1,15 @@
-.NumbersTable {
-  display: grid;
-  grid-template-columns: repeat(6, 80px);
+.numbers-table {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 10px 0;
 }
 
-.cell {
-  border: 1px solid black;
-  padding: 20px;
-  text-align: center;
+.number {
+  width: 50px;
+  height: 50px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid #000;
+  margin: 2px;
 }
diff --git a/src/components/NumbersTable/NumbersTable.js b/src/components/NumbersTable/NumbersTable.js
index 3b4e579..198c583 100644
--- a/src/components/NumbersTable/NumbersTable.js
+++ b/src/components/NumbersTable/NumbersTable.js
@@ -1,15 +1,15 @@
-import './NumbersTable.css';
+import "./NumbersTable.css";
 
 function NumbersTable({ limit }) {
   const numbers = Array.from({ length: limit }, (_, i) => i + 1);
 
   return (
-    <div className="NumbersTable">
+    <div className="numbers-table">
       {numbers.map((n) => (
         <div
           key={n}
-          className="cell"
-          style={{ backgroundColor: n % 2 === 0 ? 'red' : 'white' }}
+          className="number"
+          style={{ backgroundColor: n % 2 === 0 ? "red" : "white" }}
         >
           {n}
         </div>
diff --git a/src/components/RGBColorPicker/RGBColorPicker.css b/src/components/RGBColorPicker/RGBColorPicker.css
index b295033..977f394 100644
--- a/src/components/RGBColorPicker/RGBColorPicker.css
+++ b/src/components/RGBColorPicker/RGBColorPicker.css
@@ -1,19 +1,15 @@
-.SingleColorPicker {
-  display: flex;
-  align-items: center;
+.rgb-color-picker {
   margin: 10px 0;
 }
 
-.SingleColorPicker .preview {
-  width: 40px;
-  height: 40px;
-  margin-right: 10px;
-  border: 1px solid #000;
-}
-
-.color-preview {
-  width: 100px;
-  height: 100px;
-  margin-top: 15px;
+.combined-color-box {
+  width: 150px;
+  height: 50px;
+  margin-top: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   border: 1px solid #000;
+  font-weight: bold;
+  color: #000;
 }
diff --git a/src/components/RGBColorPicker/RGBColorPicker.js b/src/components/RGBColorPicker/RGBColorPicker.js
index bf27602..9c85f29 100644
--- a/src/components/RGBColorPicker/RGBColorPicker.js
+++ b/src/components/RGBColorPicker/RGBColorPicker.js
@@ -1,21 +1,24 @@
-import './RGBColorPicker.css';
-import { useState } from 'react';
-import SingleColorPicker from './SingleColorPicker';
+import { useState } from "react";
+import SingleColorPicker from "../SingleColorPicker/SingleColorPicker";
+import "./RGBColorPicker.css";
 
 function RGBColorPicker() {
-  const [rValue, setRValue] = useState(0);
-  const [gValue, setGValue] = useState(0);
-  const [bValue, setBValue] = useState(0);
-
-  const rgb = `rgb(${rValue}, ${gValue}, ${bValue})`;
+  const [r, setR] = useState(0);
+  const [g, setG] = useState(0);
+  const [b, setB] = useState(0);
 
   return (
-    <div className="RGBColorPicker">
-      <SingleColorPicker color="r" value={rValue} onChange={setRValue} />
-      <SingleColorPicker color="g" value={gValue} onChange={setGValue} />
-      <SingleColorPicker color="b" value={bValue} onChange={setBValue} />
+    <div className="rgb-color-picker">
+      <SingleColorPicker color="r" value={r} onChange={setR} />
+      <SingleColorPicker color="g" value={g} onChange={setG} />
+      <SingleColorPicker color="b" value={b} onChange={setB} />
 
-      <div className="color-preview" style={{ backgroundColor: rgb }}></div>
+      <div
+        className="combined-color-box"
+        style={{ backgroundColor: `rgb(${r},${g},${b})` }}
+      >
+        rgb({r},{g},{b})
+      </div>
     </div>
   );
 }
diff --git a/src/components/RGBColorPicker/SingleColorPicker.js b/src/components/RGBColorPicker/SingleColorPicker.js
deleted file mode 100644
index 6ef58cb..0000000
--- a/src/components/RGBColorPicker/SingleColorPicker.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import './RGBColorPicker.css';
-
-function SingleColorPicker({ color, value, onChange }) {
-  const label = { r: "Red", g: "Green", b: "Blue" }[color];
-
-  const previewColor = {
-    backgroundColor: `rgb(${color === 'r' ? value : 0},
-                          ${color === 'g' ? value : 0},
-                          ${color === 'b' ? value : 0})`
-  };
-
-  return (
-    <div className="SingleColorPicker">
-      <div className="preview" style={previewColor}></div>
-
-      <label>{label}</label>
-      <input
-        type="number"
-        min="0"
-        max="255"
-        value={value}
-        onChange={(e) => onChange(Number(e.target.value))}
-      />
-    </div>
-  );
-}
-
-export default SingleColorPicker;
diff --git a/src/components/Rating/Rating.js b/src/components/Rating/Rating.js
index 3c0ad46..4ac28d3 100644
--- a/src/components/Rating/Rating.js
+++ b/src/components/Rating/Rating.js
@@ -1,10 +1,10 @@
-import './Rating.css';
+import "./Rating.css";
 
 function Rating({ children }) {
-  const rounded = Math.round(children);
-  const stars = "★".repeat(rounded) + "☆".repeat(5 - rounded);
+  const value = Math.round(Number(children));
+  const stars = "★★★★★☆☆☆☆☆".slice(5 - value, 10 - value);
 
-  return <div className="Rating">{stars}</div>;
+  return <div className="rating">{stars}</div>;
 }
 
 export default Rating;
diff --git a/src/components/SingleColorPicker/SingleColorPicker.css b/src/components/SingleColorPicker/SingleColorPicker.css
new file mode 100644
index 0000000..d4c5eb6
--- /dev/null
+++ b/src/components/SingleColorPicker/SingleColorPicker.css
@@ -0,0 +1,17 @@
+.single-color-picker {
+  display: flex;
+  align-items: center;
+  margin: 5px 0;
+}
+
+.single-color-picker input {
+  width: 60px;
+  margin-left: 5px;
+  margin-right: 10px;
+}
+
+.color-box {
+  width: 50px;
+  height: 30px;
+  border: 1px solid #000;
+}
diff --git a/src/components/SingleColorPicker/SingleColorPicker.js b/src/components/SingleColorPicker/SingleColorPicker.js
new file mode 100644
index 0000000..359e7c8
--- /dev/null
+++ b/src/components/SingleColorPicker/SingleColorPicker.js
@@ -0,0 +1,29 @@
+import "./SingleColorPicker.css";
+
+function SingleColorPicker({ color, value, onChange }) {
+  return (
+    <div className="single-color-picker">
+      <label>{color.toUpperCase()}:</label>
+      <input
+        type="number"
+        min="0"
+        max="255"
+        value={value}
+        onChange={(e) => onChange(Number(e.target.value))}
+      />
+      <div
+        className="color-box"
+        style={{
+          backgroundColor:
+            color === "r"
+              ? `rgb(${value},0,0)`
+              : color === "g"
+              ? `rgb(0,${value},0)`
+              : `rgb(0,0,${value})`,
+        }}
+      ></div>
+    </div>
+  );
+}
+
+export default SingleColorPicker;