CODEWITHSUNDEEP
javascriptarrays
Antonio Pina
Antonio Pina

Reputation: 1

javascript pyramid within array

I need my output to look like this:

result expected

The best I could achieve was that:

wrong

Here is my code:

let pyramidComplete = (rows) => {
    let array = [];
    let str = '';
    for (let i = 1; i <= rows; i++) {


        //Add the white space to the left
        for (let k = 1; k <= (rows - i); k++) {
            str += ' ';
        }

        //Add the '*' for each row
        for (let j = 0; j != (2 * i - 1); j++) {
            str += "#".repeat(2 * i - 1);
        }

        //Add the white space to the right
        for (let k = i + 1; k <= rows; k++) {
            str += ' ';
        }

        //Print the pyramid pattern for each row
        array.push(str)
        str = '';
    }
}

pyramidComplete(5);

I thought of assembling a line per loop and then, pushing it into an array but, I can't get the desired result.

Upvotes: 0

Views: 1272

Answers (2)

ggorlen
ggorlen

Reputation: 57115

The logic is fairly direct: for each row, the number of whitespaces is n - i - 1 where i is the row number. The number of # per row is i + 1. You can produce these substrings using String#repeat. Concatenate the two chunks together per line and use the index argument to Array#map's callback to produce each row.

const pyramid = n => Array(n).fill().map((_, i) => 
  " ".repeat(n - i - 1) + "#".repeat(i + 1)
);
console.log(pyramid(5));

If the functions used here are incomprehensible, this can be simplified to use rudimentary language features as follows. It's similar to your approach, but the counts for each character per row are different, I iterate from 0 < n rather than 1 <= n and str should be scoped to the outer loop block.

function pyramid (n) {
  var result = [];
  
  for (var i = 0; i < n; i++) {
    var line = "";
  
    for (var j = 0; j < n - i - 1; j++) {
      line += " ";
    }
    
    for (var j = 0; j < i + 1; j++) {
      line += "#";
    }
    
    result.push(line);
  }
  
  return result;
}

console.log(pyramid(5));

If you need a true pyramid (which your current output seems to be shooting for, contrary to the expected output):

const pyramid = n => Array(n).fill().map((_, i) => {
  const size = i * 2 + 1;
  const pad = n - size / 2;
  return " ".repeat(pad) + "#".repeat(size) + " ".repeat(pad);
});

console.log(pyramid(5));

Upvotes: 1

StackSlave
StackSlave

Reputation: 10627

I think you want to do this:

let doc, htm, bod, nav, M, I, mobile, S, Q, CharPyr; // for use on other loads
addEventListener('load', ()=>{
doc = document; htm = doc.documentElement; bod = doc.body; nav = navigator; M = tag=>doc.createElement(tag); I = id=>doc.getElementById(id);
mobile = nav.userAgent.match(/Mobi/i) ? true : false;
S = (selector, within)=>{
  var w = within || doc;
  return w.querySelector(selector);
}
Q = (selector, within)=>{
  var w = within || doc;
  return w.querySelectorAll(selector);
}
CharPyr = function(char = '#', className = 'pyr'){
  this.char = char; this.className = className;
  this.build = (height = 9)=>{
    const p = M('div');
    p.className = this.className;
    for(let i=0,c=this.char,x=c,d; i<height; i++){
      d = M('div'); d.textContent = x; p.appendChild(d); x += c;
    }
    return p;
  }
}
// magic happens here
const out1 = I('out1'), out2 = I('out2'), out3 = I('out3'), pyr = new CharPyr;
out1.appendChild(pyr.build(5)); out2.appendChild(pyr.build(7)); out3.appendChild(pyr.build());
}); // end load
*{
  box-sizing:border-box;
}
.out{
  margin-bottom:7px;
}
.pyr>div{
  color:#070; text-align:center;
}
<div class='out' id='out1'></div>
<div class='out' id='out2'></div>
<div class='out' id='out3'></div>

Upvotes: 0

Related Questions