alvin/ict-algemeen-opdrachten
1
0
Fork 0
mirror of https://github.com/Alvin-Zilverstand/ict-algemeen-opdrachten.git synced 2026-03-06 11:06:59 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add comments and styling enhancements to Fibonacci generator application

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

21
JavaScript/fibonacci/fibonacci.js
View File

@@ -1,19 +1,22 @@
// Function to generate the first N numbers of the Fibonacci sequence
function generateFibonacci(n) { function generateFibonacci(n) {
if (n <= 0) return []; if (n <= 0) return []; // Return an empty array if n is less than or equal to 0
if (n === 1) return [0]; if (n === 1) return [0]; // Return [0] if n is 1
if (n === 2) return [0, 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++) { 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() { function displayFibonacci() {
const n = parseInt(document.getElementById('fibonacciInput').value); const n = parseInt(document.getElementById('fibonacciInput').value); // Get the input value and convert it to an integer
const result = generateFibonacci(n); const result = generateFibonacci(n); // Generate the Fibonacci sequence
document.getElementById('fibonacciResult').innerText = result.join(', '); 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); document.getElementById('generateButton').addEventListener('click', displayFibonacci);

14
JavaScript/fibonacci/index.html
View File

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

7
JavaScript/fibonacci/styles.css
View File

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