Reset all work on all iterations #1444

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open

zuzmoskvic wants to merge 26 commits into ironhack-labs:master from zuzmoskvic:new

src/App.css

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -1,5 +1,6 @@
  
    .App {

      text-align: center;

      /* text-align: center; */

      margin: 20px;

    }

    .App-logo {

    @@ -17,11 +18,11 @@
  
      background-color: #282c34;

      min-height: 100vh;

      display: flex;

      flex-direction: column;

      align-items: center;

      justify-content: center;

      /* flex-direction: column;

      /* align-items: center; */

      /* justify-content: center;  */

      font-size: calc(10px + 2vmin);

      color: white;

      color: black;

    }

    .App-link {

    @@ -36,3 +37,114 @@
  
        transform: rotate(360deg);

      }

    }

    .cardDiv {

      display: flex;

      flex-direction: row;

      padding: 20px;

      border: 1px solid black;

      width: 600px;

      margin: 20px;

    }

    .cardImage {

      padding: 20px;

    }

    .cardTextDiv {

      text-align: left;

      padding: 5px;

    }

    .langdiv {

      display: flex;

      flex-direction: row;

      padding: 20px;

      border: 1px solid black;

      width: 400px;

      margin: 20px;

    }

    .ccdiv {

      width: 500px;

      height: 250px;

      margin: 14px;

      padding: 20px;

      border-radius: 15px;

      display: flex;

      flex-direction: column;

    }

    .cardlogo {

      max-height: 60px;

      max-width: 60px;

      align-self: flex-end;

    }

    .cardnumbers {

      font-size: 50px;

    }

    .smallercard {

      font-size: 20px;

      margin: 0px;

    }

    .driverdiv {

      background-color: #485cb4;

      width: 650px;

      height: 100px;

      margin: 1%;

      padding: 1%;

      border-radius: 15px;

      display: flex;

      color: white;

      flex-direction: row;

    }

    .imgcrop {

      width: 100px;

      height: 100px;

      /* position: relative; */

      overflow: hidden;

      border-radius: 50%;

      margin-left: 20%;

    }

    .driverimg {

      /* display: inline; */

      height: 100%;

    }

    .driveinfo > p,

    h3 {

      margin: 0;

      padding: 0;

    }

    .number {

      height: 100px;

      width: 100px;

      border: 3px black solid;

      font-size: 30px;

      text-align: center;

    }

    .numbersDiv {

      display: flex;

      flex-wrap: wrap;

      max-width: 550px;

    }

    .facebookdiv {

      border: 1px black solid;

      display: flex;

      flex-direction: row;

      width: 500px;

      height: 180px;

    }

    button{

    }

src/App.js

-Original file line number
+Diff line change
@@ -1,23 +1,59 @@
-    import logo from './logo.svg';
     import './App.css';
+    import IdCard from './components/IdCard';
+    import Greetings from './components/Greetings';
+    import Random from './components/Random';
+    import LikeButton from './components/LikeButton';
+    import ClickablePicture from './components/ClickablePicture';
+    import Dice from './components/Dice';
+    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>
+        {/* Iteration 1 */}
+          <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"
+            />
+          {/* Iteration 2 */}
+            <Greetings lang="de">Ludwig</Greetings>
+            <Greetings lang="fr">François</Greetings>
+          {/* Iteration 3 */}
+            <Random min={1} max={6}/>
+            <Random min={1} max={100}/>
+          {/* Iteration 8 */}
+            <LikeButton />
+          {/* Iteration 9 */}
+            <ClickablePicture
+              img='maxence.png'
+              imgClicked='maxence-glasses.png'
+            />
+            {/* Iteration 10 */}
+            <Dice />
+            {/* Iteration 12 */}
+            <NumbersTable limit={12} />
         </div>
       );
     }
@@ Expand Down @@

src/assets/images/mastercard.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

src/components/ClickablePicture.js

