Completed all iterations

package.json

@@ -34,5 +34,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "tailwindcss": "^3.4.14"
   }
 }

src/App.css

@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/App.js

@@ -1,25 +1,117 @@
-import logo from './logo.svg';
-import './App.css';
+import React from "react";
+import IdCard from "./components/IdCard";
+import Greetings from "./components/Greetings";
+import Random from "./components/Random";
+import BoxColor from "./components/BoxColor";
+import CreditCard from "./components/CreditCard";
+import Rating from "./components/Rating";
+import DriverCard from "./components/DriverCard";
+import LikeButton from "./components/LikeButton";
+import ClickablePicture from "./components/ClickablePicture";
+import Dice from "./components/Dice";
+import Carousel from "./components/Carousel";
+import NumbersTable from "./components/NumbersTable";
+import RGBColorPicker from "./components/RgbColorPicker";
 
-function App() {
+const 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>
+    <div>
+      <IdCard
+        firstName="M Khan"
+        lastName="Pasha"
+        gender="Male"
+        height={5.7}
+        birth={new Date("2010-01-12")}
+        image="https://randomuser.me/api/portraits/men/44.jpg"
+      />
+      <IdCard
+        firstName="Sarah"
+        lastName="Mazumdar"
+        gender="Female"
+        height={5.5}
+        birth={new Date("2011-01-12")}
+        image="https://randomuser.me/api/portraits/women/44.jpg"
+      />
+      <Greetings lang="fr">Francois</Greetings>
+      <Greetings lang="es">Espanoil</Greetings>
+      <Greetings lang="en">English</Greetings>
+
+      <Random min={4} max={12} />
+
+      <BoxColor r={255} g={0} b={0} />
+      <BoxColor r={12} g={123} b={189} />
+
+      <CreditCard
+        type="Visa"
+        number="0123456789018845"
+        expirationMonth={3}
+        expirationYear={2021}
+        bank="BNP"
+        owner="Maxence Bouret"
+        bgColor="#11aa99"
+        color="white"
+      />
+
+      <Rating>2.5</Rating>
+
+      <Rating>1.5</Rating>
+
+      <Rating>3</Rating>
+
+      <Rating>4</Rating>
+      <div className="flex flex-col items-center space-y-4 p-4">
+        <DriverCard
+          name="Travis Kalanick"
+          rating={4.2}
+          img="https://si.wsj.net/public/resources/images/BN-TY647_37gql_OR_20170621052140.jpg?width=620&height=428"
+          car={{
+            model: "Toyota Corolla Altis",
+            licensePlate: "CO42DE",
+          }}
+        />
+
+        <DriverCard
+          name="Dara Khosrowshahi"
+          rating={4.9}
+          img="https://ubernewsroomapi.10upcdn.com/wp-content/uploads/2017/09/Dara_ELT_Newsroom_1000px.jpg"
+          car={{
+            model: "Audi A3",
+            licensePlate: "BE33ER",
+          }}
+        />
+      </div>
+      <div className="flex flex-col items-center justify-center h-screen space-y-4">
+        <LikeButton />
+      </div>
+      <div>
+        <ClickablePicture
+          img="./assets/images/maxence.png"
+          imgClicked="./assets/images/maxence-glasses.png"
+        />
+      </div>
+      <div>
+        <Dice />
+      </div>
+      <div className="flex flex-col items-center justify-center h-screen">
+        <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",
+          ]}
+        />
+      </div>
+      <div className="flex flex-col items-center justify-center h-screen p-4">
+      <h1 className="text-2xl font-bold mb-4">Numbers Table</h1>
+      <NumbersTable limit={12} />
+    </div>
+    <div className="flex flex-col items-center justify-center h-screen">
+      <h1 className="text-2xl font-bold mb-4">RGB Color Picker</h1>
+      <RGBColorPicker />
+    </div>
     </div>
   );
-}
+};
 
 export default App;

src/components/BoxColor.js

@@ -0,0 +1,15 @@
+import React from 'react'
+
+const BoxColor = ({r,g,b}) => {
+
+    const bgColor=`rgb(${r},${g},${b})`
+  return (
+    <div>
+        <div className='h-8 w-auto bg-gray-500' style={{backgroundColor:bgColor}}>
+          {bgColor}
+        </div>
+    </div>
+  )
+}
+
+export default BoxColor

src/components/ClickablePicture.js

@@ -0,0 +1,20 @@
+import React, { useState } from 'react';
+
+const ClickablePicture = ({ img, imgClicked }) => {
+  const [isClicked, setIsClicked] = useState(false);
+
+  const handleClick = () => {
+    setIsClicked(!isClicked); // Toggle between true and false
+  };
+
+  return (
+    <img
+      src={isClicked ? imgClicked : img}
+      alt="Clickable"
+      onClick={handleClick}
+      className="cursor-pointer w-48 h-48 object-cover"
+    />
+  );
+};
+
+export default ClickablePicture;

src/components/CreditCard.js

