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

Merge branch 'main' into feat/qr-code-generator

Browse source
This commit is contained in:
Theo Leuthardt 2025-02-21 15:25:53 +01:00 • committed by GitHub
commit 5cdfc5b861
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 148 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -71,7 +71,7 @@ export default function RgbToHex() {
<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:
red:
</label>
<input
type="number"
@ -83,7 +83,7 @@ export default function RgbToHex() {
onInput={checkInput}
/>
<label className="mx-2 text-white" htmlFor="green">
Green:
green:
</label>
<input
type="number"
@ -95,7 +95,7 @@ export default function RgbToHex() {
onChange={checkInput}
/>
<label className="mx-2" htmlFor="blue">
Blue:
blue:
</label>
<input
type="number"

20
frontend/src/app/word-counter/layout.tsx Normal file
View file

@ -0,0 +1,20 @@
import React from "react";
import type { Metadata } from "next";
import { toolLinks } from "@/constants";
export const metadata: Metadata = {
title: toolLinks[7].title,
description: "Counter for words in text!",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={`antialiased`}>{children}</body>
</html>
);
}

84
frontend/src/app/word-counter/page.tsx Normal file
View file

@ -0,0 +1,84 @@
"use client";
import React, { useState } from "react";
import Navbar from "../../components/Navbar";
import Footer from "../../components/Footer";
import Button from "../../components/Button";
export default function WordCounter() {
const [loading, setLoading] = useState(false);
const [output, setOutput] = useState("");
const countWords = async () => {
setLoading(true);
const input = (document.getElementById("input") as HTMLInputElement).value;
try {
const response = await fetch(
process.env.backend_url + "/api/word-counter",
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ input: input }),
},
);
if (!response.ok) {
return new Error(`Error: ${response.statusText}`);
}
const output: string = await response.text();
setOutput(output);
} catch (error) {
console.error("Error while converting:", error);
alert("Error while converting");
} finally {
setLoading(false);
}
};
const clearInAndOutput = () => {
setOutput("");
const input = document.getElementById("input") as HTMLInputElement;
input.value = "";
};
return (
<div className="h-screen w-screen bg-black text-white font-noto flex flex-col items-center">
<Navbar renderHomeLink={true} />
<div className="w-screen h-screen flex flex-col items-center justify-center">
<h2 className="text-5xl font-bold text-white mb-16">word-counter</h2>
<div className="border-2 border-white p-3 rounded-xl text-center text-white flex flex-col justify-between">
<label className="mr-2 m" htmlFor="input">
input text:
</label>
<textarea
id="input"
name="input"
className="resize max-h-80 max-w-screen-md field-sizing-content bg-black border-1 border-white text-center"
/>
</div>
<div className={"flex flex-row items-center gap-4 mt-4 mb-16"}>
<Button
content={
loading ? (
<div className="h-10 w-10 border-8 border-blue-100 border-t-blue-500 rounded-full animate-spin" />
) : (
"count words"
)
}
onClick={countWords}
/>
<Button content="clear" onClick={clearInAndOutput} />
</div>
<div className="p-3 rounded-xl text-center">
<output id="output" className="text-blue-400 text-3xl">
{output && "word count: " + output}
</output>
</div>
</div>
<Footer />
</div>
);
}