Generate pyramids with JavaScript for-loop

I need help writing a JavaScript function to create pyramid patterns using a for loop. The pyramid should be constructed with stars or a similar character, depending on the specified size. Could someone provide guidance or examples for achieving such a structure in JavaScript?

Hey! Try this simple JavaScript code to create a pyramid pattern:

function createPyramid(rows) {
  for (let i = 1; i <= rows; i++) {
    console.log(' '.repeat(rows - i) + '*'.repeat(2 * i - 1));
  }
}

createPyramid(5);

Adjust createPyramid(5); to change the pyramid size.

When building a pyramid pattern in JavaScript, a fresh approach involves focusing on constructing the shape with clarity. Let’s explore how you can do this differently:

function drawPyramid(levels, character = '*') {
  for (let level = 0; level < levels; level++) {
    let spaces = ' '.repeat(levels - level - 1);
    let stars = character.repeat(2 * level + 1);
    console.log(spaces + stars + spaces);
  }
}

drawPyramid(5, '#');

Key Points:

  • Custom Character: This code allows you to specify any character, not just stars, which offers added flexibility.
  • Simple Execution: The main logic uses repeat to handle spacing and character multiplication efficiently.
  • Level Control: Adjust drawPyramid(5, '#'); as needed to modify the pyramid’s height or change its appearance.

This method makes customizing and understanding pyramid creation in JavaScript straightforward, ensuring clear results.

Building a pyramid pattern using JavaScript can be a fascinating way to strengthen your understanding of loops and string manipulation. Instead of duplicating previous answers, consider this unique approach, which also integrates user input for enhanced interaction:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pyramid Pattern</title>
</head>
<body>
  <h2>Pyramid Generator</h2>
  <label for="pyramidHeight">Enter the height of the pyramid:</label>
  <input type="number" id="pyramidHeight" min="1" value="5">
  <button onclick="generatePyramid()">Generate</button>
  
  <pre id="output"></pre>

  <script>
    function generatePyramid() {
      const levels = document.getElementById('pyramidHeight').value;
      let pyramid = '';

      for (let i = 0; i < levels; i++) {
        const spaces = ' '.repeat(levels - i - 1);
        const stars = '*'.repeat(2 * i + 1);
        pyramid += spaces + stars + '\n';
      }

      document.getElementById('output').textContent = pyramid;
    }
  </script>
</body>
</html>

Explanation:

  1. User Interaction: This HTML script provides a basic interface where users can specify the pyramid’s height. Upon clicking ‘Generate’, the pyramid is displayed.

  2. Functionality:

    • The generatePyramid() function captures user input (levels) and constructs the pyramid using two nested loops.
    • The outer loop handles each level of the pyramid, determining the number of spaces and stars.
    • The repeat() method is crucial for formatting lines with appropriate spaces and stars.
  3. Output: The constructed pattern is shown directly on the webpage, making it an interactive and immediate demonstration of string manipulation and loop usage in JavaScript.

This code provides a refreshing perspective by merging dynamic user interaction with foundational programming concepts, allowing for versatile and immediate demonstration. Adjust the pyramid’s character, design, or logic to further explore and adapt this approach.

Hey there! If you’re looking to build a pyramid pattern in JavaScript with a cool twist, let me offer you another perspective using an array join method to keep things tidy and efficient:

function pyramidPattern(height, symbol = '*') {
  for (let row = 1; row <= height; row++) {
    const spaces = Array(height - row + 1).join(' ');
    const pattern = Array(2 * row).join(symbol);
    console.log(spaces + pattern);
  }
}

pyramidPattern(5, '@');

This way, you can customize the symbol used for the pyramid, and it keeps the code straightforward. Let me know if this approach suits your needs!