Add Fibonacci generator application with HTML, CSS, and JavaScript implementation

2026-03-06 11:06:59 +01:00 · 2025-01-27 20:36:34 +01:00
parent 83cbbd1a4a
commit 0f81802c1b
3 changed files with 76 additions and 0 deletions
--- a/JavaScript/fibonacci/fibonacci.js
+++ b/JavaScript/fibonacci/fibonacci.js
@@ -0,0 +1,19 @@
+function generateFibonacci(n) {
+    if (n <= 0) return [];
+    if (n === 1) return [0];
+    if (n === 2) return [0, 1];
+
+    const fib = [0, 1];
+    for (let i = 2; i < n; i++) {
+        fib.push(fib[i - 1] + fib[i - 2]);
+    }
+    return fib;
+}
+
+function displayFibonacci() {
+    const n = parseInt(document.getElementById('fibonacciInput').value);
+    const result = generateFibonacci(n);
+    document.getElementById('fibonacciResult').innerText = result.join(', ');
+}
+
+document.getElementById('generateButton').addEventListener('click', displayFibonacci);
--- a/JavaScript/fibonacci/index.html
+++ b/JavaScript/fibonacci/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <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">
+</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>
+</body>
+</html>
--- a/JavaScript/fibonacci/styles.css
+++ b/JavaScript/fibonacci/styles.css
@@ -0,0 +1,40 @@
+body {
+    font-family: Arial, sans-serif;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    margin: 0;
+    background-color: #f0f0f0;
+}
+
+h1 {
+    color: #333;
+}
+
+label, input, button {
+    margin: 10px 0;
+}
+
+input, button {
+    padding: 10px;
+    font-size: 16px;
+}
+
+button {
+    background-color: #007BFF;
+    color: white;
+    border: none;
+    cursor: pointer;
+}
+
+button:hover {
+    background-color: #0056b3;
+}
+
+#fibonacciResult {
+    margin-top: 20px;
+    font-size: 18px;
+    color: #555;
+}