Create dynamic cells for CSS grid using JavaScript

Question

Create dynamic cells for CSS grid using JavaScript

I have been manually generating grid cells in a specific pattern by copying and adjusting <div> elements. Although this method works, I am interested in creating an algorithm that can automatically generate the desired layout. The left box in the example below illustrates the dynamic calculation I am aiming for.

function createGridCells(){
let cells = '';
  for(let a = 1; a <= 10; a++){
    for(let b = 1; b <= a; b++){
        cells += `<div style="background:#fd8362; grid-area: ${a % b} / ${a % b} / ${a % b} / ${a % b}">
        ${b}
      </div>`
    }
  }
  return cells;
}

document.getElementById("grid-body-algorithm").innerHTML = createGridCells();

#grid-body,
#grid-body-algorithm {
    float:left;
    margin-right:30px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
    text-align: center;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    justify-content: center;
    align-content: end;
    border-radius: 5px;
    width:150px;
    height:150px;
    color:#444444;
    padding:1px;
}

#grid-body > *,
#grid-body-algorithm > *{
  border:1px solid white;
}

<div id="grid-body">
  <div style="background:#fd8362; grid-area: 1 / 1 / 1 / 1">1</div>

  <div style="background:#ffad97; grid-area: 2 / 1 / 2 / 1">1</div>
  <div style="background:#ffad97; grid-area: 1 / 2 / 1 / 2">2</div>

  <div style="background:#ffded6; grid-area: 3 / 1 / 3 / 1">1</div>
  <div style="background:#ffded6; grid-area: 2 / 2 / 2 / 2">2</div>
  <div style="background:#ffded6; grid-area: 1 / 3 / 1 / 3">3</div>

  <div style="background:#fff0ec; grid-area: 4 / 1 / 4 / 1">1</div>
  <div style="background:#fff0ec; grid-area: 3 / 2 / 3 / 2">2</div>
  <div style="background:#fff0ec; grid-area: 2 / 3 / 2 / 3">3</div>
  <div style="background:#fff0ec; grid-area: 1 / 4 / 2 / 4">4</div>
</div>

<div id="grid-body-algorithm">
  
</div>

javascript html css algorithm

Answer 1

Answer №1

By examining the desired output, it is evident that the color of a cell is determined by the taxicab distance from the top-left corner, while the column number dictates the text content of the cell.

When implementing the inner loop, it is important to set a maximum limit on the taxicab distance. This limit can be customized as a parameter in your function. In this specific example, the maximum distance is set at 3 (which means cells up to 3 taxicab steps away from the top-left cell are considered).

Moreover, the color intensity seems to decrease with an increase in taxicab distance. To achieve this effect, adjustments can be made to the alpha component of the background color using the RGBA model. The alpha value ranges between 0 and 1.

Instead of generating HTML directly, I chose to create a document fragment for more controlled manipulation of cell attributes using JavaScript syntax, resulting in a more object-oriented approach.

The CSS styles provided have not been altered in this implementation.

In addition to the existing code, I have introduced an input field that enables users to specify the maximum taxicab distance:

function calcCells(maxDistance) {
  const fragment = document.createDocumentFragment();
  for (let row = 1; row <= 5; row++) {
    // row + col - 2 represents the taxicab distance from the top-left corner
    for (let col = 1, distance = row - 1; distance <= maxDistance && col <= 5; col++, distance++) { 
        const cell = document.createElement("div");
        // Adjust background transparency based on the calculated alpha value
        cell.style.background = `rgba(240,120,80,${1 - (distance + 0.5) / (maxDistance + 1)})`;
        cell.style.gridArea = [row, col, row, col].join(" / ");
        cell.textContent = col;
        fragment.appendChild(cell);
    }
  }
  return fragment;
}

const inputDistance = document.querySelector("input");
const outputGrid = document.getElementById("grid-body-algorithm");

function refresh() {
    const maxDistance = +inputDistance.value;
    outputGrid.innerHTML = ""; // Clear previous content
    outputGrid.appendChild(calcCells(maxDistance));
}

