pyramid.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Pyramid Generator</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
      /* Custom font and simple styling for better look */
      body {
        font-family: "Inter", sans-serif;
        background-color: #f3f4f6;
      }
      /* Style the monospace output area to show the pyramid clearly */
      #pyramidOutput {
        white-space: pre; /* Important: preserves spacing and newlines */
        font-family: "Courier New", monospace;
        line-height: 1.1;
        overflow-x: auto;
        min-height: 150px;
        text-align: left; /* Ensure the text alignment doesn't interfere */
        font-size: 1rem;
      }
    </style>
  </head>
  <body class="p-4 sm:p-8">
    <div
      class="max-w-4xl mx-auto bg-white p-6 sm:p-10 rounded-xl shadow-2xl border border-gray-100"
    >
      <h1 class="text-3xl font-extrabold text-indigo-700 mb-4">
        Text Pyramid Generator
      </h1>
      <p class="text-gray-600 mb-6">
        Enter a character, the number of rows, and select the direction to
        generate your pyramid. This tool implements the required
        <code>pyramid(char, rows, isDownwards)</code> function.
      </p>

      <!-- Input Controls -->
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        <div>
          <label
            for="patternChar"
            class="block text-sm font-medium text-gray-700 mb-1"
            >Pattern Character (String)</label
          >
          <input
            type="text"
            id="patternChar"
            value="o"
            maxlength="1"
            class="w-full p-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500 text-lg"
          />
        </div>
        <div>
          <label
            for="numRows"
            class="block text-sm font-medium text-gray-700 mb-1"
            >Number of Rows (Integer)</label
          >
          <input
            type="number"
            id="numRows"
            value="7"
            min="1"
            max="50"
            class="w-full p-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500 text-lg"
          />
        </div>
        <div class="flex items-end">
          <div class="w-full">
            <label class="block text-sm font-medium text-gray-700 mb-1"
              >Direction</label
            >
            <div class="mt-1">
              <label class="inline-flex items-center mr-4">
                <input
                  type="radio"
                  name="direction"
                  value="up"
                  checked
                  id="dirUp"
                  class="form-radio text-indigo-600 h-4 w-4"
                  onchange="generatePyramid()"
                />
                <span class="ml-2 text-gray-700">Vertex Up (false)</span>
              </label>
              <label class="inline-flex items-center">
                <input
                  type="radio"
                  name="direction"
                  value="down"
                  id="dirDown"
                  class="form-radio text-indigo-600 h-4 w-4"
                  onchange="generatePyramid()"
                />
                <span class="ml-2 text-gray-700">Vertex Down (true)</span>
              </label>
            </div>
          </div>
        </div>
      </div>

      <!-- Output Display -->
      <div
        id="outputContainer"
        class="bg-gray-800 text-white p-6 rounded-lg shadow-inner"
      >
        <h2 class="text-xl font-semibold text-indigo-300 mb-3">
          Generated Pyramid:
        </h2>
        <pre id="pyramidOutput" class="text-yellow-300"></pre>
      </div>
    </div>

    <script>
      // --- Core JavaScript Logic ---

      /**
       * Generates a text pyramid using the specified character, row count, and direction.
       * * @param {string} char - The pattern character to repeat (e.g., 'o', '*').
       * @param {number} rows - The number of rows (height) of the pyramid.
       * @param {boolean} isDownwards - If true, the vertex faces downwards (inverted). If false, it faces upwards.
       * @returns {string} The full pyramid string, starting and ending with a newline character.
       */
      function pyramid(char, rows, isDownwards) {
        // 1. Basic validation and setup
        char = String(char)[0] || "*"; // Ensure char is a string and handle empty/invalid input
        rows = Math.max(1, Math.min(50, parseInt(rows) || 4)); // Clamp rows between 1 and 50

        let pyramidString = "\n"; // Starts with a newline character (as required)
        const maxWidth = 2 * rows - 1; // Max characters in the base row

        // 2. Determine the order of row sizes (i, where 1 <= i <= rows)
        let rowIndices = [];
        if (isDownwards) {
          // Downward pyramid: Largest row first, decreasing to 1
          for (let i = rows; i >= 1; i--) {
            rowIndices.push(i);
          }
        } else {
          // Upward pyramid: Smallest row first, increasing to rows
          for (let i = 1; i <= rows; i++) {
            rowIndices.push(i);
          }
        }

        // 3. Construct the pyramid row by row
        for (const i of rowIndices) {
          // Calculate the number of characters for the current row (1, 3, 5, 7, ...)
          const charCount = 2 * i - 1;

          // Calculate the number of leading spaces needed for centering
          const spaceCount = (maxWidth - charCount) / 2;

          // Create the required strings
          const leadingSpaces = " ".repeat(spaceCount);
          const pattern = char.repeat(charCount);

          // Append the row: leading spaces + pattern + newline (no trailing spaces)
          pyramidString += leadingSpaces + pattern + "\n";
        }

        // The loop structure ensures the final string starts and ends with a newline.
        return pyramidString;
      }

      /**
       * Reads input values and generates the pyramid, updating the UI.
       */
      function generatePyramid() {
        // Get values from the input fields
        const char = document.getElementById("patternChar").value;
        const rows = document.getElementById("numRows").value;
        const isDownwards = document.getElementById("dirDown").checked;

        // Generate the pyramid string
        const resultString = pyramid(char, rows, isDownwards);

        // Update the output area
        document.getElementById("pyramidOutput").textContent = resultString;
      }

      // Run the generator once the page loads to show the default pyramid
      window.onload = generatePyramid;
    </script>
  </body>
</html>