JavaScript Alphabet Pattern 32

Posted in JavaScript Tutorial

Updated on Jan 10, 2024

By Mari Selvan

👁️ 106 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

JavaScript Alphabet Pattern 32

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, k;
for(i=65; i<=69; i++)
{
 for(j=69; j>=i; j--)
  document.write("<div></div>");
 for(k=65; k<=i; k++)
  document.write("<div>"+String.fromCharCode(k)+"</div>");
 n = k - 1;
 for(m=65; m<i; m++)
  document.write("<div>"+String.fromCharCode(--n)+"</div>");
 document.write("<br>");
}
</script>
</body>
</html>

💻 Testing the Program

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

Output

    A
   ABA
  ABCBA
 ABCDCBA
ABCDEDCBA

🧠 How the Program Works

Let's break down the logic behind the code:

Declare three variables: i, j, and k.
The outer loop runs when i takes values from 65 to 69, inclusive (ASCII values for 'A' to 'E').
Inside the outer loop, the first inner loop (for(j=69; j>=i; j--)) runs. It starts with j at 69 and decrements j until it reaches the value of i. This loop generates empty <div> elements. The number of empty divs generated decreases with each iteration of the outer loop.
The second inner loop (for(k=65; k<=i; k++)) runs next. It starts with k at 65 and increments k until it reaches the value of i. Within this loop, it writes <div> elements containing characters corresponding to ASCII values from 'A' to the current value of k.
n is set to k - 1.
The third inner loop (for(m=65; m<i; m++)) runs. It starts with m at 65 and increments m until it's one less than the value of i. Within this loop, it writes <div> elements containing characters corresponding to ASCII values from 'A' to one less than the current value of n.
After all the inner loops within the outer loop, a <br> element is written to create a line break, moving to the next line for the next iteration of the outer loop.
The outer loop continues for the remaining values of i (66 to 69), repeating the process and generating the pattern of empty and character-filled <div> elements as shown in the script.

💯 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!