Naviin Raj - Internship

src/App.js

@@ -1,23 +1,132 @@
-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/DiceComponent';
+import Carousel from './components/Carousal';
+import RGBColorPicker from './components/RGBColorPicker';
+import NumbersTable from './components/NumbersTable';
 
 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>
+      <h1>User Details</h1>
+      <IdCard />
+      <h1>Greetings</h1>
+      <Greetings lang="de">Ludwig</Greetings>
+<Greetings lang="fr">François</Greetings>
+<h1>Random Number</h1>
+<Random min={1} max={6} />
+<Random min={1} max={100} />
+<h1>Box Color</h1>
+<BoxColor r={255} g={0} b={0} />
+<BoxColor r={128} g={255} b={0} />
+<h1>Credit Cards</h1>
+<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"
+/>
+<h1>Ratings</h1>
+
+<Rating>0</Rating>
+
+<Rating>1.49</Rating>
+
+<Rating>1.5</Rating>
+
+<Rating>3</Rating>
+
+<Rating>4</Rating>
+
+<Rating>5</Rating>
+<h1>Driver Cards
+</h1>
+<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"
+        }}
+      />
+      <h1>LikeButton</h1>
+
+<LikeButton  />
+<h1>ClickablePicture</h1>
+
+<ClickablePicture
+
+img='./assets/maxence.png'
+
+imgClicked='./assets/maxence-glasses.png'
+
+/>
+<h1>Dice</h1>
+      <Dice />
+
+      <h1>Carousel</h1>
+      <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',
+        ]}
+      />
+
+      <h1>Numbers Table</h1>
+      <NumbersTable limit={12} />
+
+      <h1>RGB Color Picker</h1>
+      <RGBColorPicker />
+
+
+
     </div>
   );
 }

src/components/BoxColor.js

@@ -0,0 +1,25 @@
+import React from 'react';
+
+function BoxColor({ r, g, b }) {
+  const divStyle = {
+    backgroundColor: `rgb(${r},${g},${b})`,
+    padding: '20px',
+    margin: '10px',
+    color: 'white',
+    textAlign: 'center',
+    border: '1px solid black',
+  };
+
+  const toHex = (r, g, b) => {
+    return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase()}`;
+  };
+
+  return (
+    <div style={divStyle}>
+      rgb({r}, {g}, {b}) <br />
+      {toHex(r, g, b)}
+    </div>
+  );
+}
+
+export default BoxColor;

src/components/Carousal.js

@@ -0,0 +1,27 @@
+import React, { useState } from 'react';
+
+function Carousel({ images }) {
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  const handleLeftClick = () => {
+    setCurrentIndex((prevIndex) => (prevIndex === 0 ? images.length - 1 : prevIndex - 1));
+  };
+
+  const handleRightClick = () => {
+    setCurrentIndex((prevIndex) => (prevIndex === images.length - 1 ? 0 : prevIndex + 1));
+  };
+
+  return (
+    <div style={{ display: 'flex', alignItems: 'center' }}>
+      <button onClick={handleLeftClick}>Left</button>
+      <img
+        src={images[currentIndex]}
+        alt="carousel"
+        style={{ width: '100px', height: '100px', margin: '0 10px' }}
+      />
+      <button onClick={handleRightClick}>Right</button>
+    </div>
+  );
+}
+
+export default Carousel;

src/components/ClickablePicture.js

@@ -0,0 +1,20 @@
+import React, { useState } from 'react';
+
+function ClickablePicture({ img, imgClicked }) {
+  const [isClicked, setIsClicked] = useState(false);
+
+  const handleClick = () => {
+    setIsClicked(!isClicked);
+  };
+
+  return (
+    <img
+      src={isClicked ? imgClicked : img}
+      alt="Clickable"
+      onClick={handleClick}
+      style={{ cursor: 'pointer', width: '150px', height: '150px' }}
+    />
+  );
+}
+
+export default ClickablePicture;

src/components/CreditCard.js

@@ -0,0 +1,40 @@
+import React from 'react';
+
+function CreditCard({ type, number, expirationMonth, expirationYear, bank, owner, bgColor, color }) {
+  const cardTypeImage = type === 'Visa' ? 'https://upload.wikimedia.org/wikipedia/commons/5/5e/Visa_Inc._logo.svg' : 'https://upload.wikimedia.org/wikipedia/commons/a/a4/Mastercard_2019_logo.svg';
+  const formattedNumber = `**** **** **** ${number.slice(-4)}`;
+  const formattedMonth = expirationMonth < 10 ? `0${expirationMonth}` : expirationMonth;
+  const formattedYear = expirationYear.toString().slice(-2);
+
+  return (
+    <div
+      style={{
+        backgroundColor: bgColor,
+        color: color,
+        width: '300px',
+        height: '150px',
+        borderRadius: '10px',
+        padding: '15px',
+        margin: '15px',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+        boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
+      }}
+    >
+      <div style={{ display: 'flex', justifyContent: 'flex-end',flexDirection: 'row' }}>
+        <img src={cardTypeImage} alt={type} style={{ width: '50px' }} />
+      </div>
+      <div style={{ fontSize: '1.5em', letterSpacing: '2px' }}>{formattedNumber}</div>
+      <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '0.8em' }}>
+        <div>
+          Expires {formattedMonth}/{formattedYear}
+        </div>
+        <div>{bank}</div>
+      </div>
+      <div style={{ fontSize: '0.9em' }}>{owner}</div>
+    </div>
+  );
+}
+
+export default CreditCard;

src/components/DiceComponent.js

@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+
+function Dice() {
+  const diceImages = [
+    './assets/dice1.png',
+    './assets/dice2.png',
+    './assets/dice3.png',
+    './assets/dice4.png',
+    './assets/dice5.png',
+    './assets/dice6.png',
+  ];
+  const [currentImage, setCurrentImage] = useState(diceImages[0]);
+
+  const handleClick = () => {
+    setCurrentImage('./assets/images/dice-empty.png');
+    setTimeout(() => {
+      const randomImage = diceImages[Math.floor(Math.random() * diceImages.length)];
+      setCurrentImage(randomImage);
+    }, 1000);
+  };
+
+  return (
+    <img
+      src={currentImage}
+      alt="Dice"
+      onClick={handleClick}
+      style={{ cursor: 'pointer', width: '100px', height: '100px' }}
+    />
+  );
+}
+
+export default Dice;
+

src/components/DriverCard.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import Rating from './Rating';
+
+function DriverCard({ name, rating, img, car }) {
+  return (
+    <div
+      style={{
+        backgroundColor: '#455EB5',
+        color: 'white',
+        width: 'full',
+        borderRadius: '10px',
+        padding: '15px',
+        margin: '15px',
+        display: 'flex',
+        justifyContent:'center',
+        alignItems: 'center',
+        boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
+      }}
+    >
+      <img
+        src={img}
+        alt={name}
+        style={{
+          borderRadius: '50%',
+          width: '100px',
+          height: '100px',
+          marginRight: '15px',
+          objectFit: 'cover',
+        }}
+      />
+      <div>
+        <h3>{name}</h3>
+        <Rating>{rating}</Rating>
+        <p>{car.model} - {car.licensePlate}</p>
+      </div>
+    </div>
+  );
+}
+
+export default DriverCard;

src/components/Greetings.js

@@ -0,0 +1,29 @@
+import React from 'react';
+
+function Greetings({ lang, children }) {
+    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 style={{ border: '1px solid black', padding: '10px', margin: '10px' }}>
+        {greeting} {children}
+      </div>
+    );
+  }
+
+  export default Greetings;