Final Product

Code

Fibonacci.html

<!-- The HTML file for the Fibonacci Pokeballs Generator -->
<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Head section with meta tags and styles -->
  <title>SSJ | Fibonacci</title>
  <!-- Bootstrap and custom fonts styles -->
  <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" type="text/css">
  <!-- Plugin CSS for DataTables -->
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
  <!-- Custom CSS -->
  <link rel="stylesheet" href="css/main.css" type="text/css">
  <link rel="stylesheet" type="text/css" href="styles.css">
  <!-- jQuery and DataTables scripts -->
  <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>var define = null;</script>
  <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
</head>

<!-- Custom styles for the Fibonacci page -->
<style>
  .middle {
    width: fit-content;
    margin-top: 30px;
    margin-right: 30px;
    margin-left: auto;
    margin-right: auto;
  }

  .numberBtn {
    display: table-cell;
    width: 100px;
    height: 100px;
    background-color: dimgrey;
    color: white;
    text-align: center;
    vertical-align: middle;
    font-size: 25px;
    border: 1px solid white;
  }

  .numberBtn:hover {
    background-color: grey;
  }

  .fnBtn {
    background-color: white;
    width: 80px;
    height: 30px;
    margin: 5px;
  }

  #scoreBox {
    font-size: 30px;
  }
</style>

<body>
  <!-- Navigation bar -->
  <nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
    <!-- Navigation content -->
    <!-- ... -->
  </nav>

  <!-- Header section -->
  <header>
    <!-- Header content -->
    <!-- ... -->
  </header>

  <!-- Main content section for Fibonacci Pokeballs Generator -->
  <main class="middle">
    <h1>Fibonacci Pokeballs Generator</h1>
    <div style="max-width: 600px;">
      <!-- User input and control elements -->
      <label for="nthInput">Enter the value of n:</label>
      <input type="number" id="nthInput" placeholder="Enter nth value" />
      <label for="methodSelect">Select method:</label>
      <select id="methodSelect">
        <option value="recursive">Recursive</option>
        <option value="iterative">Iterative</option>
        <option value="matrix">Matrix</option>
      </select>
      <button onclick="generatePokeballs()">Generate Pokeballs</button>
    </div>
    <!-- Container for displaying Pokeballs and generation time -->
    <div id="pokeballContainer"></div>
    <div id="generationTime"></div> <!-- New element to display generation time -->
  </main>

  <!-- JavaScript scripts -->
  <script src="fibonacci.js"></script>
  <script src="app2.js"></script>
</body>
</html>

app2.js

// Function to generate Pokeballs based on user input
function generatePokeballs() {
  // Get user input for n
  const nthInput = document.getElementById('nthInput');
  const nthValue = parseInt(nthInput.value);

  // Validate user input
  if (isNaN(nthValue) || nthValue < 0) {
    alert('Please enter a valid non-negative integer for n.');
    return;
  }

  // Warn the user about potential browser hang for large n
  if (nthValue > 25 && !confirm("Numbers larger than 25 will hang the browser. Continue!")) {
    return;
  }

  // Get selected method
  const methodSelect = document.getElementById('methodSelect');
  const method = methodSelect.value;

  // Measure the start time for performance analysis
  const startTime = performance.now();

  let result;

  // Choose the Fibonacci calculation method based on user selection
  switch (method) {
    case 'recursive':
      result = fibonacciRecursive(nthValue);
      break;
    case 'iterative':
      result = fibonacciIterative(nthValue);
      break;
    case 'matrix':
      result = fibonacciMatrix(nthValue);
      break;
    default:
      result = 0;
  }

  // Measure the end time and calculate generation time
  const endTime = performance.now();
  const generationTime = endTime - startTime;

  // Display the generated Pokeballs and generation time
  displayPokeballs(result, generationTime);
}

// Function to display Pokeballs and generation time
function displayPokeballs(count, generationTime) {
  const pokeballContainer = document.getElementById('pokeballContainer');
  pokeballContainer.innerHTML = '';

  // Create Pokeballs based on the count
  for (let i = 0; i < count; i++) {
    const pokeball = createPokeball(i + 1);
    pokeballContainer.appendChild(pokeball);
  }

  // Display the generation time
  const generationTimeElement = document.getElementById('generationTime');
  generationTimeElement.innerText = `Generation Time: ${generationTime.toFixed(2)} ms`;
}

// Function to create a single Pokeball element
function createPokeball(number) {
  const pokeball = document.createElement('div');
  pokeball.className = 'pokeball';
  pokeball.innerText = number;
  return pokeball;
}

fibonacci.js

