Search code examples
javascriptloopsnested-loops

How to make a diamond in javascript with nested loops?

I have made this code, but only works for the right half of the diamond, how do I make the full diamond? I need to use nested loops

function myDiamond(){
  let row, star;
  let toPrint = "";
  let rowCount = +prompt("Enter a number to make a diamond");
  
for (row = 1; row <= rowCount; row++){
  for (star = 1; star <= row; star++){
    if (star == 1 || star == row){
    toPrint +="*";
    } else {
      toPrint += " ";
    }
  }
  toPrint += "<br>";
} 
  document.getElementById("figure").innerHTML = toPrint;

  for (row = rowCount; row >= 1; row--){
    for (star = 1; star <= row; star++){
    if (star == 1 || star == row){
    toPrint +="*";
    } else {
      toPrint += " ";
    }
  toPrint += "<br>";
} 

  document.getElementById("figure").innerHTML = toPrint;
}
}
Solution

  • Is this what you're trying to do:

    function createDimondShape(size) {
  var stuff = "";
  for (var i = 1; i <= size; i++) {
    for (var s = size - 1; s >= i; s--) {
      stuff += (" ");
    }
    for (var j = 1; j <= i; j++) {
      stuff += ("* ")
    }
    stuff += "\n";
  }
  if (i == size + 1) {
    for (var i = 1; i <= size - 1; i++) {
      for (var s = 1; s <= i; s++) {
        stuff += (" ");
      }
      for (j = i; j <= size - 1; j++) {
        stuff += ("* ");
      }
      stuff += "\n";
    }
  }
  document.getElementById("figure").innerHTML = stuff;
}
createDimondShape(5);
    <pre id="figure"></pre>

    Couple of trials here:

    function createDimondShape(a, size) {
  var stuff = "";
  for (var i = 1; i <= size; i++) {
    for (var s = size - 1; s >= i; s--) {
      stuff += (" ");
    }
    for (var j = 1; j <= i; j++) {
      stuff += ("* ")
    }
    stuff += "\n";
  }
  if (i == size + 1) {
    for (var i = 1; i <= size - 1; i++) {
      for (var s = 1; s <= i; s++) {
        stuff += (" ");
      }
      for (j = i; j <= size - 1; j++) {
        stuff += ("* ");
      }
      stuff += "\n";
    }
  }
  document.getElementById("figure" + a).innerHTML += stuff;
}
createDimondShape(1, 3);
createDimondShape(2, 7);
    .f {
  display: flex;
  flex-direction: row;
}
.f pre {
  width: 45%;
}
    <div class="f">
  <pre id="figure1"></pre>
  <pre id="figure2"></pre>
</div>

    Preview

    preview

    With prompt, as asked in the comments:

    function createDimondShape(size) {
  var stuff = "";
  for (var i = 1; i <= size; i++) {
    for (var s = size - 1; s >= i; s--) {
      stuff += (" ");
    }
    for (var j = 1; j <= i; j++) {
      stuff += ("* ")
    }
    stuff += "\n";
  }
  if (i == size + 1) {
    for (var i = 1; i <= size - 1; i++) {
      for (var s = 1; s <= i; s++) {
        stuff += (" ");
      }
      for (j = i; j <= size - 1; j++) {
        stuff += ("* ");
      }
      stuff += "\n";
    }
  }
  document.getElementById("figure").innerHTML = stuff;
}
createDimondShape(+prompt("Enter a number..."));
    <pre id="figure"></pre>