Mirror Halves With Spacing

Beginner
⏱️ 10 min read
📚 Updated: Aug 2025
🎯 2 Code Examples
Two halves + blanks

What You'll Learn

This program prints two mirrored halves in each row. The left half grows from A to the row letter. The right half shrinks from the row letter back to A. Between them, we print blank cells so the halves stay centered and aligned.

⭐ Pattern Output

Output
A        A
AB      BA
ABC    CBA
ABCD  DCBA
ABCDEEDCBA
1

Node.js / console version

In Node, it’s easiest to build strings using spaces for the “blank cells”.

JavaScript
const A = "A".charCodeAt(0);
const top = "E".charCodeAt(0);

for (let i = A; i <= top; i++) {
  let left = "";
  for (let j = A; j <= top; j++) left += j <= i ? String.fromCharCode(j) : " ";

  let right = "";
  for (let k = top; k >= A; k--) right += k > i ? " " : String.fromCharCode(k);

  console.log(left + right);
}
2

Browser version (document.write + div)

This matches the reference: fixed-width cells (empty <div>) create the spaces between halves.

HTML
<!DOCTYPE html>
<html>
<head>
  <style>
    div.cell {
      display: inline-block;
      text-align: center;
      width: 13px;
    }
  </style>
</head>
<body>
<script>
  const A = 65;
  const top = 69;
  for (let i = A; i <= top; i++) {
    for (let j = A; j <= top; j++) {
      if (j <= i) document.write(\"<div class=\\\"cell\\\">\" + String.fromCharCode(j) + \"</div>\");
      else document.write(\"<div class=\\\"cell\\\"></div>\");
    }
    for (let k = top; k >= A; k--) {
      if (k > i) document.write(\"<div class=\\\"cell\\\"></div>\");
      else document.write(\"<div class=\\\"cell\\\">\" + String.fromCharCode(k) + \"</div>\");
    }
    document.write(\"<br>\");
  }
</script>
</body>
</html>

🧠 How It Works

1

Outer loop: i from A to E

Each row grows the visible letters by one step.

5 rows
2

Left half: j from A to E

If j <= i, print the letter; otherwise print a space (blank cell).

Ascending
3

Right half: k from E to A

If k > i print space; else print the mirrored letter (k descending).

Mirror
=

Shrinking center gap

The blank gap shrinks by two each row until the last line becomes ABCDEEDCBA.

Key Takeaways

1

Two halves per row: ascending and descending.

2

Blank cells maintain alignment.

3

Last row has no blanks: ABCDEEDCBA.

4

Time complexity is O(n²).

❓ Frequently Asked Questions

Those are blank cells that keep the right half pushed to the right until the left half grows. Each row reduces the blank gap by two cells.
You can, but alignment may break because normal HTML spacing collapses. Fixed-width cells are the simplest way to keep columns aligned.
Two inner loops each scan \(n\) columns for \(n\) rows: O(n²).

More JavaScript alphabet patterns

Browse the full list or try star and number pattern tutorials.

Next: Program 20 →
Did you know?

The gap shrinks by 2 cells each row because you add one cell to the left half and one to the right half.

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

10 people found this page helpful