-Original file line number
+Diff line change
@@ -0,0 +1,15 @@
+    import { useState } from "react";
+    function ClickablePicture({img, imgClicked}) {
+        const [isImageClicked, setIsImageClicked] = useState(false);
+        const toggleImage = () => {
+            return setIsImageClicked(!isImageClicked);
+        }
+        return <div>
+            <img onClick={toggleImage} src={isImageClicked ? img : imgClicked}  alt="Ironhacker"></img>
+        </div>
+    }
+    export default ClickablePicture;

src/components/Dice.js

-Original file line number
+Diff line change
@@ -0,0 +1,30 @@
+    import { useState } from 'react';
+    import emptyDice 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 DiceArray = [emptyDice, dice1, dice2, dice3, dice4, dice5, dice6];
+        const [isDiceEmpty, setIsDiceEmpty] = useState(true);
+        const toggleDice = () => {
+            setIsDiceEmpty(!isDiceEmpty);
+        }
+        const randomDiceImage = () => {
+            const randomIndex = Math.floor(Math.random() * 6);
+            const diceImage = DiceArray[randomIndex];
+            return diceImage;
+        }
+        return <div>
+            <img onClick={toggleDice} src={isDiceEmpty ? emptyDice : randomDiceImage()} width="200" alt="Dice"/>
+        </div>
+    }
+    export default Dice;

src/components/Greetings.js

-Original file line number
+Diff line change
@@ -0,0 +1,16 @@
+    function Greetings({lang, children}) {
+        const chooseGreeting = (lang) => {
+            if (lang==="de") {
+                return "Hallo"
+            }
+            if (lang==="fr") {
+                return "Bonjour"
+            }
+            else return "Nothing"
+        };
+        return <div>
+            <p>{chooseGreeting(lang)} {children} </p>
+        </div>
+    }
+    export default Greetings;

src/components/IdCard.js

-Original file line number
+Diff line change
@@ -0,0 +1,13 @@
+    function IdCard({lastName, firstName, gender, height, birth, picture}){
+        return <div>
+            <img src={picture} alt="Id of person"/>
+            <p>First name: {firstName}</p>
+            <p>Last name: {lastName}</p>
+            <p>Gender: {gender}</p>
+            <p>Height: {height/100}m</p>
+            <p>Birth: {birth.toLocaleDateString()}</p>
+        </div>
+    }
+    export default IdCard;

src/components/LikeButton.js

-Original file line number
+Diff line change
@@ -0,0 +1,20 @@
+    import { useState } from "react";
+    function LikeButton() {
+        const [count, setCount] = useState(0);
+        const colorsArray = ['purple','blue','green','yellow','orange','red']
+        const buttonCounter = () => { return setCount(count+1)}
+        return <div>
+            <button
+                onClick={buttonCounter}
+                style={{padding: "10px", margin: "10px", color: "white", backgroundColor: colorsArray[count % 6]
+                }}
+                >
+                {count} Likes
+            </button>
+        </div>
+    }
+    export default LikeButton;

src/components/NumbersTable.js

-Original file line number
+Diff line change
@@ -0,0 +1,23 @@
+    function NumbersTable({limit}) {
+        const NumbersArray=[];
+        for (let i=0; i<limit; i++) {
+            NumbersArray.push(i);
+        }
+        return <div>
+            {NumbersArray.map((number) => {
+                return(
+                <div
+                    style={{border:"2px solid black", padding: "10px", height: "50px", width: "50px", backgroundColor: number % 2 === 0  ? "white" : "red"}}
+                    >
+                        {number}
+                </div>)
+            })}
+        </div>
+    }
+    export default NumbersTable;

src/components/Random.js

-Original file line number
+Diff line change
@@ -0,0 +1,11 @@
+    function Random({min,max}) {
+        let calculateRandom;
+        calculateRandom = (min,max) => Math.floor(Math.random() * (max - min) + min);
+        return <div>
+            <p>Random value between 1 and {max} is {calculateRandom(min,max)}</p>
+        </div>
+    }
+    export default Random;

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Reset all work on all iterations #1444

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Reset all work on all iterations #1444

Are you sure you want to change the base?

Uh oh!

Reset all work on all iterations #1444

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing