HTML Code

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Star Pattern 11 - Try It</title>
</head>
<body>
  <h1>Hollow Diamond Inside Square Star Pattern</h1>
  <p>Open the HTML code and change <code>rows</code>, then click Run.</p>

  <pre id="output"></pre>

  <script>
    (() => {
      // Change this value to try different sizes
      const rows = 5;
      const height = 2 * rows - 1;
      const width = 2 * rows;

      let result = "";
      for (let line = 1; line <= height; line++) {
        if (line === 1 || line === height) {
          result += "*".repeat(width) + "\n";
          continue;
        }

        const i = line <= rows ? line : (2 * rows - line);
        const leftStars = rows - i + 1;
        const gap = 2 * (i - 1);

        result += "*".repeat(leftStars) + " ".repeat(gap) + "*".repeat(leftStars) + "\n";
      }

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

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

JavaScript Star Pattern 11 (Try It)