web-dev-open · premkumardev909 · Nov 22, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -34,5 +34,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "tailwindcss": "^3.4.15"
   }
 }
diff --git a/public/index.html b/public/index.html
@@ -2,42 +2,12 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
     <title>React App</title>
   </head>
   <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
+
   </body>
 </html>
diff --git a/src/App.css b/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);
-  }
-}

diff --git a/src/App.js b/src/App.js
@@ -1,25 +1,142 @@
-import logo from './logo.svg';
 import './App.css';
+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/DriveCard';
+import LikeButton from './components/LikeButton';
+import ClickablePicture from './components/ClickablePicture';
+import maxence from './assets/images/maxence.png';
+import maxenceGlasses from './assets/images/maxence-glasses.png';
+import Dice from './components/Dice';
+import Carousel from './components/Carousel';
+import NumbersTable from './components/NumbersTable';
+import RGBColorPicker from './components/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>
+    <div className="p-4">
+      <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"
+      />
+
+      <Greetings lang="de">Ludwig</Greetings>
+      <Greetings lang="fr">François</Greetings>
+
+      <Random min={1} max={6} />
+      <Random min={1} max={100} />
+
+      <BoxColor r={255} g={0} b={0} />
+      <BoxColor r={128} g={255} b={0} />
+
+      <div className="flex flex-wrap justify-center space-x-4 mt-4">
+        <CreditCard
+          type="Visa"
+          number="0123456789018845"
+          expirationMonth={3}
+          expirationYear={2021}
+          bank="BNP"
+          owner="Maxence Bouret"
+          bgColor="#11aa99"
+          color="white"
+        />
+
+        <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>
+      <div className='text-center'>
+
+        <Rating>0</Rating>
+
+        <Rating>1.49</Rating>
+
+        <Rating>1.5</Rating>
+
+        <Rating>3</Rating>
+
+        <Rating>4</Rating>
+
+        <Rating>5</Rating>
+
+      </div>
+
+      <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"
+        }}
+      />
+
+      <LikeButton />
+
+      <ClickablePicture img={maxence} imgClicked={maxenceGlasses} />
+
+      <Dice />
+
+      <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'
+        ]}
+
+      />
+
+      <NumbersTable limit={12} />
+
+      <RGBColorPicker />
+
     </div>
   );
 }
 
-export default App;
+export default App;
diff --git a/src/components/BoxColor.js b/src/components/BoxColor.js
@@ -0,0 +1,16 @@
+function BoxColor({ r, g, b }) {
+    const backgroundColor = `rgb(${r}, ${g}, ${b})`;
+    const hexColor = `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
+
+    return (
+        <div 
+            className="border border-black m-2 flex flex-col justify-center items-center" 
+            style={{ backgroundColor, width: 'auto', height: '100px' }}
+        >
+            <p className="text-center">{backgroundColor}</p>
+            <p className="text-center">{hexColor}</p>
+        </div>
+    );
+}
+
+export default BoxColor;
diff --git a/src/components/Carousel.js b/src/components/Carousel.js
@@ -0,0 +1,23 @@
+import React, { useState } from 'react';
+
+function Carousel({ images }) {
+    const [currentIndex, setCurrentIndex] = useState(0);
+
+    const nextImage = () => {
+        setCurrentIndex((currentIndex + 1) % images.length);
+    };
+
+    const prevImage = () => {
+        setCurrentIndex((currentIndex - 1 + images.length) % images.length);
+    };
+
+    return (
+        <div className="flex items-center justify-center m-4 border border-black p-4">
+            <button onClick={prevImage} className="absolute left-4 border border-black bg-black text-white p-2 h-10 rounded-lg">Left</button>
+            <img src={images[currentIndex]} alt="Carousel" className="w-44 h-44 mx-4" />
+            <button onClick={nextImage} className="absolute right-4 border border-black bg-black text-white p-2 h-10 rounded-lg">Right</button>
+        </div>
+    );
+}
+
+export default Carousel;
diff --git a/src/components/ClickablePicture.js b/src/components/ClickablePicture.js
@@ -0,0 +1,16 @@
+import React, { useState } from 'react';
+
+function ClickablePicture({ img, imgClicked }) {
+    const [isClicked, setIsClicked] = useState(false);
+
+    return (
+        <img 
+            src={isClicked ? imgClicked : img} 
+            alt="Clickable" 
+            onClick={() => setIsClicked(!isClicked)} 
+            className="cursor-pointer w-44 h-44"
+        />
+    );
+}
+
+export default ClickablePicture;
diff --git a/src/components/CreditCard.js b/src/components/CreditCard.js
@@ -0,0 +1,22 @@
+function CreditCard({ type, number, expirationMonth, expirationYear, bank, owner, bgColor, color }) {
+    const lastFourDigits = number.slice(-4);
+
+    return (
+        <div 
+            className="flex flex-col justify-between p-4 m-2 rounded-lg shadow-lg w-72" // Fixed width for consistency
+            style={{ backgroundColor: bgColor, color: color }}
+        >
+            <h3 className="font-bold">{type}</h3>
+            <p className="mt-2">**** **** **** {lastFourDigits}</p>
+            <div className="flex justify-between mt-4">
+                <div>
+                    <p>Expires {expirationMonth}/{expirationYear}</p>
+                    <p>{bank}</p>
+                </div>
+                <p>{owner}</p>
+            </div>
+        </div>
+    );
+}
+
+export default CreditCard;
diff --git a/src/components/Dice.js b/src/components/Dice.js
@@ -0,0 +1,52 @@
+import React, { useState } from 'react';
+import diceEmpty from '../assets/images/dice-empty.png';
+import dice1 from '../assets/images/dice1.png';
+import dice2 from '../assets/images/dice2.png';
+import dice3 from '../assets/images/dice3.png';
+import dice4 from '../assets/images/dice4.png';
+import dice5 from '../assets/images/dice5.png';
+import dice6 from '../assets/images/dice6.png';
+
+function Dice() {
+    const [diceValue, setDiceValue] = useState(diceEmpty);
+
+    const rollDice = () => {
+        setDiceValue(diceEmpty);
+        setTimeout(() => {
+            const newValue = Math.floor(Math.random() * 6) + 1;
+            switch (newValue) {
+                case 1:
+                    setDiceValue(dice1);
+                    break;
+                case 2:
+                    setDiceValue(dice2);
+                    break;
+                case 3:
+                    setDiceValue(dice3);
+                    break;
+                case 4:
+                    setDiceValue(dice4);
+                    break;
+                case 5:
+                    setDiceValue(dice5);
+                    break;
+                case 6:
+                    setDiceValue(dice6);
+                    break;
+                default:
+                    break;
+            }
+        }, 1000);
+    };
+
+    return (
+        <img 
+            src={diceValue} 
+            alt="Dice" 
+            onClick={rollDice} 
+            className="cursor-pointer w-44 h-44 m-2"
+        />
+    );
+}
+
+export default Dice;