How to make reverse asterisk Triangle with JavaScript using 'for' loop

Question

I want to make a reverse triangle using 'for' loop, which should look like this:

*****
 ****
  ***
   **
    *

This what I got:

*****
****
***
**
*

And this is my code:

function rightTriangle(n) {
  for (var i = 0; i <= n; i++) {
    for (var j = n - 1; j >= i; j--) {
      document.write('*');
    }
    document.write('<br>');
  }
}
rightTriangle(5);

Please help me out with this task, I would be so appreciated!

Sagar V · Answer 1 · 2017-03-24T10:12:26.537

3

Add the below code to leave the intendation

for(var k=0; k<i; k++){
    document.write("&nbsp;");
}

function rightTriangle (n) {
    for (var i = 0; i <= n; i++) {
        for(var k=0; k<i; k++){
          document.write("&nbsp;");
        }
        for (var j = n-1; j >= i; j--) {
            document.write('*');
        }
        document.write('<br>');
    }
}
rightTriangle(5);

html{
  font-family:monospace;
}

edited Mar 24 '17 at 10:12

answered Mar 24 '17 at 09:57

Sagar V

11,083
7
41
62

2

...and probably a fixed-width font. – T.J. Crowder Mar 24 '17 at 09:58
Thanks buddy! That was extremely helpful! God bless you! – N. Jehnsen M Mar 24 '17 at 10:10

score 1 · Answer 2 · answered Mar 24 '17 at 10:02

1

function rightTriangle(n) {
  for (var i = 0; i <= n; i++) {
    for (var j = 0; j <= n; j++) {
      if(j>=i) document.write('*');
      else document.write('&nbsp&nbsp');
    }
    document.write('<br>');
  }
}
rightTriangle(5);

answered Mar 24 '17 at 10:02

Mr.Bruno

4,239
2
10
24

you don't have to use the double space. It is issue with font. (+1 to your solution) – Sagar V Mar 24 '17 at 10:05
Thanks Mr. Bruno! That was extremely helpful! God bless you! – N. Jehnsen M Mar 24 '17 at 10:10
@NurekeDuisekeyev please if the answer is correct please mark it like the right one to close the post – Mr.Bruno Mar 24 '17 at 10:13

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

Algo

Create n*n matrix with 2 values, " " and "*"
In html " " has no effect as extra spaces are trimmed. You will have to use  , unicode value for single space.
Now loop and add necessary parts to string.
Since you need reverse triangle, spaces will come first. You can loop in ascending fashion with value of i denoting spaces and n-i denoting "*"

function rightTriangle(n) {
  var html = "";
  for (var i = 0; i < n; i++) {
    for(var j = 0; j< i; j++){
      html += "&nbsp;";
    }
    for(var k = 0; k< n-i; k++){
      html += "*"
    }
    html +="<br/>"
  }
  document.querySelector('.content').innerHTML = html
}
rightTriangle(5);

.content {
  font-family: monospace;
}

<div class="content"></div>

string.repeat

function rightTriangle(n) {
  var html = "";
  for (var i = 0; i < n; i++) {
    html += "&nbsp;".repeat(i) + "*".repeat(n - i) + "</br>"
  }
  document.querySelector('.content').innerHTML = html
}
rightTriangle(5);

.content {
  font-family: monospace;
}

<div class="content"></div>

Also note that using document.write and < br/>" are considered bad practice.

How to make reverse asterisk Triangle with JavaScript using 'for' loop

3 Answers3

Algo

string.repeat