How can I make a 40x40 grid using divs? - javascript

I am basically trying to create using javascript a 40x40 red grid of divs in my html document.
Here's my loop:
for(var i = 0; i < 40; i++) {
for(var j = 0; j< 40; j++) {
var div = document.createElement("div");
div.style.width = "25px";
div.style.height = "25px";
div.style.background = "red";
}
var jump = document.createElement("br");
document.getElementById("container").appendChild(jump);
document.getElementById("container").appendChild(div);
}
The problem is I can't seem to get it to form a square of all the divs I created. The container is 1000 x 1000 px.
Thank you

All you need is to put the last 3 lines inside the inner loop (not inside the outer loop):
for(var i = 0; i < 40; i++) {
for(var j = 0; j< 40; j++) {
var div = document.createElement("div");
div.style.width = "25px";
div.style.height = "25px";
div.style.background = "red";
var jump = document.createElement("br");
document.getElementById("container").appendChild(jump);
document.getElementById("container").appendChild(div);
}
}
Also, don't forget to set the 'display' to 'inline-block':
div.style.display = "inline-block";
Or, you have to use the 'float' attribute:
div.style.float = "left";
EDIT:
Use row-div to group each 40 cells in a row:
for(var i = 0; i < 40; i++) {
var row = document.createElement("div");
for(var j = 0; j< 40; j++) {
var cell = document.createElement("div");
cell.style.width = "25px";
cell.style.height = "25px";
cell.style.background = "red";
cell.style.display = "inline-block"
row.appendChild(cell);
}
document.getElementById("container").appendChild(row);
}

I believe what you want is the following:
for (var i = 0; i < 40; i++) {
for (var j = 0; j < 40; j++) {
var div = document.createElement("div");
div.style.width = "25px";
div.style.height = "25px";
div.style.background = "red";
document.getElementById("container").appendChild(div);
}
var jump = document.createElement("br");
document.getElementById("container").appendChild(jump);
}
#container {
width:1000px;
height:1000px;
}
#container div {
display:inline-block;
vertical-align:top;
}
<div id="container"></div>
Your inner divs can be inline-block elements so that they flow next to each other (since divs by default are block level). You also need to insert a line break after each inner (j) loop. So the process would be: generate 40 inline divs, insert a line break, generate 40 inline divs, insert a line break,...(repeat 38 more times).

First of all, you need to append the created div on each loop iteration.
Second, you need to set the divs as display: inline or display: inline-block
for(var i = 0; i < 40; i++) {
for(var j = 0; j< 40; j++) {
var div = document.createElement("div");
div.style.width = "25px";
div.style.height = "25px";
div.style.background = "red";
document.getElementById("container").appendChild(div);
}
}
#container {
width: 1000px;
height: 1000px;
}
#container > div {
display: inline-block;
}
<div id="container"></div>

Here, this actually creates 40 divs in 40 parent divs (like rows):
for(var i = 0; i < 40; i++) {
var div1 = document.createElement('div')
for(var j = 0; j< 40; j++) {
var div = document.createElement("div");
div.style.width = "25px";
div.style.height = "25px";
div.style.background = "red";
div.style.display = 'inline-block';
div.style.margin = '1px'
div1.appendChild(div)
}
document.getElementById('container').appendChild(div1);
}
http://plnkr.co/edit/1jVBeYIMaGfzzgqt7yUj?p=info

Adding a bit of CSS and inline-block
Divs are typically block elements, you need to make them inline-blocks to help you with your grid.
If you want to remove the line gaps, play with margins (i.e. margin: 0; to reduce or margin: 0 1px; to add to the sides of each square)
for (var i = 0; i < 40; i++) {
var jump = document.createElement("br");
for (var j = 0; j < 40; j++) {
var div = document.createElement("div");
div.style.width = "25px";
div.style.height = "25px";
div.style.background = "red";
document.getElementById("container").appendChild(div);
}
document.getElementById("container").appendChild(jump);
}
#container div {
/* you need this */
display: inline-block;
}
#container {
width: 1000px;
height: 1000px;
}
<div id="container">
</div>

