Crear una cuadrícula de 16x16 usando JavaScript
html css (4)
CÓDIGO HTML
<html>
<head>
<link rel=stylesheet type="text/css" href="Project_Javascript_jQuery.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="Project_Javascript_jQuery.js"></script>
</head>
<body>
<h4><a href="http://www.theodinproject.com/home">The Odin Project</a> >> <a href="http://www.theodinproject.com/web-development-101">Web Development 101</a> >> <a href="http://www.theodinproject.com/web-development-101#section-the-front-end">The Front End</a> >> <a href="http://www.theodinproject.com/web-development-101/javascript-and-jquery">Project: JavaScript and jQuery</a> >> Nick Kessler entry February 6, 2015</h4>
<center><button class="newGrid">New Grid</button></center>
<div id="container"></div>
<br><br>
</body>
</html>
CSS
#container {
position: relative;
top: 30px;
outline: 2px solid #000;
font-size: 0;
margin: auto;
height: 960px;
width: 960px;
padding: 0;
border: none;
}
.grid {
margin: 0;
padding: 0;
border: none;
outline: 1px solid #000;
display: inline-block;
}
JavaScript
// Function that builds a grid in the "container"
function createGrid(x) {
for (var rows = 0; rows < x; rows++) {
for (var columns = 0; columns < x; columns++) {
$("#container").append("<div class=''grid''></div>");
};
};
$(".grid").width(960/x);
$(".grid").height(960/x);
};
// Function that clears the grid
function clearGrid(){
$(".grid").remove();
};
// Function that prompts the user to select the number of boxes in a new grid
// the function then also creates that new grid
function refreshGrid(){
var z = prompt("How many boxes per side?");
clearGrid();
createGrid(z);
};
// Create a 16x16 grid when the page loads.
// Creates a hover effect that changes the color of a square to black when the mouse passes over it, leaving a (pixel) trail through the grid
// allows the click of a button to prompt the user to create a new grid
$(document).ready(function() {
createGrid(16);
$(".grid").mouseover(function() {
$(this).css("background-color", "black");
});
$(".newGrid").click(function() {
refreshGrid();
$(".grid").mouseover(function() {
$(this).css("background-color", "black");
});
});
});
Estoy tratando de crear una cuadrícula de 16x16 en JavaScript.
El método que estoy tratando de usar es crear un
div
vacío en HTML, y luego agregarle otros
div
y delinear sus bordes.
Parece que no puedo hacer que esto funcione, y he puesto mi código a continuación.
HTML:
<!DOCTYPE html>
<head>
<title>Etch-a-Sketch</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div id="container">
</div>
</body>
JavaScript:
// Sets important constants and variables
const container = document.getElementById("container");
let rows = document.getElementsByClassName("gridRow");
let cells = document.getElementsByClassName("cell");
// Creates a default grid sized 16x16
function defaultGrid() {
makeRows(16);
makeColumns(16);
}
// Takes (rows, columns) input and makes a grid
function makeRows(rowNum) {
// Creates rows
for (r = 0; r < rowNum; r++) {
let row = document.createElement("div");
container.appendChild(row).className = "gridRow";
};
};
// Creates columns
function makeColumns(cellNum) {
for (i = 0; i < rows.length; i++) {
for (j = 0; j < cellNum; j++) {
let newCell = document.createElement("div");
rows[j].appendChild(newCell).className = "cell";
};
};
};
CSS:
.gridRow {
border: 1px solid black;
}
.cell {
border: 1px solid black;
}
La solución, según lo provisto por Gerardo Furtado es cambiar el CSS.
CSS antiguo:
.gridRow {
border: 1px solid black;
}
.cell {
border: 1px solid black;
}
CSS fijo:
.cell {
border: 1px solid gray;
min-width: 10px;
min-height: 20px;
display: inline-block;
}
Sería mucho más limpio usar variables CSS y cuadrícula CSS para crear filas y columnas dinámicas.
const container = document.getElementById("container");
function makeRows(rows, cols) {
container.style.setProperty(''--grid-rows'', rows);
container.style.setProperty(''--grid-cols'', cols);
for (c = 0; c < (rows * cols); c++) {
let cell = document.createElement("div");
cell.innerText = (c + 1);
container.appendChild(cell).className = "grid-item";
};
};
makeRows(16, 16);
:root {
--grid-cols: 1;
--grid-rows: 1;
}
#container {
display: grid;
grid-gap: 1em;
grid-template-rows: repeat(var(--grid-rows), 1fr);
grid-template-columns: repeat(var(--grid-cols), 1fr);
}
.grid-item {
padding: 1em;
border: 1px solid #ddd;
text-align: center;
}
<div id="container">
</div>
Tratar
let n=16, s='''';
for(let i=0; i<n; i++) {
s+= ''<div class="row">''
for(let j=0; j<n; j++) s+= `<div class="cell"> ${(i*n+j).toString(16)} </div>`;
s+= ''</div>''
}
container.innerHTML = s;
.row { display: flex; font-size: 9.5px; text-align: center; color: red }
.cell { width: 10px; height: 10px; margin: 1px; border: 1px solid black;}
<div id="container"></div>