inputDistance.addEventListener("click", refresh);
refresh();

#grid-body,
#grid-body-algorithm {
    float:left;
    margin-right:30px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
    text-align: center;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    justify-content: center;
    align-content: end;
    border-radius: 5px;
    width:150px;
    height:150px;
    color:#444444;
    padding:1px;
}

#grid-body > *,
#grid-body-algorithm > *{
  border:1px solid white;
}

<div id="grid-body-algorithm"></div>
distance: <input type="number" value="3" min="0" max="8">

Answer 2

By examining the desired output, it is evident that the color of a cell is determined by the taxicab distance from the top-left corner, while the column number dictates the text content of the cell.

When implementing the inner loop, it is important to set a maximum limit on the taxicab distance. This limit can be customized as a parameter in your function. In this specific example, the maximum distance is set at 3 (which means cells up to 3 taxicab steps away from the top-left cell are considered).

Moreover, the color intensity seems to decrease with an increase in taxicab distance. To achieve this effect, adjustments can be made to the alpha component of the background color using the RGBA model. The alpha value ranges between 0 and 1.

Instead of generating HTML directly, I chose to create a document fragment for more controlled manipulation of cell attributes using JavaScript syntax, resulting in a more object-oriented approach.

The CSS styles provided have not been altered in this implementation.

In addition to the existing code, I have introduced an input field that enables users to specify the maximum taxicab distance:

function calcCells(maxDistance) {
  const fragment = document.createDocumentFragment();
  for (let row = 1; row <= 5; row++) {
    // row + col - 2 represents the taxicab distance from the top-left corner
    for (let col = 1, distance = row - 1; distance <= maxDistance && col <= 5; col++, distance++) { 
        const cell = document.createElement("div");
        // Adjust background transparency based on the calculated alpha value
        cell.style.background = `rgba(240,120,80,${1 - (distance + 0.5) / (maxDistance + 1)})`;
        cell.style.gridArea = [row, col, row, col].join(" / ");
        cell.textContent = col;
        fragment.appendChild(cell);
    }
  }
  return fragment;
}

const inputDistance = document.querySelector("input");
const outputGrid = document.getElementById("grid-body-algorithm");

function refresh() {
    const maxDistance = +inputDistance.value;
    outputGrid.innerHTML = ""; // Clear previous content
    outputGrid.appendChild(calcCells(maxDistance));
}

inputDistance.addEventListener("click", refresh);
refresh();

#grid-body,
#grid-body-algorithm {
    float:left;
    margin-right:30px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
    text-align: center;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    justify-content: center;
    align-content: end;
    border-radius: 5px;
    width:150px;
    height:150px;
    color:#444444;
    padding:1px;
}

#grid-body > *,
#grid-body-algorithm > *{
  border:1px solid white;
}

<div id="grid-body-algorithm"></div>
distance: <input type="number" value="3" min="0" max="8">

Answer 3

Answer №2

If you want to ensure that the DOM structure is fully loaded before accessing elements, consider using an eventListener or the defer attribute.

Avoid using innerHTML to create elements as it can be slow and poses a risk of XSS Injection. Instead, opt for methods like appendChild or insertAdjacentHTML.

Using CSS for styling rather than inline styles is recommended for cleaner code. Additionally, utilizing SASS can further streamline your styling process.

When creating grid elements dynamically, remember to use separate variables for rows and columns in your loops. The first loop should handle rows while the second loop manages columns:

window.addEventListener('DOMContentLoaded', function() {
  for (let i = 1, n = 5; i < 5; i++) {
    for (let j = 1; j < n; j++) {
      document.querySelector('#grid-body-algorithm').insertAdjacentHTML('beforeend', `
        <div data-row="${i}" data-col="${j}">${j}</div>`
      );
    }
    n--;
  }
})

#grid-body-algorithm {
  width: 150px;
  height: 150px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  padding: 2px;
  gap: 2px;
  border: 1px solid black;
}

