+ );
+}
diff --git a/src/components/LikeButton.jsx b/src/components/LikeButton.jsx
new file mode 100644
index 0000000..92fff80
--- /dev/null
+++ b/src/components/LikeButton.jsx
@@ -0,0 +1,55 @@
+import React, {useState} from 'react'
+
+export default function LikeButton() {
+ let colors = [
+ "red",
+ "yellow",
+ "green",
+ "blue",
+ "violet",
+ "orange",
+ "pink",
+ "brown",
+ "gray",
+
+ ]
+
+ const [count, setCount] = useState(0);
+ const [color, setColor] = useState("red"); // Initial color
+
+//function to generate random color
+ function getRandomColor() {
+ return colors[Math.floor(Math.random() * colors.length)];
+ }
+
+//change color with every click & add count with every click
+ function increaseLikeCount() {
+ setCount(count + 1);
+ setColor(getRandomColor());
+ }
+//set color as bgcolor
+ let style = {
+ backgroundColor: color,
+ height: "2rem",
+ borderRadius: "10px",
+ color: "white",
+ border: "none",
+ padding: "15px",
+ alignItems: "center",
+ display: "flex",
+ }
+
+ // function resetButton(){
+ // setCount(0);
+ // }
+
+
+
+ return (
+
+
+ {/* */}
+
+ )
+}
+
diff --git a/src/components/NumbersTable.jsx b/src/components/NumbersTable.jsx
new file mode 100644
index 0000000..8cef202
--- /dev/null
+++ b/src/components/NumbersTable.jsx
@@ -0,0 +1,32 @@
+import React from 'react'
+
+export default function NumbersTable({ limit }) {
+
+let countList = []
+ for (let i = 1; i < limit; i++){
+ countList.push(i);
+ }
+ return (
+
+ {countList.map((number)=>(
+
{number}
+ ))}
+
+
+ )
+}
diff --git a/src/components/RGBColorPicker.jsx b/src/components/RGBColorPicker.jsx
new file mode 100644
index 0000000..679bf14
--- /dev/null
+++ b/src/components/RGBColorPicker.jsx
@@ -0,0 +1,66 @@
+import React, { useState } from "react";
+import SingleColorPicker from "./SingleColorPicker";
+
+export default function RGBColorPicker() {
+ const [red, setRed] = useState(0);
+ const [green, setGreen] = useState(0);
+ const [blue, setBlue] = useState(0);
+
+ const onChangeRed = (event) => {
+ setRed(Number(event.target.value)); // Update the red value
+ };
+
+ const onChangeGreen = (event) => {
+ setGreen(Number(event.target.value)); // Update the green value
+ };
+
+ const onChangeBlue = (event) => {
+ setBlue(Number(event.target.value)); // Update the blue value
+ };
+
+ return (
+
+
+ {/* Red Input */}
+
+
+
+
+
+ {/* Green Input */}
+
+
+
+
+
+ {/* Blue Input */}
+
+
+
+
+
+ {/* Result Color Box */}
+
+
+ {/* RGB Value Display */}
+
RGB({red}, {green}, {blue})
+
+ );
+}
diff --git a/src/components/Random.jsx b/src/components/Random.jsx
new file mode 100644
index 0000000..e9e0816
--- /dev/null
+++ b/src/components/Random.jsx
@@ -0,0 +1,17 @@
+import React, { useState, useEffect } from 'react';
+
+export default function Random({ min, max }) {
+ const [randomNumber, setRandomNumber] = useState(null);
+
+ //use effect to not make changes with the same numbers
+ useEffect(() => {
+ const number = Math.floor(Math.random() * (max - min + 1)) + min;
+ setRandomNumber(number);
+ }, [min, max]); // Depend on min and max to recalculate if they change
+
+ return (
+
+
Random Value between {min} and {max} {" => "} {randomNumber}
+
+ );
+}
diff --git a/src/components/Rating.js b/src/components/Rating.js
new file mode 100644
index 0000000..a991171
--- /dev/null
+++ b/src/components/Rating.js
@@ -0,0 +1,18 @@
+import React from 'react'
+
+export default function Rating({children}) {
+
+ const roundedRating = Math.round(children);
+ const stars = [];
+
+ for (let i = 0; i < 5; i++) { // we loop to fill the array with either the following conditions
+ if (i < roundedRating) { //check if i matches the number given or is smaller than.
+ stars.push(★) // thats a filled star
+ } else {
+ stars.push(☆) // span pushes on that index, an empty star
+ }
+ }
+ return (
+
{stars}
+ )
+}
diff --git a/src/components/SingleColorPicker.jsx b/src/components/SingleColorPicker.jsx
new file mode 100644
index 0000000..651ee66
--- /dev/null
+++ b/src/components/SingleColorPicker.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+export default function SingleColorPicker({ color, value, onChange }) {
+ return (
+
+
+
+
+ );
+}
diff --git a/src/logo.svg b/src/logo.svg
deleted file mode 100644
index 9dfc1c0..0000000
--- a/src/logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file