Welcome to Code Forum!

Join a community that supports you and your coding journey from day one. We strive to be a friendly, supportive community that empowers everyone to be better developers. By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.

    GIF shows where to locate </> in the thread and or post editor toolbar.
    To learn more about how to use our BBCode feature, review our "How to post your code into threads" here.

    Thank you, Code Forum.

JavaScript Adding interactive visual representation to a webpage

Trinary

Trinary

New Coder
Hi. I am working on a script that will help me visualize a grid within a grid.
What i would like help with is the structure to build up an square that has n amount of boxes inside it depending on what the existing code produces bases on user input. The boxes are generated from right to left and downward. On line 60 the variable w, h would represent how many boxes should be horizontal and vertical. I am not asking for a complete code snippet but for a good introduction on how to implement visual effects like described here.

[CODE lang="html" highlight="60"]<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
text-align: right;
}
.outercontainer {
width: 50%;
text-align: center;

}

.slider {
-webkit-appearance: none;
width: 100%;
height: 25px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}

</style>
</head>
<body>


<div class="outercontainer">
<div class="container">
<p>Total number of cominations <input type="number" name="mynumber" value="9" id="tSquare" onclick="calculateGrid()"></p>
<p>Horizontal number of combinations <input type="number" name="mynumber" value="3" id="hSquare" onclick="calculateGrid()"></p>
<p>Total number of sub cominations <input type="number" name="mynumber" value="4" id="tSubSquare" onclick="calculateGrid()"></p>
<p>Horizontal number of sub combinations <input type="number" name="mynumber" value="2" id="hSubSquare" onclick="calculateGrid()"></p>
<p>Number of different colors <input type="number" name="mynumber" value="4" id="tColors" onclick="calculateGrid()"></p>
<p id="changeMe">Text is what</p>
</div>
</div>

<script>
function calculateGrid() {
var output2 = document.getElementById("changeMe");
const w = Number(hSquare.value);
const h = Math.ceil(Number(tSquare.value/hSquare.value));
const sw = Number(hSubSquare.value);
const sh = Math.ceil(Number(tSubSquare.value/hSubSquare.value));
const tw = w*sw;
const th = h*sh;

const ts = Number(tSquare.value);
const tss = Number(tSubSquare.value);
const tc = Number(tColors.value);

let colorfullText = "<br>"+tc**tc;
if (tc**tc < ts) colorfullText += " colors will fit with space to spare.";
else if (tc**tc == ts) colorfullText += " colors will fit perfect!";
else colorfullText += " colors will not fit!";

output2.innerHTML = "x: "+w+", y: "+h+"<br>Cell x: "+tw+", Cell y: "+th+colorfullText;

}
// var slider1 = document.getElementById("totalSquare");
// var output1 = document.getElementById("totalSquareResult");
// output1.innerHTML = slider1.value;

// slider1.oninput = function() {
// gvalue = "2";
// alert('was here');
// gvalue = "new val";
// }
<!-- <input type="range" min="1" max="100" value="50" class="slider" id="totalSquare" onclick="calculateGrid()">
<p>Value: <span id="totalSquareResult" val="0"></span></p>
output1.innerHTML = "World!"; -->
</script>

</body>
</html>[/CODE]
 
Sort by date Sort by votes
I left you things to do.
I used screen.width and cut it down a little.
Math.floor() rounds down. Most divisions have parts of the whole left over.
document.getElementById("myCanvas").width = x; lets you control the width - you can do the same for height.
The for loop is tricky. Needed to draw first box outside of loop.
Good luck making this work for you.
Code: 
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
  text-align: right;
}
.outercontainer {
  width: 50%;
  text-align: center;

}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 25px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

</style>
</head>
<body>


<div class="outercontainer">
  <div class="container">
    <p>Total number of cominations <input type="number" name="mynumber" value="9" id="tSquare" onclick="calculateGrid()"></p>
    <p>Horizontal number of combinations <input type="number" name="mynumber" value="3" id="hSquare" onclick="calculateGrid()"></p>
    <p>Total number of sub cominations <input type="number" name="mynumber" value="4" id="tSubSquare" onclick="calculateGrid()"></p>
    <p>Horizontal number of sub combinations <input type="number" name="mynumber" value="2" id="hSubSquare" onclick="calculateGrid()"></p>
    <p>Number of different colors <input type="number" name="mynumber" value="4" id="tColors" onclick="calculateGrid()"></p>
    <p id="changeMe">Text is what</p>
  </div>
</div>
<p id="demo"></p>
<canvas id="myCanvas" height="150" style="border:1px solid red;"></canvas>
<script>
  var w = 25;
  var x = screen.width - 2;
  document.getElementById("demo").innerHTML = x;
  var boxDiv = x/w;
  var boxWidth = Math.floor(boxDiv);
  document.getElementById("myCanvas").width = x;


  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.beginPath();
 
  var end = 0;
  ctx.rect(1, 1, boxWidth, 50 );
  ctx.stroke();
  for(i=1; i<x-boxWidth-1; i++){
    var y = boxWidth *i;
    ctx.rect(y, 1, boxWidth, 50 );
    ctx.stroke();
    end++;
    if(end == w-1) break;
  }
</script>

</body>
</html>
 
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

Buy me a coffee.
DataCamp Advertisement
Code Academy Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom