Background: At this moment, I am in the process of creating a webpage where users will input tile width & height along with floor width & height. The aim is to calculate the area of the floor, with tiles measured in inches and the floor input measured in feet.
Technical Info: To carry out the calculations, I have configured 1 foot as equivalent to 60 pixels and 1 inch as equal to 5 pixels.
Current Challenge: Currently, my stumbling block lies in generating all the tile elements (child divs) within the designated area (parent div). I am currently relying on a simple for loop for this task.
Here's a preview of the current output...
https://i.sstatic.net/Kdspj.jpg
Objective: My goal is to implement a feature where upon clicking the Calculate Button, the user can visualize the floor design. Details such as coloring and patterns will be added at a later stage.
The expected output should resemble this image (please disregard any misalignments in the borders as it was created using Windows Paint):
https://i.sstatic.net/XyJYw.jpg
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 to Fiddle: https://jsfiddle.net/22gLkguL/
I've attempted to accomplish this task without success... Could someone lend me their expertise or steer me in the right direction?