CODEWITHSUNDEEP
javascriptjqueryhtmlcss
binaryuser
binaryuser

Reputation: 737

Create a pyramid structure diagram on a page from the user input

I want to create a pyramid like structure on a page from the user input, and the structure should appear like this, Pyramid

I tried to loop in JS to display the structure but can't change the css property in JS loop according to user input. Here is the code on this page :

var objContainer = document.getElementById("container"),
  intLevels = 10,
  strBlocksHTML = '';


for (var i = 0; i < intLevels; i++) {

  strBlocksHTML += '<div class="buildingBlock"></div>';

  strBlocksHTML += '<div></div>'; // Line break after each row
}

objContainer.innerHTML = strBlocksHTML;
.buildingBlock {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 2px 5px;
  background-color: #eee;
  border: 2px solid #ccc;
}

#container {
  text-align: center;
}
<div id="container"></div>

The output is displayed as a tower and also want to remove the spacing between each <div> element. How can I change this by using jquery or by some other method ? The above image is the desired output that I want.

Upvotes: 0

Views: 1168

Answers (4)

Gavriel
Gavriel

Reputation: 19237

var objContainer = document.getElementById("container"),
  intLevels = 10,
  strBlocksHTML = '';


for (var i = 0; i < intLevels; i++) {

  strBlocksHTML += '<div class="buildingBlock" style="width:' + (10 * i) + 'px"></div>';

  //strBlocksHTML += '<div></div>'; // Line break after each row
}

objContainer.innerHTML = strBlocksHTML;
.buildingBlock {
  display: block;
  width: 20px;
  height: 20px;
  margin: 0 auto;
  background-color: #eee;
  border: 2px solid #ccc;
}

#container {
  text-align: center;
}
<div id="container"></div>

Upvotes: 1

C3roe
C3roe

Reputation: 96383

You could simple set the width via the style attribute on each created div, and calculate it dynamically – I’ve change your loop to run backwards, something like this:

for(var i=intLevels; i>0; --i) {
    strBlocksHTML += '<div class="buildingBlock" style="width:'+(250-i*20)+'px"></div>';
}

Change the values (250px width from which i*20 gets subtracted) as you see fit, resp. calculate them dynamically based on the number of pyramid levels wanted.

And also you do not need the empty divs for line breaks – just keep your divs as display:block, and set the margin to auto to center them.

var objContainer = document.getElementById("container"),
  intLevels = 10,
  strBlocksHTML = '';

for (var i = intLevels; i > 0; --i) {

  strBlocksHTML += '<div class="buildingBlock" style="width:' + (250 - i * 20) + 'px"></div>';
}

objContainer.innerHTML = strBlocksHTML;
.buildingBlock {
  height: 20px;
  margin: auto;
  background-color: #eee;
  border: 2px solid #ccc;
}

#container {
  text-align: center;
}
<div id="container"></div>

Upvotes: 1

Sunil Verma
Sunil Verma

Reputation: 2500

you need to do some thing like this

for( var i=0; i<intLevels; i++ ){
    var wd = 20 * i;
    strBlocksHTML += '<div class="buildingBlock" style="width:'+wd+'px"></div>';

    strBlocksHTML += '<div></div>'; // Line break after each row
}


var objContainer = document.getElementById("container"),
  intLevels = 10,
  strBlocksHTML = '';


for (var i = 0; i < intLevels; i++) {
  var wd = 20 * i;
  strBlocksHTML += '<div class="buildingBlock" style="width:' + wd + 'px;"></div>';

  strBlocksHTML += '<div></div>'; // Line break after each row
}

objContainer.innerHTML = strBlocksHTML;
.buildingBlock {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 2px 5px;
  background-color: #eee;
  border: 2px solid #ccc;
  margin-top: -20px;
}

#container {
  text-align: center;
}
<div id="container"></div>

you can allign these closer by using css

Upvotes: 1

stafffan
stafffan

Reputation: 492

By changing the first strBlocksHTML row to

strBlocksHTML += '<div class="buildingBlock" style="width: ' + Number(20 + 40 * i) + 'px"></div>';

it works.

Upvotes: 1

Related Questions