Kevin Powell - Community•10mo ago

Generate new DOM

I was showing my stuff for other people and they said the way I'm generating new DOM is a bad practice. Is that so? what would be a better way to achieve athe same thing then?

10 Replies

Pi, a future fluent jp speakerOP•10mo ago

https://codepen.io/leoncelestino/pen/wvObBax

LeonCelestino

CodePen

Wordle Game

...

glutonium•10mo ago

why are u using document fragment and not directly appending to the main dom

Pi, a future fluent jp speakerOP•10mo ago

I heard it is more performant using a document fragment

glutonium•10mo ago

it is not nescessary here i think if there are cases where u have to make dom element but add it to the main dom after a certain time or in certain state then u can use it. that way your main dom is not filled with unnescessary elements at least thats what i think how it works anyways, try changing your css to this

.wordle-grid {
    width: 100%;
    padding: 2rem;
    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
    place-content: center;
    gap: 1rem;

}

.card {
  aspect-ratio: 1;
}

.wordle-grid {
    width: 100%;
    padding: 2rem;
    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
    place-content: center;
    gap: 1rem;

}

.card {
  aspect-ratio: 1;
}

this makes it responsive

Pi, a future fluent jp speakerOP•10mo ago

What about rows It needs to have specifically 4 rows

glutonium•10mo ago

it will automatically generate new row

Pi, a future fluent jp speakerOP•10mo ago

it gets too big aswell

glutonium•10mo ago

use clamp for the font or u can set a minmax on grid items u can try to separate the generateGrid into 2 functions

const generateGrid = word => {
    const length = word.length || 0;
    const wordle = document.querySelector("#Wordle");
  
    for (let i = 0; i < length*4; i++) {
        wordle.appendChild(createTile(i));
    }

    const card = document.querySelector(".js-card");
    const cardRect = card.getBoundingClientRect();
    const newHeight = cardRect.width / 16;

    document.documentElement.style.setProperty("--columns", length);
    document.documentElement.style.setProperty("--row-size", `${newHeight}rem`);
}


function createTile(i){
  
  const attr = {
    type: "text",
    placeHolder: "o",
    maxLength: 1,
    value: "",
    "data-elfocus": i
  }
  
  const div = document.createElement("div");
  const textField = document.createElement("input");
  div.classList.add("js-card", "card", "m-card-style");
  textField.classList.add("text-field", "js-inputField");
  for(let [key, value] of Object.entries(attr)){
    textField.setAttribute(key, value);
  }
  div.appendChild(textField);
  return div;
}

const generateGrid = word => {
    const length = word.length || 0;
    const wordle = document.querySelector("#Wordle");
  
    for (let i = 0; i < length*4; i++) {
        wordle.appendChild(createTile(i));
    }

    const card = document.querySelector(".js-card");
    const cardRect = card.getBoundingClientRect();
    const newHeight = cardRect.width / 16;

    document.documentElement.style.setProperty("--columns", length);
    document.documentElement.style.setProperty("--row-size", `${newHeight}rem`);
}


function createTile(i){
  
  const attr = {
    type: "text",
    placeHolder: "o",
    maxLength: 1,
    value: "",
    "data-elfocus": i
  }
  
  const div = document.createElement("div");
  const textField = document.createElement("input");
  div.classList.add("js-card", "card", "m-card-style");
  textField.classList.add("text-field", "js-inputField");
  for(let [key, value] of Object.entries(attr)){
    textField.setAttribute(key, value);
  }
  div.appendChild(textField);
  return div;
}

improve class names as well

Jochem•10mo ago

you really need to stop worrying about this, unless you're running into issues it's pretty far down the list of considerations for most webdevelopment project frontends

13eck•10mo ago

And multiplying by 0.5 is more performant than dividing by 2 :p But such minimal gains are not worth the effort unless you know that this particular thing is your bottleneck. Write code that works first. Then, if things are slow, do some perf tests to see where the slowdown is. Focus on that part. Premature optimisation is just wasted time

Gaming

Programming

Generate new DOM