You can use a mix of css, html and javascript.
IMHO, the best way is to take advantage of CSS classes and instead of creating each element individually in javascript, you can use cloneNode() to clone the first "box".
Here's an example (fiddle here) and snippet below
var parent = document.getElementById('parent'),
box = parent.children[0];
for (var i = 0; i < 100; ++i) {
var nBox = box.cloneNode(true);
parent.appendChild(nBox);
}
.grid {
width: 1000px;
height: 1000px;
background-color: green;
}
.box {
float: left;
width: 40px;
height: 40px;
background-color: red;
border: 1px solid white;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
<div id="parent" class="grid">
<div class="box"> </div>
</div>

Here this will do it for you:
<body onload="makeGrid()" id="container">
<body>
<script>
function makeGrid(){
for(var i = 0; i < 40; i++) {
for(var j = 0; j< 40; j++) {
var div = document.createElement("div");
div.style.width = "25px";
div.style.height = "25px";
div.style.background = "red";
document.getElementById("container").appendChild(div);
}
//document.getElementById("container").appendChild(jump);
//document.getElementById("container").appendChild(div);
}
}
</script>
CSS
#container{width: 1000px; height: 1000px;}
div{float: left;}
See example: http://jsfiddle.net/bun4g2d0/9/

Related

making an div changes it background when mouse hover using JavaScript

Hello there i'm doing an course about JavaScript in the first exercise they ask to make a button that creates boxes,and in the second exercise they ask to use an function to when the mouse hover over the boxes they change color randomly, but i didn't manged to do it so here's firstly the box maker:
<body>
<button>CREATE</button>
<p>BOXES GENERATOR</p>
<div class="container"></div>
</body>
var button1 = document.querySelector("button");
button1.onclick = function() {
var cubeElement = document.createElement("div");
cubeElement.setAttribute("class", "bt");
var bodyElement = document.querySelector(".container");
bodyElement.appendChild(cubeElement);
var cubestyleElement = document.querySelectorAll(".bt");
for (var i = 0; i < cubestyleElement.length; i++) {
cubestyleElement[i].setAttribute(
"style",
"background: #850900; height: 100px; width: 100px; border: solid #000 2px;"
);
}
};
and there's the function to make it change colors randomly:
function getRandomColor() {
var letters = "0123456789ABCDEF";
var color = "#";
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
};
var newColor = getRandomColor(); // #E943F0
Here you go:
function getRandomColor() {
var letters = "0123456789ABCDEF";
var color = "#";
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
};
var i = 0;
var button1 = document.querySelector("button");
button1.onclick = function() {
var cubeElement = document.createElement("div");
cubeElement.setAttribute("class", "bt");
var bodyElement = document.querySelector(".container");
bodyElement.appendChild(cubeElement);
var cubestyleElement = document.querySelectorAll(".bt");
for (i; i < cubestyleElement.length; i++) {
var element = cubestyleElement[i];
element.setAttribute(
"style",
"background: #850900; height: 100px; width: 100px; border: solid #000 2px;"
);
element.onmouseover = function(){
var newColor = getRandomColor();
element.setAttribute(
"style",
"background:"+ newColor+"; height: 100px; width: 100px; border: solid #000 2px;"
);
}
}
};
<button>CREATE</button>
<p>BOXES GENERATOR</p>
<div class="container"></div>
Please check this.. Are you looking this?
var button1 = document.querySelector("button");
button1.onclick = function() {
var cubeElement = document.createElement("div");
cubeElement.setAttribute("class", "bt");
cubeElement.addEventListener('mouseover', function(event) {
event.target.style.backgroundColor = getRandomColor();
});
var bodyElement = document.querySelector(".container");
bodyElement.appendChild(cubeElement);
var cubestyleElement = document.querySelectorAll(".bt");
for (var i = 0; i < cubestyleElement.length; i++) {
cubestyleElement[i].setAttribute(
"style",
"background: #850900; height: 100px; width: 100px; border: solid #000 2px;"
);
}
};
function getRandomColor() {
var letters = "0123456789ABCDEF";
var color = "#";
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
};
<body>
<button>CREATE</button>
<p>BOXES GENERATOR</p>
<div class="container"></div>
</body>
Please let me know if you have any query.

Border does not go around full table

I have a border that I'm trying to get to go around the full table, but instead it stops at odd places and does not circle the whole table. Looking like this:
So as you can see the border stops going around the table in an odd place, so how do I get it to fully encompass the table?
Also due to certain specifications the whole thing must be created with Javascript.
function createTable(matrix) {
var div = document.createElement("div");
div.style.minWidth = "120px";
//div.style.height = "100px";
div.style.top = "0px";
div.style.left = "0px";
div.style.zIndex = 1000;
div.style.background = "grey";
div.style.color = "white";
div.style.position = "absolute";
var header = document.createElement("div");
header.style.background = "red";
header.style.textAlign = "center";
header.innerHTML = "Script Stats";
div.appendChild(header)
var x = document.createElement("TABLE");
//x.style.padding = "50px";
for (i = 0; i < matrix.length; i++) {
tableData[i] = [];
tableData[i][0] = document.createElement("TR");
x.appendChild(tableData[i][0]);
for (let k = 0; k < matrix[i].length; k++) {
var z = document.createElement("TD");
z.innerHTML = matrix[i][k];
z.style.textAlign = "center";
z.style.padding = "5px";
tableData[i][0].appendChild(z);
}
}
x.style.border = "2px solid white";
div.appendChild(x);
var bottom = document.createElement("div");
bottom.style.background = "red";
bottom.innerHTML = "Menu";
bottom.style.textAlign = "center";
div.appendChild(bottom);
document.body.appendChild(div);
}
createTable(divTable);
Okay, I reproduced your problem, and
a simple solution to your problem is
<style>
table { border-collapse: collapse; }
</style>
you can see it in action here :
https://jsbin.com/jenupigupe/edit?html,js,output

Some div(s) not displaying when using createElement and appendChild

I am trying to create 4 div(s) that are supposed to have a width of 5px and sit at the top, bottom, left and right margins of the viewport, essentially acting all together as a frame or border to the page.
Here is my code:
function border () {
edgeT = document.createElement('div');
edgeT.style.position = "fixed"
edgeT.style.left = 0;
edgeT.style.top = 0;
edgeT.style.right = 0;
edgeT.style.width = "5px";
edgeT.style.backgroundColor= "black";
document.body.appendChild(edgeT);
edgeB = document.createElement('div');
edgeB.style.position = "fixed"
edgeB.style.left = 0;
edgeB.style.right = 0;
edgeB.style.bottom = 0;
edgeB.style.width = "5px";
edgeB.style.backgroundColor= "black";
document.body.appendChild(edgeB);
edgeL = document.createElement('div');
edgeL.style.position = "fixed"
edgeL.style.left = 0;
edgeL.style.top = 0;
edgeL.style.bottom = 0;
edgeL.style.width = "5px";
edgeL.style.backgroundColor= "black";
document.body.appendChild(edgeL);
edgeR = document.createElement('div');
edgeR.style.position = "fixed"
edgeR.style.top = 0;
edgeR.style.bottom = 0;
edgeR.style.right = 0;
edgeR.style.width = "5px";
edgeR.style.backgroundColor= "black";
document.body.appendChild(edgeR);
}
For some reason, when calling the function, the left and right divs (i.e. edgeL and edgeR) are displayed properly, but there is no trace of edgeT and edgeB (top and bottom ones). I cannot understand why since the code is exactly the same for all four of them. FYI the problem is relevant in both Chrome and Firefox.
I know I could use CSS to achieve the same result, but since this is mostly a learning exercise I would still like to understand what is causing the issue in this case.
Thank you all in advance for your help.
Regards,
You should define for the top and bottom divs width: 100% and height: 5px (they're aligned horizontally) and for the left and right divs width: 5px and height: 100% (aligned vertically).
var edgeT = document.createElement('div');
edgeT.style.position = "fixed"
edgeT.style.top = 0;
edgeT.style.left = 0;
edgeT.style.width = "100%";
edgeT.style.height = "5px";
edgeT.style.backgroundColor= "black";
document.body.appendChild(edgeT);
var edgeB = document.createElement('div');
edgeB.style.position = "fixed"
edgeB.style.bottom = 0;
edgeB.style.left = 0;
edgeB.style.width = "100%";
edgeB.style.height = "5px";
edgeB.style.backgroundColor= "black";
document.body.appendChild(edgeB);
var edgeL = document.createElement('div');
edgeL.style.position = "fixed"
edgeL.style.left = 0;
edgeL.style.top = 0;
edgeL.style.width = "5px";
edgeL.style.height = "100%";
edgeL.style.backgroundColor= "black";
document.body.appendChild(edgeL);
var edgeR = document.createElement('div');
edgeR.style.position = "fixed"
edgeR.style.right = 0;
edgeR.style.top = 0;
edgeR.style.width = "5px";
edgeR.style.height = "100%";
edgeR.style.backgroundColor= "black";
document.body.appendChild(edgeR);
If you want to see the top and the bottom then you need to give them a height, not a width.

Embed Button on image using DOM

I want to embed button on image using dom. There will be multiple images having multiple button on it which deletes image on click.
I want something like this - JSFiddle
Code I tried:
var div = document.createElement('div');
var parent = document.getElementById('images1');
var btn = document.createElement('input');
btn.type = 'button';
btn.className="multiple",
div.style.cssText = "position: relative; margin-bottom: 10px ; width: 100%;";
btn.style.cssText = " position: absolute; top: 10px; background-image: url(http://totravelistolearn.in/wp-content/themes/travel/images/cross-512.png); width: 20px; height: 20px; border: 0; background-size: 100%; background-repeat: no-repeat;";
//textbox.placeholder = 'Add details about attached Image';
//btn.value = "Remove";
btn.onclick = removeImage;
img = new Image();
img.style.display = 'block';
img.className = 'hi1';
img.style.cssText = 'height: 100px; width: 100px; position: relative;';
img.src = results[i];
div.appendChild(div);
div.appendChild(img);
div.appendChild(btn);
Function to remove image -
function removeImage(){
$$(this).prev("img").remove();
$$(this).remove();
div.parentNode.removeChild(div);
}
you need to use class instead of id, also closest() will do the job for you: DEMO
$('.myButton').click(function(){
$(this).closest('.MyImage').remove();
});
On button click, you can remove the div that contains that image and button, like this :
$('.myButton').on('click', function() {
$(this).closest('div.MyImage').remove();
});
As, I wouldn't advice using same id on multiple elements in one page, I have changed them to classes and then worked through that. I'd suggest you do the same, if your use-case allows you to.
Here is the updated Fiddle
As I Understand , written this code please check once.
function createItem() {
div = document.createElement("div");
div.setAttribute("class", "parent");
image = document.createElement("img");
image.src = "http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg";
image.style.width = "100%";
btn = document.createElement("button");
btn.setAttribute("class", "MyButton");
var textnode = document.createTextNode("X");
btn.appendChild(textnode);
btn.style.position = "absolute";
btn.style.left = "10px";
btn.style.left = "10px";
div.appendChild(image);
div.appendChild(btn);
div.style.width = "100px";
div.style.height = "100px";
div.style.overflow = "hidden";
div.style.marginBottom = "10px";
document.body.appendChild(div);
}
createItem();
createItem();
createItem();
parentDiv = document.getElementsByClassName("parent");
console.log(parentDiv.length);
buttonObject = document.getElementsByClassName("MyButton");
for (var i = 0; i < buttonObject.length; i++) {
buttonObject[i].id = i;
buttonObject[i].onclick = function() {
myId = this.getAttribute("id");
parentDiv[myId].remove()
}
}

Adding dots to an image - beginner

I have a URL like http://weburl/mine/dot.html?gid=4&x=266y=647&x=191y=355&x=100y=893
From the above URL. i need to draw dots on the screen by taking the x and y values.
According to the above example there are 3 such values.
x=266 y=647
x=191 y=355
x=100 y=893
There are 2 parts to this question:
1.) How can I break the values from the URL and put it to an array in order to construct the image? (Since there are multiple values for x in the above URL)
2.) How can I draw the dot on the image? fiddle added.
Note: Following is the CSS of the dot.
position: 'absolute',
top: ev.pageY + 'px',
left: ev.pageX + 'px',
width: '10px',
height: '10px',
background: '#000000'
1)
// for str use window.location.search.replace("?", "");
var str = 'gid=4&x=266y=647&x=191y=355&x=100y=893';
var data = str.match(/(x|y)=(\d+)/g), pointsX = [], pointsY = [];
for(var i = 0; i < data.length; i++)
{
var tmp = data[i].split('=');
if (tmp[0] == 'x')
pointsX.push(tmp[1]);
else
pointsY.push(tmp[1]);
}
2) place a div with background or border above the image or use html5 + canvas http://jsfiddle.net/dh0swt43/
var str = 'gid=4&x=20y=30&x=40y=50&x=100y=100';
var data = str.match(/(x|y)=(\d+)/g), pointsX = [], pointsY = [];
for(var i = 0; i < data.length; i++)
{
var tmp = data[i].split('=');
if (tmp[0] == 'x')
pointsX.push(tmp[1]);
else
pointsY.push(tmp[1]);
}
for(var i = 0; i < pointsX.length; i++)
{
var div = document.createElement('div');
div.className = 'dot';
div.style.left = pointsX[i] + 'px';
div.style.top = pointsY[i] + 'px';
document.getElementById('wrapper').appendChild(div);
}
.dot {
height: 2px;
width: 2px;
position: absolute;
border: 2px solid red;
z-index: 10;
}
<div style='position:relative' id='wrapper'>
<img src='http://bestclipartblog.com/clipart-pics/earth-clip-art-3.jpg'>
</div>

Categories