@@ -0,0 +1,33 @@
+import React from 'react';
+
+const CreditCard = ({ type, number, expirationMonth, expirationYear, bank, owner, bgColor, color }) => {
+  return (
+    <div
+      className="w-80 h-48 rounded-xl shadow-lg p-6 text-white flex flex-col justify-between"
+      style={{ backgroundColor: bgColor, color: color }}
+    >
+      {/* Card Type */}
+      <div className="flex justify-end items-center mb-4">
+        <span className="uppercase text-lg">{type}</span>
+      </div>
+
+      {/* Card Number */}
+      <div className="text-2xl font-mono tracking-widest mb-4">
+        {number.replace(/\d{4}(?= \d{4})/g, '****')} {/* Mask all but last 4 digits */}
+      </div>
+
+      {/* Card Details */}
+      <div className="text-sm flex justify-start">
+
+          <span className='mr-1' >Expires</span>
+          <span>{`${expirationMonth}/${expirationYear.toString().slice(-2)}`}</span>
+          <span className="ml-5">{bank}</span>
+
+
+      </div>
+      <span>{owner}</span>
+    </div>
+  );
+};
+
+export default CreditCard;

src/components/Dice.js

@@ -0,0 +1,36 @@
+import React, { useState } from 'react';
+
+const Dice = () => {
+  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',
+  ];
+
+  const [currentDice, setCurrentDice] = useState(diceImages[0]); // Start with the first dice image
+
+  const handleClick = () => {
+    // Show the empty dice image
+    setCurrentDice('./assets/images/dice-empty.png');
+
+    // After 1 second, show a random dice image
+    setTimeout(() => {
+      const randomIndex = Math.floor(Math.random() * diceImages.length);
+      setCurrentDice(diceImages[randomIndex]);
+    }, 1000);
+  };
+
+  return (
+    <img
+      src={currentDice}
+      alt="Dice"
+      onClick={handleClick}
+      className="cursor-pointer w-24 h-24 object-contain"
+    />
+  );
+};
+
+export default Dice;

src/components/DriverCard.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import Rating from './Rating';
+
+const DriverCard = ({ name, rating, img, car }) => {
+  return (
+    <div className="flex items-center p-4 bg-gray-100 rounded-xl shadow-md w-96">
+      {/* Driver Image */}
+      <img
+        src={img}
+        alt={name}
+        className="w-24 h-24 rounded-full object-cover mr-4"
+      />
+
+      {/* Driver Info */}
+      <div className="flex flex-col">
+        <h2 className="text-xl font-semibold">{name}</h2>
+        <Rating>{rating}</Rating>
+        <p className="text-sm text-gray-600">{car.model} - {car.licensePlate}</p>
+      </div>
+    </div>
+  );
+};
+
+export default DriverCard;

src/components/Greetings.js

@@ -0,0 +1,30 @@
+import React from 'react';
+
+const Greetings = ({ lang, children }) => {
+  // Define greeting text based on the `lang` prop
+  let greeting;
+  switch (lang) {
+    case 'de':
+      greeting = 'Hallo';
+      break;
+    case 'en':
+      greeting = 'Hello';
+      break;
+    case 'es':
+      greeting = 'Hola';
+      break;
+    case 'fr':
+      greeting = 'Bonjour';
+      break;
+    default:
+      greeting = 'Hello';
+  }
+
+  return (
+    <div>
+      {greeting} {children}
+    </div>
+  );
+};
+
+export default Greetings;

src/components/IdCard.js

@@ -0,0 +1,21 @@
+import React from 'react'
+
+const IdCard = ({ firstName, lastName, gender, height, birth, image }) => {
+    return (
+      <div className='p-4 border border-15 flex items-center gap-2' >
+        <div>
+          <img src={image} alt="profilePic" />
+        </div>
+        <div>
+          <h3>First Name: {firstName}</h3>
+          <h3>Last Name: {lastName}</h3>
+          <h3>Gender: {gender}</h3>
+          <h3>Height: {height}</h3>
+          <h3>Birth: {birth.toDateString()}</h3>
+        </div>
+      </div>
+    );
+  }
+
+
+export default IdCard

src/components/LikeButton.js

@@ -0,0 +1,25 @@
+import React, { useState } from 'react';
+
+const LikeButton = () => {
+  const colors = ['purple', 'blue', 'green', 'yellow', 'orange', 'red'];
+
+  const [likes, setLikes] = useState(0); // Track the number of likes
+  const [colorIndex, setColorIndex] = useState(0); // Track the current color index
+
+  const handleClick = () => {
+    setLikes(likes + 1); // Increment likes
+    setColorIndex((colorIndex + 1) % colors.length); // Cycle through colors
+  };
+
+  return (
+    <button
+      onClick={handleClick}
+      className="px-4 py-2 rounded text-white font-bold"
+      style={{ backgroundColor: colors[colorIndex] }}
+    >
+      {likes} {likes === 1 ? 'Like' : 'Likes'}
+    </button>
+  );
+};
+
+export default LikeButton;