diff --git a/src/components/Greetings.jsx b/src/components/Greetings.jsx
index bed39ad4d..9bd66f2fc 100644
--- a/src/components/Greetings.jsx
+++ b/src/components/Greetings.jsx
@@ -1,15 +1,11 @@
function Greetings(props) {
- let language = props.lang
- let children = props.children
- let greeting = ""
- if(language === "de"){
- greeting = "Hallo"
- } if(language === "fr"){
- greeting = "Bonjour"
- } if(language === "es"){
- greeting = "Hola"
- } if(language === "en"){
- greeting = "Hello"
+ let language = props.lang;
+ let children = props.children;
+ let greeting = "";
+ if(language === "de"){greeting = "Hallo"
+ } if(language === "fr"){greeting = "Bonjour"
+ } if(language === "es"){greeting = "Hola"
+ } if(language === "en"){greeting = "Hello"
}
return (
diff --git a/src/components/IdCard.jsx b/src/components/IdCard.jsx
index ddf923799..04f7cd50e 100644
--- a/src/components/IdCard.jsx
+++ b/src/components/IdCard.jsx
@@ -1,15 +1,15 @@
-function IdCard({eachCard}) {
+function IdCard({firstName, lastName, gender, height, birth, picture}) {
return (
-
+
-
Name: {eachCard.firstName}
-
Last name: {eachCard.lastName}
-
Gender: {eachCard.gender}
-
Height: {eachCard.height}
-
Birth: {eachCard.birth}
+
Name: {firstName}
+
Last name: {lastName}
+
Gender: {gender}
+
Height: {height}
+
Birth: {birth.toLocaleDateString()}
)
diff --git a/src/components/RGBColorPicker.jsx b/src/components/RGBColorPicker.jsx
index f5331d28a..b16dcb528 100644
--- a/src/components/RGBColorPicker.jsx
+++ b/src/components/RGBColorPicker.jsx
@@ -1,15 +1,14 @@
-
import SingleColorPicker from "./SingleColorPicker"
import {useState} from "react";
function RGBColorPicker() {
- const [rValue, setRValue] = useState("");
- const [gValue, setGValue] = useState("");
- const [bValue, setBValue] = useState("");
+ const [rValue, setRValue] = useState(0);
+ const [gValue, setGValue] = useState(0);
+ const [bValue, setBValue] = useState(0);
return (
<>
-
+
{
+ switch (color) {
+ case "r" : setBackgroundColor ( `rgb(${value},0,0)`);
+ break;
+ case "g" : setBackgroundColor ( `rgb(0,${value},0)`);
+ break;
+ case "b" : setBackgroundColor ( `rgb(0,0,${value})`);
+ break;
+ default: break;
+ }
+ },[value] )
+
+
+
return (
-
-
+
+
+
-
+
+
{bgColor}
+
{value}
-
- {/* Iteration 1 - IdCard */}
-
Iteration 1 - IdCard:
-
-
-
-
- {/* Iteration 2 - Greetings */}
-
Iteration 2 - Greetings:
-
Ludwig
-
François
-
- {/* Iteration 3 - Random */}
-
Iteration 3 - Random:
-
-
-
- {/* Iteration 4 - Boxcolor */}
-
Iteration 4 - Boxcolor:
-
-
-
- {/* Iteration 5 - CreditCard*/}
-
Iteration 5 - CreditCard:
-
-
-
-
-
-
- {/* Iteration 6 - Rating */}
-
Iteration 6 - Rating:
-
0
-
1.49
-
1.5
-
3
-
4
-
5
-
- {/* Iteration 7 - DriverCard */}
-
Iteration 7 - DriverCard:
-
-
-
-
- {/* Iteration 8 - Like Button */}
-
Iteration 8 - Like Button:
-
-
-
- {/* Iteration 9 - Clickable image */}
-
Iteration 9 - Clickable image:
-
-
- {/* Iteration 10 - Dice */}
-
Iteration 10 - Dice:
-
-
- {/* Iteration 11 - Carousel */}
-
Iteration 11 - Carousel:
-
-
- {/* Iteration 12 - NumbersTable */}
-
Iteration 12 - NumbersTable:
-
-
- {/* Iteration 13 - Facebook */}
-
Iteration 13 - Facebook:
-
-
- {/* Iteration 15 - Sign up page */}
-
Iteration 15 - Sign up page:
-
- {/* Iteration 16 - RGBColorPicker */}
-
IIteration 16 - RGBColorPicker:
-
- Hello World!
-
-
- )
-}
-
-export default Boxcolor
diff --git a/src/components/Carousel.jsx b/src/components/Carousel.jsx
deleted file mode 100644
index cf8bdbe7a..000000000
--- a/src/components/Carousel.jsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import {useState} from "react";
-
-function Carousel({images}) {
- const [index, setIndex] = useState(0);
- const goRight = () => {setIndex( (index + 1) % images.length) };
- const goLeft = () => { setIndex ( (index - 1 + images.length ) % images.length )};
-
- return (
-
-
-
-
-
-
-
-
-
-
•••• •••• •••• {lastFour}
-
Expires {details.expirationMonth}/{details.expirationYear} {details.bank}
-
{details.owner}
-
-
-
-
-
-
-
-
-
{drivercard.name}
-
{drivercard.rating}
-
{drivercard.car.model} - {drivercard.car.licensePlate}
-
-
-
-
-
-
-
-
-
-
First name: {profile.firstName}
-
Last name: {profile.lastName}
-
Country: {profile.country}
-
Type: {profile.isStudent ? 'Student' : 'Teacher'}
-
-
-
-
{greeting}, {children}
-
-
-
-
-
-
Name: {firstName}
-
Last name: {lastName}
-
Gender: {gender}
-
Height: {height}
-
Birth: {birth.toLocaleDateString()}
-
-
-
-
- );
-}
-
-export default LikeButton;
diff --git a/src/components/NumbersTable.jsx b/src/components/NumbersTable.jsx
deleted file mode 100644
index 0aed9f7fa..000000000
--- a/src/components/NumbersTable.jsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import '../App.css';
-
-function NumbersTable({ limit }) {
- const numberArray = [];
- for (let i = 1; i <= limit; i++) {
- numberArray.push(i);
- }
-
- return (
-
- {numberArray.map((number) => (
-
- ))}
-
-
{ setRValue(event.target.value)} }
- />
-
- { setGValue(event.target.value) } }
- />
-
- { setBValue(event.target.value) } }
- />
-
-
-
-
rgb({rValue},{gValue},{bValue})
-
-
Random value between {props.min} and {props.max} is {result}
-
{(newItem.nationality==="fr") ? "Bonjour" : (newItem.nationality==="de" ? "Hallo" : "Hello")}!
- Your email is: {newItem.email}
- Your email is correct
-
-
- )
-}
-
-export default SignupPage
diff --git a/src/components/SingleColorPicker.jsx b/src/components/SingleColorPicker.jsx
deleted file mode 100644
index 26f763cd4..000000000
--- a/src/components/SingleColorPicker.jsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import {useState, useEffect} from "react";
-
-function SingleColorPicker({color, value, onChange}) {
- const [bgColor, setBackgroundColor] = useState("");
-
-
- useEffect (() => {
- switch (color) {
- case "r" : setBackgroundColor ( `rgb(${value},0,0)`);
- break;
- case "g" : setBackgroundColor ( `rgb(0,${value},0)`);
- break;
- case "b" : setBackgroundColor ( `rgb(0,0,${value})`);
- break;
- default: break;
- }
- },[value] )
-
-
-
- return (
-
-
-
-
-
-
-
-
{bgColor}
-
{value}
-
-
+ {/* Iteration 1 */}
+
+
+
);
}
diff --git a/src/components/IdCard.js b/src/components/IdCard.js
new file mode 100644
index 000000000..6f88e3709
--- /dev/null
+++ b/src/components/IdCard.js
@@ -0,0 +1,21 @@
+// lastName: A string
+// firstName: A string
+// gender: A string, 'male' or 'female'
+// height: A number
+// birth: A date
+// picture: A string
+
+
+function IdCard({lastName, firstName, gender, height, birth, picture}){
+ return
+
+
First name: {firstName}
+
Last name: {lastName}
+
Gender: {gender}
+
Height: {height/100}m
+
Birth: {birth.toLocaleDateString()}
+
+
);
}
diff --git a/src/components/Greetings.js b/src/components/Greetings.js
new file mode 100644
index 000000000..8638fc8f1
--- /dev/null
+++ b/src/components/Greetings.js
@@ -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
+
{chooseGreeting(lang)} {children}
+
+}
+
+export default Greetings;
\ No newline at end of file
diff --git a/src/components/IdCard.js b/src/components/IdCard.js
index 6f88e3709..1b4e6e79d 100644
--- a/src/components/IdCard.js
+++ b/src/components/IdCard.js
@@ -1,14 +1,6 @@
-// lastName: A string
-// firstName: A string
-// gender: A string, 'male' or 'female'
-// height: A number
-// birth: A date
-// picture: A string
-
-
function IdCard({lastName, firstName, gender, height, birth, picture}){
return
-
+
First name: {firstName}
Last name: {lastName}
Gender: {gender}
From 513e5592893c4c234a90c09ad05144d44b42754a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CZuzana?=
Date: Sat, 26 Jul 2025 12:41:19 +0200
Subject: [PATCH 22/26] Iteration 3
---
src/App.js | 5 +++++
src/components/Random.js | 11 +++++++++++
2 files changed, 16 insertions(+)
create mode 100644 src/components/Random.js
diff --git a/src/App.js b/src/App.js
index 73a4701b5..51faa83d8 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,6 +1,7 @@
import './App.css';
import IdCard from './components/IdCard';
import Greetings from './components/Greetings';
+import Random from './components/Random';
function App() {
@@ -29,6 +30,10 @@ function App() {
{/* Iteration 2 */}
Ludwig
François
+
+ {/* Iteration 3 */}
+
+
);
}
diff --git a/src/components/Random.js b/src/components/Random.js
new file mode 100644
index 000000000..5d5328f9e
--- /dev/null
+++ b/src/components/Random.js
@@ -0,0 +1,11 @@
+
+
+function Random({min,max}) {
+ let calculateRandom;
+ calculateRandom = (min,max) => Math.floor(Math.random() * (max - min) + min);
+ return
+
Random value between 1 and {max} is {calculateRandom(min,max)}
+
+}
+
+export default Random;
\ No newline at end of file
From eb034e632fefd3d5b8b9058d43bb078469a78d25 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CZuzana?=
Date: Sat, 26 Jul 2025 13:07:09 +0200
Subject: [PATCH 23/26] Iteration 8
---
src/App.js | 5 +++++
src/components/LikeButton.js | 20 ++++++++++++++++++++
2 files changed, 25 insertions(+)
create mode 100644 src/components/LikeButton.js
diff --git a/src/App.js b/src/App.js
index 51faa83d8..0232ef98f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,6 +2,7 @@ import './App.css';
import IdCard from './components/IdCard';
import Greetings from './components/Greetings';
import Random from './components/Random';
+import LikeButton from './components/LikeButton';
function App() {
@@ -34,6 +35,10 @@ function App() {
{/* Iteration 3 */}
+
+ {/* Iteration 8 */}
+
+
);
}
diff --git a/src/components/LikeButton.js b/src/components/LikeButton.js
new file mode 100644
index 000000000..93a7af540
--- /dev/null
+++ b/src/components/LikeButton.js
@@ -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
+
+
+}
+
+export default LikeButton;
\ No newline at end of file
From adb7fc66ae80ee5176570c387423a4763ac7ff1b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CZuzana?=
Date: Sun, 27 Jul 2025 10:09:19 +0200
Subject: [PATCH 24/26] Iteration 9
---
src/App.js | 8 +++++++-
src/components/ClickablePicture.js | 15 +++++++++++++++
2 files changed, 22 insertions(+), 1 deletion(-)
create mode 100644 src/components/ClickablePicture.js
diff --git a/src/App.js b/src/App.js
index 0232ef98f..1719e7c8d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -3,6 +3,7 @@ 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';
function App() {
@@ -38,7 +39,12 @@ function App() {
{/* Iteration 8 */}
-
+
+ {/* Iteration 9 */}
+