theo/werkzeugkiste
1
0
Fork 0
mirror of https://github.com/theoleuthardt/werkzeugkiste.git synced 2026-06-13 09:37:53 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: prettier formating

Browse source
This commit is contained in:
Domenik 2025-02-20 20:49:24 +01:00
parent 544ebaa7cf
commit 7b4ef9c70b
13 changed files with 172 additions and 154 deletions
Download patch file Download diff file Expand all files Collapse all files

39
frontend/src/app/rgb-to-hex/page.tsx
View file

@ -6,12 +6,10 @@ import Footer from "../../components/Footer";
import Button from "../../components/Button";
export default function RgbToHex() {
const [loading, setLoading] = useState(false);
const [hex, setHex] = useState("");
const convertToHex = async () => {
setLoading(true);
const red = (document.getElementById("red") as HTMLInputElement).value;
@ -26,7 +24,7 @@ export default function RgbToHex() {
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ red: red, green: green, blue: blue }),
body: JSON.stringify({ red: red, green: green, blue: blue }),
},
);
if (!response.ok) {
@ -34,7 +32,6 @@ export default function RgbToHex() {
}
const hex: string = await response.text();
setHex(hex);
} catch (error) {
console.error("Error while converting:", error);
alert("Error while converting");
@ -54,10 +51,10 @@ export default function RgbToHex() {
};
const checkInput = (event: React.ChangeEvent<HTMLInputElement>) => {
const color = (document.getElementById(event.target.id) as HTMLInputElement);
const color = document.getElementById(event.target.id) as HTMLInputElement;
const colorValue = +color.value;
if (colorValue < 0 || colorValue > 255 ) {
if (colorValue < 0 || colorValue > 255) {
alert("Invalid input. Please enter a number between 0 and 255.");
}
if (colorValue < 0) {
@ -65,7 +62,7 @@ export default function RgbToHex() {
} else if (colorValue > 255) {
color.value = "255";
}
}
};
return (
<div className="h-screen w-screen bg-black text-white font-noto flex flex-col items-center">
@ -73,7 +70,9 @@ export default function RgbToHex() {
<div className="w-screen h-screen flex flex-col items-center justify-center">
<h2 className="text-5xl font-bold text-white mb-16">rgb-to-hex</h2>
<div className="border-2 border-white p-3 rounded-xl text-center text-white">
<label className="mr-2" htmlFor="red">Red:</label>
<label className="mr-2" htmlFor="red">
Red:
</label>
<input
type="number"
id="red"
@ -83,7 +82,9 @@ export default function RgbToHex() {
className="w-16 bg-black border-1 border-white text-center"
onInput={checkInput}
/>
<label className="mx-2 text-white" htmlFor="green">Green:</label>
<label className="mx-2 text-white" htmlFor="green">
Green:
</label>
<input
type="number"
id="green"
@ -93,7 +94,9 @@ export default function RgbToHex() {
className="w-16 bg-black border-1 border-white text-center"
onChange={checkInput}
/>
<label className="mx-2" htmlFor="blue">Blue:</label>
<label className="mx-2" htmlFor="blue">
Blue:
</label>
<input
type="number"
id="blue"
@ -115,19 +118,15 @@ export default function RgbToHex() {
}
onClick={convertToHex}
/>
<Button
content="clear"
onClick={clearInAndOutput}
/>
</div>
<Button content="clear" onClick={clearInAndOutput} />
</div>
<div className="p-3 rounded-xl text-center">
<output
id="hex"
className="text-blue-400 text-3xl"
>{hex}</output>
<output id="hex" className="text-blue-400 text-3xl">
{hex}
</output>
</div>
</div>
<Footer />
</div>
);
}
}