Add comments and styling enhancements to Fibonacci generator application

This commit is contained in:
vista-man
2025-01-27 20:37:24 +01:00
parent 0f81802c1b
commit 5fd81c8920
3 changed files with 26 additions and 16 deletions

View File

@@ -1,19 +1,22 @@
// Function to generate the first N numbers of the Fibonacci sequence
function generateFibonacci(n) {
if (n <= 0) return [];
if (n === 1) return [0];
if (n === 2) return [0, 1];
if (n <= 0) return []; // Return an empty array if n is less than or equal to 0
if (n === 1) return [0]; // Return [0] if n is 1
if (n === 2) return [0, 1]; // Return [0, 1] if n is 2
const fib = [0, 1];
const fib = [0, 1]; // Initialize the array with the first two Fibonacci numbers
for (let i = 2; i < n; i++) {
fib.push(fib[i - 1] + fib[i - 2]);
fib.push(fib[i - 1] + fib[i - 2]); // Calculate the next Fibonacci number and add it to the array
}
return fib;
return fib; // Return the array containing the first N Fibonacci numbers
}
// Function to display the Fibonacci sequence on the webpage
function displayFibonacci() {
const n = parseInt(document.getElementById('fibonacciInput').value);
const result = generateFibonacci(n);
document.getElementById('fibonacciResult').innerText = result.join(', ');
const n = parseInt(document.getElementById('fibonacciInput').value); // Get the input value and convert it to an integer
const result = generateFibonacci(n); // Generate the Fibonacci sequence
document.getElementById('fibonacciResult').innerText = result.join(', '); // Display the result on the webpage
}
// Add an event listener to the button to call the displayFibonacci function when clicked
document.getElementById('generateButton').addEventListener('click', displayFibonacci);

View File

@@ -4,14 +4,14 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fibonacci Generator</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="styles.css"> <!-- Link to the CSS file for styling -->
</head>
<body>
<h1>Fibonacci Generator</h1>
<label for="fibonacciInput">Enter a number:</label>
<input type="number" id="fibonacciInput" min="1">
<button id="generateButton">Generate</button>
<p id="fibonacciResult"></p>
<script src="fibonacci.js"></script>
<h1>Fibonacci Generator</h1> <!-- Page title -->
<label for="fibonacciInput">Enter a number:</label> <!-- Label for the input field -->
<input type="number" id="fibonacciInput" min="1"> <!-- Input field for entering the number -->
<button id="generateButton">Generate</button> <!-- Button to generate the Fibonacci sequence -->
<p id="fibonacciResult"></p> <!-- Paragraph to display the result -->
<script src="fibonacci.js"></script> <!-- Link to the JavaScript file -->
</body>
</html>

View File

@@ -1,3 +1,4 @@
/* Style for the body element */
body {
font-family: Arial, sans-serif;
display: flex;
@@ -9,19 +10,23 @@ body {
background-color: #f0f0f0;
}
/* Style for the h1 element */
h1 {
color: #333;
}
/* Style for the label, input, and button elements */
label, input, button {
margin: 10px 0;
}
/* Style for the input and button elements */
input, button {
padding: 10px;
font-size: 16px;
}
/* Style for the button element */
button {
background-color: #007BFF;
color: white;
@@ -29,10 +34,12 @@ button {
cursor: pointer;
}
/* Style for the button element when hovered */
button:hover {
background-color: #0056b3;
}
/* Style for the paragraph displaying the result */
#fibonacciResult {
margin-top: 20px;
font-size: 18px;