CODEWITHSUNDEEP
javascripthtml
Chris Le
Chris Le

Reputation: 71

Draw an inverted right triangle from right to left with JS HTML

I am trying to draw the 3rd and 4th triangle in the following picture with JS in HTML. I made two functions for the first two triangles, and I think I just need to twist the for loops a little bit for the 3rd and 4th ones but I don't know how to do it. Here are the codes for the first two ones.

enter image description here

function draw1() {
  let mytable = "<table>"
  for (let i = 1; i < 6; i++) {
        mytable += "<tr>";
        mytable += "<td>" + "*".repeat(i) +"</td>";
        }
        mytable += "</tr>"
  document.write(mytable)
}

draw1()

function draw2() {
  let mytable = "<table>"
  for (let i = 5; i > 0; i--) {
        mytable += "<tr>";
        mytable += "<td>" + "*".repeat(i) +"</td>";
        }
        mytable += "</tr>"
  document.write(mytable);
}

draw2()

Upvotes: 2

Views: 2070

Answers (3)

Satish Chandra Gupta
Satish Chandra Gupta

Reputation: 3361

Use the code below to create the pattern.

let n = 5; // you can take input from prompt or change the value
let string = "";
for (let i = 1; i <= n; i++) {
  // printing spaces
  for (let j = 0; j < n - i; j++) {
    string += " ";
  }
  // printing star
  for (let k = 0; k < i; k++) {
    string += "*";
  }
  string += "\n";
}
console.log(string);

Here is code for the second pattern.

let n = 5; // you can take input from prompt or change the value
let string = "";
for (let i = 0; i < n; i++) {
  // printing star
  for (let k = 0; k < n - i; k++) {
    string += "*";
  }
  string += "\n";
}
console.log(string);

Upvotes: 0

s.kuznetsov
s.kuznetsov

Reputation: 15213

In order to rotate your * arrows, you don't have to redo the js. You can simply use the css direction: rtl rule for the table that your js creates. Like this:

table {
  direction: rtl;
}


function draw1() {
  let mytable = "<table>"
    for (let i = 1; i < 6; i++) {
      mytable += "<tr>";
      mytable += "<td>" + "*".repeat(i) +"</td>";
    }
    mytable += "</tr>"
    document.write(mytable);
}

draw1();

function draw2() {
  let mytable = "<table>"
    for (let i = 5; i > 0; i--) {
      mytable += "<tr>";
      mytable += "<td>" + "*".repeat(i) +"</td>";
    }
    mytable += "</tr>"
    document.write(mytable);
}

draw2();
table {
  direction: rtl;
}

Upvotes: 2

Nikhil Patil
Nikhil Patil

Reputation: 2540

You need add spaces before you add *. Since you are rendering HTML use &nbsp; for space character. Use 2 of them to appropriately cover area in loop.

function draw1() {
                    let mytable = "<table>";
                    for (let i = 1; i < 6; i++) {
                          mytable += "<tr>";
                          mytable += "<td>" + "*".repeat(i) +"</td>";
                          }
                          mytable += "</tr>";
                    document.write(mytable);
              }
              draw1()
              function draw2() {
                    let mytable = "<table>";
                    for (let i = 5; i > 0; i--) {
                          mytable += "<tr>";
                          mytable += "<td>" + "*".repeat(i) +"</td>";
                          }
                          mytable += "</tr>";
                    document.write(mytable);
              }
              draw2();
              function draw3() {
                    let mytable = "<table>";
                    for (let i = 1; i < 6; i++) {
                          mytable += "<tr>";
                          mytable += "<td>" + "&nbsp;&nbsp;".repeat(5-i) + "*".repeat(i) +"</td>";
                    }
                    mytable += "</tr>";
                    document.write(mytable);
              }
              draw3();
               function draw4() {
                    let mytable = "<table>";
                    for (let i = 5; i > 0; i--) {
                          mytable += "<tr>";
                          mytable += "<td>"  + "&nbsp;&nbsp;".repeat(5-i) + "*".repeat(i) +"</td>";
                    }
                    mytable += "</tr>";
                    document.write(mytable);
              }
              draw4();

Upvotes: 0

Related Questions