JavaScript Alphabet Pattern 20

Posted in JavaScript Tutorial

Updated on Jan 10, 2024

By Mari Selvan

👁️ 89 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

JavaScript Alphabet Pattern 20

Here`s a program that prints the above alphabet pattern using JavaScript Programming:

example.html

Copied

<!DOCTYPE html>
<html>
 <head>
  <style>
   div{ 
    display: inline-block;
    text-align: center;
    width: 13px;
   }
  </style>
 </head>
<body>

<script>
var i, j;
for(i=65; i<=69; i++)
{
 for(j=69; j>=65; j--)
 {
  if(j > i)
   document.write("<div></div>");
  else
   document.write("<div>"+String.fromCharCode(j)+"</div>");
  }
 document.write("<br>");
}
</script>
</body>
</html>

💻 Testing the Program

When you run the above program, it will print the following output:

Output

    A
   BA
  CBA
 DCBA
EDCBA

🧠 How the Program Works

Let's break down the logic behind the code:

The program starts by declaring two variables i and j using the var keyword. These variables will be used as loop counters in the subsequent loops.
The outer loop for(i=65; i<=69; i++) runs five times, starting from the ASCII value of 'A' (65) and ending at the ASCII value of 'E' (69).
Inside the outer loop, there's an inner loop for(j=69; j>=65; j--), which also runs five times. It starts from the ASCII value of 'E' (69) and goes down to the ASCII value of 'A' (65).
The inner loop contains a conditional statement:

if(j > i) checks whether the current value of j (which corresponds to the inner loop counter) is greater than the current value of i (which corresponds to the outer loop counter). If this condition is true, it means we're in a position where a placeholder <div> element should be written to maintain the pattern.
If the condition is true, document.write("<div></div>"); is executed, which writes an empty <div> element to the HTML using the document.write() method.
If the condition is false (i.e., j is less than or equal to i), it means we're at a position where an <div> element containing a character should be written to the HTML.
In this case, String.fromCharCode(j) is used to convert the ASCII value j into a character. The character is then inserted into a <div> element like so: document.write("<div>"+String.fromCharCode(j)+"</div>");.

After the inner loop completes for each value of i, a <br> (line break) is inserted using document.write("<br>"); to move to the next line for the next row of characters.
This process repeats until the outer loop completes all five iterations.

💯 Tips for Enhancement:

Explore the versatility of this pattern by adjusting its parameters. Whether you increase or decrease the size, tweak the spacing, or modify the characters used, each change opens up a world of possibilities, allowing you to customize and create your unique visual effects.

✔ Conclusion:

Creating visually appealing patterns is not only a fun endeavour but also a great way to enhance your programming or design skills. We hope this tutorial has inspired you to explore the world of creative coding. Share your creations with us, and let your imagination run wild!

🤗 Closing Call-to-Action:

We'd love to see your unique interpretations of the alphabet pattern. Share your creations in the comments below, and don't hesitate to reach out if you have any questions or suggestions for future tutorials. Happy coding!