From 8684cd3c6f5b706b86669ed2ace461ae64ef7d88 Mon Sep 17 00:00:00 2001
From: Siri Chandana <chandanasiri004@gmail.com>
Date: Thu, 21 May 2026 13:34:46 +0530
Subject: [PATCH] Fix Fibonacci input visibility and validation issues

---
 web-app/js/projects.js           | 24 +++++++++++++++++++-----
 web-app/js/projects/fibonacci.js | 31 +++++++++++++++++++++++++------
 2 files changed, 44 insertions(+), 11 deletions(-)

diff --git a/web-app/js/projects.js b/web-app/js/projects.js
index b6192b5..308065a 100644
--- a/web-app/js/projects.js
+++ b/web-app/js/projects.js
@@ -1534,14 +1534,28 @@ function initFibonacci() {
     const ctx = canvas.getContext('2d');
     
     function generateFibonacci() {
-        const n = parseInt(termsInput.value) || 10;
+        const value = termsInput.value.trim();
+        const n = parseInt(value);
+
+        // Validation
+        if (value === '' || isNaN(n) || n <= 0) {
+            display.innerHTML = `
+                <p class="fib-error">
+                    Please enter a number greater than 0
+                </p>
+            `;
+
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            return;
+        }
+
         display.innerHTML = '';
-        
+    
         let fib = [0, 1];
         for (let i = 2; i < n; i++) {
-            fib[i] = fib[i-1] + fib[i-2];
+            fib[i] = fib[i - 1] + fib[i - 2];
         }
-        
+
         fib.slice(0, n).forEach((num, index) => {
             const numEl = document.createElement('div');
             numEl.className = 'fib-number';
@@ -1549,7 +1563,7 @@ function initFibonacci() {
             numEl.style.animationDelay = `${index * 0.1}s`;
             display.appendChild(numEl);
         });
-        
+
         drawSpiral(fib.slice(0, Math.min(n, 12)));
     }
     
diff --git a/web-app/js/projects/fibonacci.js b/web-app/js/projects/fibonacci.js
index d8be954..5b081f2 100644
--- a/web-app/js/projects/fibonacci.js
+++ b/web-app/js/projects/fibonacci.js
@@ -51,7 +51,8 @@ function getFibonacciHTML() {
             #fibTerms{
                 padding:13px;
                 background-color:var(--bg-color);
-                border:1px solid white;
+                color: var(--text-color);
+                border:1px solid var(--text-color);
                 outline:none;
                 border-radius:30px;
             }
@@ -61,6 +62,11 @@ function getFibonacciHTML() {
                 align-items:center;
                 justify-content:center;
             }
+            .fib-error{
+                color:red;
+                font-weight:bold;
+                margin-top:1rem;
+            }
         </style>
     `;
 }
@@ -73,14 +79,27 @@ function initFibonacci() {
     const ctx = canvas.getContext('2d');
     
     function generateFibonacci() {
-        const n = parseInt(termsInput.value) || 10;
+        const value = termsInput.value.trim();
+        const n = parseInt(value);
+
+        // Validation
+        if (value === '' || isNaN(n) || n <= 0) {
+            display.innerHTML = `
+                <p class="fib-error">
+                    Please enter a number greater than 0
+                </p>
+            `;
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            return;
+        }
+
         display.innerHTML = '';
-        
+    
         let fib = [0, 1];
         for (let i = 2; i < n; i++) {
-            fib[i] = fib[i-1] + fib[i-2];
+            fib[i] = fib[i - 1] + fib[i - 2];
         }
-        
+
         fib.slice(0, n).forEach((num, index) => {
             const numEl = document.createElement('div');
             numEl.className = 'fib-number';
@@ -88,7 +107,7 @@ function initFibonacci() {
             numEl.style.animationDelay = `${index * 0.1}s`;
             display.appendChild(numEl);
         });
-        
+
         drawSpiral(fib.slice(0, Math.min(n, 12)));
     }