Pattern Program In JavaScript

Square Star Pattern

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<html>
<head>
</head>
<body>
<h2 style="color:green;text-align: center;margin-top: 20px;" id="val">Square Pattern Program<hr></h2>
<div style="color:blue;text-align: center;margin-top: 20px;font-size: 30px" id="output"></div>
</body>
<script>
let n = 5;
let string = "";
for(let i = 0; i < n; i++) {
for(let j = 0; j < n; j++) {
string += "*";
}
string += "<br>";
}
document.getElementById('output').innerHTML= string;
</script>
</html>
<html> <head> </head> <body> <h2 style="color:green;text-align: center;margin-top: 20px;" id="val">Square Pattern Program<hr></h2> <div style="color:blue;text-align: center;margin-top: 20px;font-size: 30px" id="output"></div> </body> <script> let n = 5; let string = ""; for(let i = 0; i < n; i++) { for(let j = 0; j < n; j++) { string += "*"; } string += "<br>"; } document.getElementById('output').innerHTML= string; </script> </html>
<html>
    <head>       
    </head>
    <body>        
        <h2 style="color:green;text-align: center;margin-top: 20px;" id="val">Square Pattern Program<hr></h2>
        <div style="color:blue;text-align: center;margin-top: 20px;font-size: 30px" id="output"></div>
    </body>
    <script>
      let n = 5;    
      let string = "";
      for(let i = 0; i < n; i++) { 
        for(let j = 0; j < n; j++) { 
            string += "*";
        }    
        string += "<br>";
     }
     
document.getElementById('output').innerHTML= string;
</script>
</html>
Output: 

Hollow Square Star Pattern

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<html>
<head>
<title>Hollow Square Patter</title>
</head>
<body>
<h2 style="color:green;text-align: center;margin-top: 30px;" id="val">Hollow Square Pattern<hr></h2>
<div style="color:blue;text-align: center;margin-top: 30px;font-size: 30px" id="output"></div>
</body>
<script>
let n = 6;
let string = "";
for(let i = 0; i < n; i++) {
for(let j = 0; j < n; j++) {
if(i == 0 || i == n-1){
string += "*";
}else if(j == 0 || j == n-1){
string += "*";
}else{
string += "&nbsp;&nbsp;";
}
}
string += "<br>";
}
document.getElementById('output').innerHTML= string;
</script>
</html>
<html> <head> <title>Hollow Square Patter</title> </head> <body> <h2 style="color:green;text-align: center;margin-top: 30px;" id="val">Hollow Square Pattern<hr></h2> <div style="color:blue;text-align: center;margin-top: 30px;font-size: 30px" id="output"></div> </body> <script> let n = 6; let string = ""; for(let i = 0; i < n; i++) { for(let j = 0; j < n; j++) { if(i == 0 || i == n-1){ string += "*"; }else if(j == 0 || j == n-1){ string += "*"; }else{ string += "&nbsp;&nbsp;"; } } string += "<br>"; } document.getElementById('output').innerHTML= string; </script> </html>
<html>
    <head> 
      <title>Hollow Square Patter</title>
    </head>
    <body>        
        <h2 style="color:green;text-align: center;margin-top: 30px;" id="val">Hollow Square Pattern<hr></h2>
        <div style="color:blue;text-align: center;margin-top: 30px;font-size: 30px" id="output"></div>
    </body>
    <script>
      let n = 6;    
      let string = "";
      for(let i = 0; i < n; i++) {          
          for(let j = 0; j < n; j++) { 
              if(i == 0 || i == n-1){
                string += "*";
              }else if(j == 0 || j == n-1){
                string += "*"; 
              }else{
                string += "&nbsp;&nbsp;";
              }
          }    
        string += "<br>";
     }
     
document.getElementById('output').innerHTML= string; 
</script>
</html>

 

Left Triangle Pattern

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<html>
<head>
</head>
<body>
<h2 style="color:green;margin-top: 30px;" id="val">Left Triangle Pattern<hr></h2>
<div style="color:blue;margin-top: 30px;font-size: 30px" id="output"></div>
</body>
<script>
let n = 5;
let string = "";
for(let i = 1; i <= n; i++) {
for(let j = 0; j <i; j++) {
string+= "*";
}
string += "<br>";
}
document.getElementById('output').innerHTML= string;
console.log(string);
</script>
</html>
<html> <head> </head> <body> <h2 style="color:green;margin-top: 30px;" id="val">Left Triangle Pattern<hr></h2> <div style="color:blue;margin-top: 30px;font-size: 30px" id="output"></div> </body> <script> let n = 5; let string = ""; for(let i = 1; i <= n; i++) { for(let j = 0; j <i; j++) { string+= "*"; } string += "<br>"; } document.getElementById('output').innerHTML= string; console.log(string); </script> </html>
<html>
    <head>       
    </head>
    <body>        
        <h2 style="color:green;margin-top: 30px;" id="val">Left Triangle Pattern<hr></h2>
        <div style="color:blue;margin-top: 30px;font-size: 30px" id="output"></div>
    </body>
    <script>
      let n = 5;    
      let string = "";
      for(let i = 1; i <= n; i++) {          
          for(let j = 0; j <i; j++) { 
              string+= "*";
          }
        string += "<br>";
     }
     
document.getElementById('output').innerHTML= string;
console.log(string);
</script>
</html>

 

Back to top button