LLMs are truly are AGI!
import { useMemo, useState } from "react";
/*
Saar, with very humble respect, this component is making Fizz Buzz
from number 1 until the number which you are entering.
Please accept this small programming offering.
*/
export default function FizzBuzz() {
/*
Saar, this state is remembering the ending number.
It is beginning with 100, because this number is nice and respectful.
*/
const [limit, setLimit] = useState(100);
/*
Saar, this function is deciding what word each number shall receive.
Number divisible by both 3 and 5 is getting FizzBuzz.
Divisible by only 3 is getting Fizz.
Divisible by only 5 is getting Buzz.
Other number is staying as number.
*/
const fizzBuzz = (number) => {
if (number % 15 === 0) {
return "FizzBuzz";
}
if (number % 3 === 0) {
return "Fizz";
}
if (number % 5 === 0) {
return "Buzz";
}
return number;
};
/*
Saar, useMemo is politely preventing the list from being remade
when React is rendering for unrelated reasons.
*/
const sequence = useMemo(() => {
const safeLimit = Math.max(1, Math.min(Number(limit) || 1, 1000));
return Array.from({ length: safeLimit }, (_, index) =>
fizzBuzz(index + 1)
);
}, [limit]);
/*
Saar, here is the visible part for the honorable reader.
*/
return (
<section
aria-labelledby="fizz-buzz-title"
style={{
fontFamily: "system-ui",
}}
>
<h2 id="fizz-buzz-title">Fizz Buzz</h2>
<label htmlFor="fizz-buzz-limit">
Saar, please enter the ending number:
</label>
<input
id="fizz-buzz-limit"
type="number"
min="1"
max="1000"
value={limit}
onChange={(event) => setLimit(event.target.value)}
/>
<ol>
{sequence.map((value, index) => (
<li key={index}>{value}</li>
))}
</ol>
</section>
);
}
