How to add div's inside a div dynamically until the width and height of parent div is full/completed

Question

Background: I am making a web-page where User will enter the tile Width & Height and Floor Width & Height. The Floor Width & Height is used to calculate the area of Floor. The Tile input is in INCHES & the Floor Input is in FEET.

Technical Info: I have set 1 foot equals to 60 pixels & 1 inch equals to 5 pixels for calculations.

Where Am I Now ? Right now I am stuck in drawing all the tiles (child div's) in the area (parent div) . For now I am using simple for loop for making the tiles (div's) .

For Now Output is Something Like this...

What I Want ? Well I am trying to make a functionality that when user clicks the Calculate Button, he/she see's the design of the floor. I will be coloring & adding patterns later on.

The output should be like this (Beg me your pardon, if the borders are not align, this was made with Windows Paint) :

Code:

  $(document).ready(function () { $("#btnCalculate").click(function (e) { e.preventDefault(); $("#area").empty(); const foot = 60, inch = 5; let tileW = parseFloat($("#tileWidth").val()); let tileH = parseFloat($("#tileHeight").val()); let areaW = parseFloat($("#areaWidth").val()); let areaH = parseFloat($("#areaHeight").val()); $("#area").css("height", (foot * areaH)); $("#area").css("width", (foot * areaW)); for (let r = 0; r<10 ; r++) { // const element = array[r]; $("#area").append("<div id='tile_"+r+"' style='width:"+((inch * tileW))+"px; height:"+((inch * tileH))+"px;' class='border_color'> </div>"); } }); }); 

 #area { border: 1px solid black; height: 25px; width: 25px; } .border_color{ /* border: 1px solid black; */ outline: 1px solid; /* use instead of border */ } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p>Tile Width (inches): </p><input type="numbers" id ="tileWidth" placeholder="Tile Width" value="6"> <p>Tile Height (inches): </p><input type="numbers" id ="tileHeight" placeholder="Tile Height" value="4"> <br> <p>Area Width (foot): </p><input type="numbers" id ="areaWidth" placeholder="Area Width" value="11.5"> <p>Area Height (foot): </p><input type="numbers" id ="areaHeight" placeholder="Area Height" value="6.5"> <button id="btnCalculate" >Calculate</button> <div id="area"> </div> 

External Link of Fiddle: https://jsfiddle.net/22gLkguL/

I Have tried, to archive all of this but failed..! Would someone please help me OR guide me in right path...?

Answer 1

Use display: flex and flex-wrap: wrap

#area {
  border: 1px solid black;
  height: 25px;
  width: 25px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

and calculate the numbers of the div s that each side (width or height) can be filled the most.

 $(document).ready(function() { $("#btnCalculate").click(function(e) { e.preventDefault(); $("#area").empty(); const foot = 60, inch = 5; let tileW = parseFloat($("#tileWidth").val()); let tileH = parseFloat($("#tileHeight").val()); let areaW = parseFloat($("#areaWidth").val()); let areaH = parseFloat($("#areaHeight").val()); var areaHeight = (foot * areaH) var areaWidth = (foot * areaW) var divHeight = (inch * tileH) var divWidth = (inch * tileW) $("#area").css("height", areaHeight); $("#area").css("width", areaWidth); var nums = Math.floor(areaWidth/divWidth) * Math.floor(areaHeight/divHeight) for (let r = 0; r < nums; r++) { var $div = $('<div>', { id: 'tile_' + r, class: 'border_color', height: divHeight, width: divWidth, }) $("#area").append($div); } }); }); 

 #area { border: 1px solid black; height: 25px; width: 25px; display: flex; flex-wrap: wrap; align-content: flex-start; } .border_color { outline: 1px solid; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p>Tile Width (inches): </p><input type="numbers" id="tileWidth" placeholder="Tile Width" value="6"> <p>Tile Height (inches): </p><input type="numbers" id="tileHeight" placeholder="Tile Height" value="4"> <br> <p>Area Width (foot): </p><input type="numbers" id="areaWidth" placeholder="Area Width" value="11.5"> <p>Area Height (foot): </p><input type="numbers" id="areaHeight" placeholder="Area Height" value="6.5"> <button id="btnCalculate">Calculate</button> <div id="area"> </div> 

Answer 2

use display: flex; flex-wrap: wrap display: flex; flex-wrap: wrap for area element.

and calculate the number of Tiles as ---

(areaWidthInPixels/tileWidthinPixels) * (areaHeightInPixels/tileHeightinPixels)

  $(document).ready(function () { $("#btnCalculate").click(function (e) { e.preventDefault(); $("#area").empty(); const foot = 60, inch = 5; let tileW = parseFloat($("#tileWidth").val()); let tileH = parseFloat($("#tileHeight").val()); let areaW = parseFloat($("#areaWidth").val()); let areaH = parseFloat($("#areaHeight").val()); $("#area").css("height", (foot * areaH)); $("#area").css("width", (foot * areaW)); let noOfTiles = Math.floor( ((foot * areaW)/(inch * tileW)) )* Math.floor( ((foot * areaH)/(inch * tileH)) ); alert("noOf TIles :: " + noOfTiles); for (let r = 1; r <= noOfTiles ; r++) { // const element = array[r]; var bgColor = r % 2 == 0 ? "red" : "green"; $("#area").append("<div id='tile_"+r+"' style='width:"+((inch * tileW))+"px; height:"+((inch * tileH))+"px; background-color: " + bgColor + "'' class='border_color'> </div>"); } }); }); 

 #area { border: 1px solid black; height: 25px; width: 25px; display: flex; flex-wrap: wrap; } .border_color{ /* border: 1px solid black; */ outline: 0px solid; /* use instead of border */ } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p>Tile Width (inches): </p><input type="numbers" id ="tileWidth" placeholder="Tile Width" value="6"> <p>Tile Height (inches): </p><input type="numbers" id ="tileHeight" placeholder="Tile Height" value="4"> <br> <p>Area Width (foot): </p><input type="numbers" id ="areaWidth" placeholder="Area Width" value="11.5"> <p>Area Height (foot): </p><input type="numbers" id ="areaHeight" placeholder="Area Height" value="6.5"> <button id="btnCalculate" >Calculate</button> <div id="area"> </div>