From c40049a50cb08fd410d8e46c07222a05f5c9bdf3 Mon Sep 17 00:00:00 2001 From: saqhibbilal Date: Thu, 28 Nov 2024 01:43:59 +0530 Subject: [PATCH] Done Training --- src/App.css | 200 +++++++++++++++++++++++++--- src/App.js | 155 ++++++++++++++++++--- src/assets/images/mastercard.png | Bin 0 -> 4849 bytes src/components/BoxColor.js | 25 ++++ src/components/Carousel.js | 25 ++++ src/components/ClickablePicture.js | 20 +++ src/components/CreditCard.js | 27 ++++ src/components/Dice.js | 29 ++++ src/components/DriverCard.js | 19 +++ src/components/Greetings.js | 23 ++++ src/components/Idcard.js | 19 +++ src/components/LikeButton.js | 19 +++ src/components/NumbersTable.js | 19 +++ src/components/RGBColorPicker.js | 0 src/components/Random.js | 11 ++ src/components/Ratings.js | 11 ++ src/components/SingleColorPicker.js | 16 +++ 17 files changed, 581 insertions(+), 37 deletions(-) create mode 100644 src/assets/images/mastercard.png create mode 100644 src/components/BoxColor.js create mode 100644 src/components/Carousel.js create mode 100644 src/components/ClickablePicture.js create mode 100644 src/components/CreditCard.js create mode 100644 src/components/Dice.js create mode 100644 src/components/DriverCard.js create mode 100644 src/components/Greetings.js create mode 100644 src/components/Idcard.js create mode 100644 src/components/LikeButton.js create mode 100644 src/components/NumbersTable.js create mode 100644 src/components/RGBColorPicker.js create mode 100644 src/components/Random.js create mode 100644 src/components/Ratings.js create mode 100644 src/components/SingleColorPicker.js diff --git a/src/App.css b/src/App.css index 74b5e05..0b8a610 100644 --- a/src/App.css +++ b/src/App.css @@ -1,38 +1,196 @@ .App { text-align: center; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; } -.App-logo { - height: 40vmin; - pointer-events: none; +.idCard-container{ + width: 600px; + height: 150px; + border: 1px solid black; + display: flex; + padding: 10px; + gap: 50px; + margin-top: 10px; + margin-left: 10px; } -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } + +.idCard-container img { + height: 150px; } -.App-header { - background-color: #282c34; - min-height: 100vh; +.idCard-container .text{ + text-align: left; display: flex; flex-direction: column; - align-items: center; + gap: 10px; +} + +.greeting-container { + width: 600px; + height: fit-content; + border: 1px solid black; + margin-top: 10px; + margin-left: 10px; +} + +.random-container{ + width: 600px; + height: fit-content; + border: 1px solid black; + margin-top: 10px; +} + + +.box-container{ + margin-top: 10px; + color: white; + text-align: center; + font-size: 1.5rem; +} + +.creditCard-container { + margin-top: 10px; + border-radius: 10px; + display: flex; + flex-direction: column; + padding: 15px; +} + +.card-logo { + align-self: flex-end; +} + +.logo-img { + width: 60px; + height: 30px; +} + +.card-number { + font-size: 2rem; + margin-top: 10px; + margin-bottom: 20px; +} + +.card-info { + font-size: 0.95rem; + align-self: flex-start; +} + +.expiry { + margin-right: 40px; +} + +.card-info .name { + margin-left: -30px; + font-size: 1.05rem; +} + +.rating-container { + font-size: 2rem; +} + + +.driver-card { + margin-top: 10px; + border-radius: 10px; + display: flex; + width: 700px; + height: 150px; + background-color: #365AB1; justify-content: center; - font-size: calc(10px + 2vmin); + align-items: center; + color: white; + gap: 10px; +} + +.driver-img img { + width: 100px; + height: 100px; + border-radius: 50%; +} + +.driver-info { + display: flex; + flex-direction: column; + text-align: left; +} + +.driver-info h1 { + font-size: 1.5rem; + margin-bottom: 5px; +} + +.driver-info p { + margin-top: 5px; +} + + +.like-button { + width: 170px; + height: 70px; + margin-top: 10px; + border: none; + border-radius: 10px; color: white; } -.App-link { - color: #61dafb; +.dice-img { + margin-top: 20px; + width: 300px; + height: 300px; } -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } +.carousel-container { + display: flex; + align-items: center; + justify-content: space-between; + gap: 30px; + margin: 20px; } + + +.numbers-table { + margin-top: 21px; + justify-content: center; + display: grid; + grid-template-columns: repeat(5, 52px); + grid-template-rows: repeat(3, 52px); + gap: 0px; +} + +.number { + width: 50px; + height: 50px; + display: flex; + align-items: center; + justify-content: center; + border: 2px solid black; + font-size: 18px; + font-weight: 500; +} + +.even { + background-color: red; +} + +.odd { + color: black; +} + +.single-color-picker, +.result-box { + display: flex; + align-items: center; + margin-bottom: 10px; +} + +.color-box { + width: 50px; + height: 50px; + border: 1px solid black; + margin-right: 10px; +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index 3784575..fe64a6d 100644 --- a/src/App.js +++ b/src/App.js @@ -1,24 +1,147 @@ -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 Ratings from './components/Ratings'; +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() { return (
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
+ + + + Ludwig + François + Riyaz + Santiago + + + + + + + + + + + + + 0 + + 1.49 + + 1.5 + + 3 + + 4 + + 5 + + + + + + + + + + + + + + + + + + + + +
+ + ); } diff --git a/src/assets/images/mastercard.png b/src/assets/images/mastercard.png new file mode 100644 index 0000000000000000000000000000000000000000..dc923d0560b0ec93f544089d5732b0861d60e745 GIT binary patch literal 4849 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 + const hex = c.toString(16); + return hex.length === 1 ? "0" + hex : hex; + +}; + +const rgbToHex = (r,g,b)=>{ + return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b); +} + +console.log(rgbToHex(props.r,props.g,props.b)); +return( +
+

rgb({props.r},{props.g},{props.b})

+

{rgbToHex(props.r,props.g,props.b)}

+
+ +); +} + +export default BoxColor; diff --git a/src/components/Carousel.js b/src/components/Carousel.js new file mode 100644 index 0000000..abf74d3 --- /dev/null +++ b/src/components/Carousel.js @@ -0,0 +1,25 @@ +import React from "react"; +import { useState } from "react"; + +function Carousel(props) { + const [currentSlide, setCurrentSlide] = useState(0); + + const leftHandler = () => { + setCurrentSlide((prevSlide) => prevSlide === 0 ? props.images.length - 1 : prevSlide - 1); + } + + const rightHandler = () => { + setCurrentSlide((prevSlide) => (prevSlide + 1) % props.images.length); + } + return ( +
+ +
+ +
+ +
+ ) +} + +export default Carousel; \ No newline at end of file diff --git a/src/components/ClickablePicture.js b/src/components/ClickablePicture.js new file mode 100644 index 0000000..8d8439f --- /dev/null +++ b/src/components/ClickablePicture.js @@ -0,0 +1,20 @@ +import React from "react"; +import { useState } from "react"; +import maxence from "../assets/images/maxence.png"; +import maxenceglasses from "../assets/images/maxence-glasses.png"; + + +function ClickablePicture(props) { + const [isClicked, setIsClicked] = useState(false); + + const handleClick = () => { + setIsClicked(!isClicked); + } + return ( +
+ maxence +
+ ) +} + +export default ClickablePicture; \ No newline at end of file diff --git a/src/components/CreditCard.js b/src/components/CreditCard.js new file mode 100644 index 0000000..2d8d017 --- /dev/null +++ b/src/components/CreditCard.js @@ -0,0 +1,27 @@ +import React from "react"; +import visa from '../assets/images/visa.png'; +import mCard from '../assets/images/mastercard.png'; + +function CreditCard(props) { + let cardSrc = (props.type === "Visa") ? visa : mCard; + return ( +
+
+ {props.type} +
+
+
•••• •••• •••• {props.number.slice(-4)}
+
+
+ + Expires {props.expirationMonth}/{props.expirationYear % 100} + {props.bank} +

+ + {props.owner} +
+
+ ) +} + +export default CreditCard; \ No newline at end of file diff --git a/src/components/Dice.js b/src/components/Dice.js new file mode 100644 index 0000000..92aa84f --- /dev/null +++ b/src/components/Dice.js @@ -0,0 +1,29 @@ +import React from "react"; +import { 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 diceImages = [diceEmpty, dice1, dice2, dice3, dice4, dice5, dice6]; + const randomNumber = Math.floor(Math.random() * 6) + 1; + const [dice, setDice] = useState(diceImages[randomNumber]); + + const handleClick = () => { + setTimeout(() => { + setDice(diceImages[Math.floor(Math.random() * 6) + 1]); + }, 1000); + setDice(diceEmpty); + } + return ( +
+ Dice +
+ ) +} + +export default Dice; \ No newline at end of file diff --git a/src/components/DriverCard.js b/src/components/DriverCard.js new file mode 100644 index 0000000..5f884b7 --- /dev/null +++ b/src/components/DriverCard.js @@ -0,0 +1,19 @@ +import React from "react"; +import Ratings from "./Ratings"; + +function DriverCard(props) { + return ( +
+
+ {props.name} +
+
+

{props.name}

+ {props.rating} +

{props.car.model} - {props.car.licensePlate}

+
+
+ ) +} + +export default DriverCard; \ No newline at end of file diff --git a/src/components/Greetings.js b/src/components/Greetings.js new file mode 100644 index 0000000..e78452e --- /dev/null +++ b/src/components/Greetings.js @@ -0,0 +1,23 @@ +import React from "react"; + +function Greetings(props){ + const languageHello={ + en: "Hello", + fr: "Bonjour", + es: "Hola", + de: "Hallo", + it: "Ciao", + pl: "Salam" + } + + + return ( +
+

{languageHello[props.lang]} {props.children}

+
+ + + ); +} + +export default Greetings; \ No newline at end of file diff --git a/src/components/Idcard.js b/src/components/Idcard.js new file mode 100644 index 0000000..6962dd1 --- /dev/null +++ b/src/components/Idcard.js @@ -0,0 +1,19 @@ +import React from "react"; + +function Idcard(props){ + return( +
+ profile +
+
First Name:{props.firstName}
+
Last Name:{props.lastName}
+
Gender:{props.gender}
+
Height:{props.height / 100}m
+
Birthdate:{props.birth.toDateString()}
+
+
+ + ); +} + +export default Idcard; \ No newline at end of file diff --git a/src/components/LikeButton.js b/src/components/LikeButton.js new file mode 100644 index 0000000..99261a2 --- /dev/null +++ b/src/components/LikeButton.js @@ -0,0 +1,19 @@ +import React from "react"; +import { useState } from "react"; + +function LikeButton() { + const [likes, setLikes] = useState(0); + const colors = ['purple', 'blue', 'green', 'yellow', 'orange', 'red']; + const [color, setColor] = useState('blue'); + + const handleClick = () => { + setLikes(likes + 1); + setColor(colors[Math.floor(Math.random() * colors.length)]); + console.log(color) + } + return ( + + ) +} + +export default LikeButton; \ No newline at end of file diff --git a/src/components/NumbersTable.js b/src/components/NumbersTable.js new file mode 100644 index 0000000..84e6e92 --- /dev/null +++ b/src/components/NumbersTable.js @@ -0,0 +1,19 @@ +import React from "react"; + +function NumbersTable({ limit }) { + const numbers = Array.from({ length: limit }, (_, i) => i + 1); + return ( +
+ {numbers.map((number) => ( +
+ {number} +
+ ))} +
+ ); +} + +export default NumbersTable; \ No newline at end of file diff --git a/src/components/RGBColorPicker.js b/src/components/RGBColorPicker.js new file mode 100644 index 0000000..e69de29 diff --git a/src/components/Random.js b/src/components/Random.js new file mode 100644 index 0000000..15e4450 --- /dev/null +++ b/src/components/Random.js @@ -0,0 +1,11 @@ +import React from "react"; + +function Random(props){ + return( +
+

Random Value between {props.min} and {props.max} = {Math.floor(Math.random() * (props.max - props.min))+ props.min}

+
+ ); +} + +export default Random; \ No newline at end of file diff --git a/src/components/Ratings.js b/src/components/Ratings.js new file mode 100644 index 0000000..846c058 --- /dev/null +++ b/src/components/Ratings.js @@ -0,0 +1,11 @@ +import React from "react"; + +function Ratings(props) { + const roundedRatings = Math.floor(props.children); + const stars = "★".repeat(roundedRatings) + "☆".repeat(5 - roundedRatings); + return ( +
{stars}
+ ) +} + +export default Ratings; \ No newline at end of file diff --git a/src/components/SingleColorPicker.js b/src/components/SingleColorPicker.js new file mode 100644 index 0000000..1a69ca6 --- /dev/null +++ b/src/components/SingleColorPicker.js @@ -0,0 +1,16 @@ +import React from "react"; + +function SingleColorPicker(props) { + const handleInputChange = (e) => { + props.onChange(e.target.value); + } + return ( +
+
+ + +
+ ) +} + +export default SingleColorPicker; \ No newline at end of file