<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
>
<
title
>The Factorial Calculator</
title
>
</
head
>
<
body
class="bg-gray-100 flex items-center
justify-center h-screen">
<
div
class="max-w-md w-full bg-white p-8
rounded-lg shadow-lg border-2
border-green-500">
<
h1
class
=
"text-3xl font-bold text-center mb-8"
>
Factorial Calculator
</
h1
>
<
div
class
=
"mb-4"
>
<
p
class
=
"text-gray-700 mb-2"
>
Enter a number to calculate its factorial:
</
p
>
<
input
type
=
"number"
id
=
"numberInput"
class="w-full border border-gray-300
rounded-md py-2 px-3
focus:outline-none
focus:border-blue-500">
</
div
>
<
div
class
=
"flex justify-between mb-4"
>
<
button
id
=
"calculateButton"
class="w-full bg-blue-500 text-white
rounded-md py-2 px-4
hover:bg-blue-600
focus:outline-none mr-2">
Calculate Factorial
</
button
>
<
button
id
=
"clearButton"
class="w-full bg-gray-300 text-gray-700
rounded-md py-2 px-4 hover:bg-gray-400
focus:outline-none ml-2">
Clear
</
button
>
</
div
>
<
div
id
=
"result"
class
=
"text-center text-lg font-semibold"
></
div
>
</
div
>
<
script
>
const calculateButton = document.getElementById('calculateButton');
const clearButton = document.getElementById('clearButton');
const result = document.getElementById('result');
calculateButton.addEventListener('click', () => {
const numberInput = parseInt(document.getElementById('numberInput')
.value);
if (isNaN(numberInput) || numberInput <
0
) {
result
.textContent
=
'Please enter a valid non-negative integer!'
;
} else {
result.textContent =
`Factorial of ${numberInput} is: ${factorial(numberInput)}`;
}
});
clearButton.addEventListener('click', () => {
document.getElementById('numberInput').value = '';
result.textContent = '';
});
function factorial(n) {
if (n === 0 || n === 1) {
return 1;
} else {
return n * factorial(n - 1);
}
}
</
script
>
</
body
>
</
html
>