done

Author: alexmvarela

src/App.jsx

@@ -1,11 +1,19 @@
 import "./App.css";
-import BoxColor from "./components/boxColor/BoxColor";
-import CreditCard from "./components/creditCard/CreditCard";
-import DriverCard from "./components/driverCard/DriverCard";
+import BoxColor from "./components/box-color/BoxColor";
+import Carousel from "./components/carousel/Carousel";
+import ClickablePicture from "./components/clickable-picture/ClickablePicture";
+import CreditCard from "./components/credit-card/CreditCard";
+import Dice from "./components/dice/Dice";
+import DriverCard from "./components/driver-card/DriverCard";
+import Facebook from "./components/facebook/Facebook";
 import Greetings from "./components/greetings/Greetings";
-import IdCard from "./components/idCard/IdCard";
+import IdCard from "./components/id-card/IdCard";
+import LikeButton from "./components/like-button/LikeButton";
+import NumbersTable from "./components/numbers-table/NumbersTable";
 import Random from "./components/random/Random";
 import Rating from "./components/rating/Rating";
+import RgbColorPicker from "./components/rgb-color-picker/RgbColorPicker";
+import SignupPage from "./components/signup-page/SignupPage";
 
 function App() {
   return (
@@ -65,8 +73,38 @@ function App() {
       <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" }} />
 
       <h2>Iteration 8 | State: LikeButton</h2>
+      <LikeButton colors={["purple", "blue", "green", "yellow", "orange", "red"]} />
+      <LikeButton colors={["purple", "blue", "green", "yellow", "orange", "red"]} />
+
+      <h2>Iteration 9: State: ClickablePicture</h2>
+      <ClickablePicture img="https://randomuser.me/api/portraits/women/44.jpg" imgClicked="../src/assets/images/glasses.png" />
+
+      <h2>Iteration 10 | State: Dice</h2>
+      <Dice />
+
+      <h2>Iteration 11 | State: Carousel</h2>
+      <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"
+        ]} 
+      />
+
+      <h2>Iteration 12 | List and Keys | NumbersTable</h2>
+      <NumbersTable limit={24} />
+
+      <h2>Iterations 13 & 14 | List and Keys - FaceBook</h2>
+      <Facebook />
+
+      <h2>Iteration 15 | Form - SignupPage</h2>
+      <SignupPage />
+
+      <h2>Iteration 16 | Lifting State Up - RGBColorPicker</h2>
+      <RgbColorPicker />
+
     </div>
   );
 }
 
-export default App;
+export default App;

src/components/BoxColor/BoxColor.jsx src/components/box-color/BoxColor.jsxsrc/components/BoxColor/BoxColor.jsx renamed to src/components/box-color/BoxColor.jsx

@@ -0,0 +1,33 @@
+.carousel {
+    background-color: whitesmoke;
+    display: flex;  
+    flex-direction: column;
+    align-items: center;
+    margin: 0.5rem;
+    padding: 0.5rem;   
+}
+
+.carousel img {
+    width: 175px;
+}
+
+.carousel .btns {
+    margin-top: 0.5rem;
+    width: 175px;
+    display: flex;
+    justify-content: space-between;
+}
+
+.carousel button {
+    background-color: blueviolet;
+    color: white;
+    font-weight: bold;
+    padding: 0.5rem 1rem;
+    border-radius: 10px;
+    border: none;
+    min-width: 70px;
+}
+
+.carousel button:hover {
+    cursor: pointer;
+}

src/components/carousel/Carousel.css

@@ -0,0 +1,27 @@
+import "./Carousel.css";
+import { useState } from "react";
+
+function Carousel({ images }) {
+
+    const [ index, setIndex ] = useState(0);
+
+    const handleLeft = () => {
+        index ? setIndex(index - 1) : setIndex(images.length - 1);
+    }
+
+    const handleRight = () => {
+        (index === images.length - 1) ? setIndex(0) : setIndex(index + 1);
+    }
+
+    return (
+        <div className="carousel">
+            <img src={images[index]} />
+            <div className="btns">
+                <button onClick={handleLeft} >Left</button>
+                <button onClick={handleRight} >Right</button>
+            </div>
+        </div>
+    );
+}
+
+export default Carousel;

src/components/carousel/Carousel.jsx

@@ -0,0 +1,31 @@
+.div-clickable-container {
+    display: flex;
+    justify-content: center;
+}
+
+.div-clickable-picture {
+    position: relative;
+    width: 200px;
+    height: auto;
+}
+
+.picture {
+    width: 100%;
+    height: auto;
+}
+
+.glasses {
+ width: 120px;
+ position: absolute;
+ top: 40px;
+ left: 30px;
+ transform: rotate(5deg);
+}
+
+.picture:hover {
+    cursor: pointer;
+}
+
+.glasses:hover {
+    cursor: pointer;
+}

src/components/clickable-picture/ClickablePicture.css

@@ -0,0 +1,22 @@
+import "./ClickablePicture.css";
+import { useState } from "react";
+
+function ClickablePicture({ img, imgClicked }) {
+
+    const [ toggle, setToggle ] = useState(false);
+
+    const handleToggle = () => {
+        setToggle(!toggle);
+    }
+
+    return(
+        <div className="div-clickable-container" >
+            <div className="div-clickable-picture">
+                <img className="picture" src={img} onClick={handleToggle} />
+                { toggle && (<img className="glasses" src={imgClicked} onClick={handleToggle} />) }
+            </div>
+        </div>
+    );
+}
+
+export default ClickablePicture;

src/components/clickable-picture/ClickablePicture.jsx

@@ -0,0 +1,7 @@
+.dice {
+    width: 200px;
+}
+
+.dice:hover {
+    cursor: pointer;
+}

src/components/creditCard/CreditCard.css src/components/credit-card/CreditCard.csssrc/components/creditCard/CreditCard.css renamed to src/components/credit-card/CreditCard.css

@@ -0,0 +1,23 @@
+import "./Dice.css";
+import { useState } from "react";
+
+function Dice() {
+
+    const [ randomDice, setRandomDice ] = useState(Math.floor(Math.random() * 6) + 1);
+
+    const handleClick = () => {
+        setRandomDice("-empty");
+       
+        setTimeout(() => {
+            setRandomDice(Math.floor(Math.random() * 6) + 1);
+        }, 1000);
+    }
+   
+    return (
+        <div>
+            <img className="dice" onClick={handleClick} src={`../src/assets/images/dice${randomDice}.png`} />
+        </div>
+    );
+}
+
+export default Dice;