create 5x5 grid in javascript

To create a 5x5 grid in JavaScript, you can use a nested for loop to iterate over the rows and columns and create HTML elements for each cell. Here's an example code snippet:


index.tsx
// select the grid container element
const container = document.querySelector('.grid-container');

// create a nested for loop to iterate over rows and columns
for(let i = 0; i < 5; i++) {
  // create a row element
  const row = document.createElement('div');
  row.classList.add('row');

  for(let j = 0; j < 5; j++) {
    // create a cell element
    const cell = document.createElement('div');
    cell.classList.add('cell');

    // add the cell element to the row element
    row.appendChild(cell);
  }

  // add the row element to the grid container
  container.appendChild(row);
}
588 chars
22 lines

You can style the grid using CSS to set the width and height of the cells and the grid container, and to add borders or other decorations as needed. Here's an example:


.grid-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 10px;
  width: 500px;
  height: 500px;
  border: 1px solid black;
}

.cell {
  background-color: lightgray;
  border: 1px solid white;
  width: 100%;
  height: 100%;
}

.cell:hover {
  background-color: darkgray;
}
336 chars
21 lines

This will create a 5x5 grid with cells of equal size and a light gray background. When you hover over a cell, it will change to a darker gray color. You can customize the CSS to your liking to create different effects.

similar javascript code snippets

generate m x n grid in bootstrap in javascript

cteate grid in javascript

how to use useeffect in javascript

how to create fibonacci in javascript

how to create a proxy variable in javascript

how to parse a json string in javascript

loop in javascript

how to use usestate in javascript

create a loop in javascript

loop from 1 to 10 in javascript

related categories