[data-row="1"] { grid-row: 1 / 2; }
[data-row="2"] { grid-row: 2 / 3; }
[data-row="3"] { grid-row: 3 / 4; }
[data-row="4"] { grid-row: 4 / 5; }
[data-row="5"] { grid-row: 5 / 6; }

[data-row="1"][data-col="1"] { background: #fd8362; }
[data-row="1"][data-col="2"],
[data-row="2"][data-col="1"] { background: #ffad97; }
[data-row="1"][data-col="3"],
[data-row="2"][data-col="2"],
[data-row="3"][data-col="1"] { background: #ffded6; }
[data-row="1"][data-col="4"],
[data-row="2"][data-col="3"],
[data-row="3"][data-col="2"],
[data-row="4"][data-col="1"] { background: #fff0ec; }

<div id="grid-body-algorithm"></div>

Answer 4

If you want to ensure that the DOM structure is fully loaded before accessing elements, consider using an eventListener or the defer attribute.

Avoid using innerHTML to create elements as it can be slow and poses a risk of XSS Injection. Instead, opt for methods like appendChild or insertAdjacentHTML.

Using CSS for styling rather than inline styles is recommended for cleaner code. Additionally, utilizing SASS can further streamline your styling process.

When creating grid elements dynamically, remember to use separate variables for rows and columns in your loops. The first loop should handle rows while the second loop manages columns:

window.addEventListener('DOMContentLoaded', function() {
  for (let i = 1, n = 5; i < 5; i++) {
    for (let j = 1; j < n; j++) {
      document.querySelector('#grid-body-algorithm').insertAdjacentHTML('beforeend', `
        <div data-row="${i}" data-col="${j}">${j}</div>`
      );
    }
    n--;
  }
})

#grid-body-algorithm {
  width: 150px;
  height: 150px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  padding: 2px;
  gap: 2px;
  border: 1px solid black;
}

[data-row="1"] { grid-row: 1 / 2; }
[data-row="2"] { grid-row: 2 / 3; }
[data-row="3"] { grid-row: 3 / 4; }
[data-row="4"] { grid-row: 4 / 5; }
[data-row="5"] { grid-row: 5 / 6; }

[data-row="1"][data-col="1"] { background: #fd8362; }
[data-row="1"][data-col="2"],
[data-row="2"][data-col="1"] { background: #ffad97; }
[data-row="1"][data-col="3"],
[data-row="2"][data-col="2"],
[data-row="3"][data-col="1"] { background: #ffded6; }
[data-row="1"][data-col="4"],
[data-row="2"][data-col="3"],
[data-row="3"][data-col="2"],
[data-row="4"][data-col="1"] { background: #fff0ec; }

<div id="grid-body-algorithm"></div>

Create dynamic cells for CSS grid using JavaScript

Answer №1

Answer №2

Similar questions

What is the best way to delete a particular tag using jQuery?

Capturing the dynamic server response with nested JSON structures

Next.js appending [object%20Object] to the URL's endpoint

Performing ad-hoc queries on a Postgresql database using Node.js and Express to manipulate row data

Difficulty in preventing the website from reloading when accessing tabs

How to implement setState within a Promise function using useEffect in React functional components with hooks?

The shopping cart in our e-commerce website is refreshed in real-time thanks to the integration of J

Displaying the content of a modal window

A guide on rotating loaders and inserting custom text within loaders using CSS

Encountering issues with running `npm start` following the creation of a fresh React project using create

Automatically updating database with Ajax post submission

Trying to align a Material UI button to the right within a grid item

unable to save the information to mongoDB

Whenever I try to include something within the `componentWillUnmount` function,

Unable to successfully import an external HTML file that contains a script tag

Error in ReactJS: Attempting to access property 'preventDefault' of an undefined value

Syntax error is not caught - why are there invalid regular expression flags being used?

Having trouble locating elements using Selenium in Python?

Javascript recursive method for fetching data entries

What is the process for integrating GitHub repository code into my client-side JavaScript application?