// Recursive Fibonacci calculation
function fibonacciRecursive(n) {
  if (n <= 1) return n;
  return fibonacciRecursive(n - 1) + fibonacciRecursive(n - 2);
}

// Iterative Fibonacci calculation
function fibonacciIterative(n) {
  if (n <= 1) return n;

  let prev = 0;
  let current = 1;

  for (let i = 2; i <= n; i++) {
    const next = prev + current;
    prev = current;
    current = next;
  }

  return current;
}

// Matrix-based Fibonacci calculation
function power(matrix, n) {
  if (n <= 1) return matrix;

  let result = power(matrix, Math.floor(n / 2));
  result = multiply(result, result);

  if (n % 2 !== 0) {
    const baseMatrix = [[1, 1], [1, 0]];
    result = multiply(result, baseMatrix);
  }

  return result;
}

// Helper function to multiply two matrices
function multiply(matrix1, matrix2) {
  const a = matrix1[0][0] * matrix2[0][0] + matrix1[0][1] * matrix2[1][0];
  const b = matrix1[0][0] * matrix2[0][1] + matrix1[0][1] * matrix2[1][1];
  const c = matrix1[1][0] * matrix2[0][0] + matrix1[1][1] * matrix2[1][0];
  const d = matrix1[1][0] * matrix2[0][1] + matrix1[1][1] * matrix2[1][1];

  return [[a, b], [c, d]];
}

// Function to calculate Fibonacci using matrix method
function fibonacciMatrix(n) {
  const baseMatrix = [[1, 1], [1, 0]];
  const resultMatrix = power(baseMatrix, n - 1);
  return resultMatrix[0][0];
}

styles.css

/* General styling for the entire webpage */
body {
  font-family: 'Arial', sans-serif;
  background: linear-gradient(180deg, #6cb5f7, #98a0f5);
  margin: 0;
  padding: 0;
}

/* Container styling for the main content */
.container {
  max-width: 800px;
  margin: 50px auto;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Header 1 styling */
h1 {
  text-align: center;
  color: #333;
}

/* Styling for various div elements */
div {
  margin-bottom: 20px;
}

/* Label styling */
label {
  display: block;
  margin-bottom: 5px;
  color: #333;
}

/* Styling for input, select, and button elements */
input,
select,
button {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
}

/* Button styling */
button {
  background-color: #4caf50;
  color: white;
  border: none;
  padding: 15px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

/* Hover effect for button */
button:hover {
  background-color: #45a049;
}

/* Styling for the Pokeball container */
#pokeballContainer {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 600px;
}

/* Styling for individual Pokeballs */
.pokeball {
  width: 40px;
  height: 40px;
  background-color: #ff5f5f;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-weight: bold;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

/* Styling for the generation time display */
#generationTime {
  text-align: center;
  margin-top: 10px;
  color: #333;
}

Struggles and Reflection

Performance Concerns:

The recursive Fibonacci calculation method (fibonacciRecursive) can be computationally expensive for larger values of n. It leads to repeated calculations and can cause performance issues. The code includes a warning about potential browser hang for n greater than 25. This indicates a limitation in the current approach and could be a point of improvement.

User Experience:

The user interface lacks feedback during the generation process. Users might not be aware that the calculation is ongoing, especially for larger values of n. The alert for invalid input is a basic form of error handling. A more user-friendly approach could involve displaying error messages on the webpage itself.

Code Structure:

The code doesn't employ modern JavaScript features or frameworks for better organization and maintainability. Using a framework like React or Vue.js could enhance the structure and readability of the code.

Styling and Responsiveness:

The styling is somewhat basic, and the overall layout might not be fully responsive. Enhancing the styling and ensuring responsiveness could improve the visual appeal and user experience, especially on different devices.

Lack of Comments:

While the code has some comments, certain complex sections, especially the matrix-based Fibonacci calculation, could benefit from more detailed explanations for better understanding.

Dependency Management:

The code relies on external dependencies like Bootstrap, Font Awesome, and DataTables. There's no mention of how these dependencies are managed or versioned, which might lead to compatibility issues in the long run.

In reflection, addressing these struggles could lead to a more robust, user-friendly, and maintainable application. Regular code reviews, testing, and adherence to best practices would contribute to the overall improvement of the codebase.

Analytics/Key Commits

Frontend Backend Code helped out on Shivansh's account as I had trouble logging in to mine for a about a week. initial fibonacci.html ---- updated fibonacci.html ---- FINAL fibonacci.html, fibonacci.js, app2.js, styles.css Plan)

SSJcoders / ssj-backend

Shaurya Goel Individual Review Ticket #5