Display each element of array in grid box one row JS

Question

I wish to display each char of my array into a box in only one row (see image below) using javascript.

When I use grid it displays only in one column and also sometimes my box is empty.

Here is my following code working, but only display chars without css

var questionParse = JSON.parse(currentQuestion.question); //here is for example surreal
        //display letters in random order
        for (let i = questionParse.length; i >= 0; i--) {
            const randLetters = Math.floor(Math.random() * (i+1));//Var for random letter
            [questionParse[i], questionParse[randLetters]] = [questionParse[randLetters], questionParse[i]];
        }
        questionTxt.innerHTML = questionParse.join(" "); //displays for example : r a r s l e u

Here is the code I tried but displays in column and sometimes give empty box :

        //Parse string to create array of chars, here string can be as an example surreal
        var questionParse = JSON.parse(currentQuestion.question);
        //Display letters in random order
        for (let i = questionParse.length; i >= 0; i--) {
            var anagrammeLetter = document.createElement('span');
            anagrammeLetter.className = "box";
            const randLetters = Math.floor(Math.random() * (i+1));//Var for a random letter
            [questionParse[i], questionParse[randLetters]] = [questionParse[randLetters], questionParse[i]];
            anagrammeLetter.textContent = questionParse[i];
            questionTxt.appendChild(anagrammeLetter);
        }

This is the style I use, but if you have a style using tailwind then it's perfect for me as well Style :

.box {
width: 60px;
height: 60px;
border: 2px solid var(--empty);
margin: 4px;
color: black;
text-transform: uppercase;
display: grid;
place-items: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 2.4rem;

}

Does anyone have any idea ? Thanks in advance

Andy · Accepted Answer · 2022-06-13 11:13:04Z

2

The Flexbox model will also work.

// Have a container for your letters
const letters = document.querySelector('.letters');

// Your string
const str = 'surreal';

// Temporary array
const html = [];

// Iterate over the string and push new
// letter elements into the array
for (const letter of str) {
  html.push(`<div class="letter">${letter}</div>`);
}

// Add the joined up array of strings
// as the HTML of your container
letters.innerHTML = html.join('');

.letters { display: flex; width 60%; justify-content: center; align-items: center; }
.letter { font-size: 1.2em; padding: 0.2em 0.5em; border: 1px solid #565656; border-radius: 5px; text-transform: uppercase;}
.letter:not(:last-child) { margin-right: 0.2em; }

<div class="letters"></div>

edited Jun 13, 2022 at 11:13

answered Jun 13, 2022 at 11:07

Andy

63.7k13 gold badges72 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

chubby marschmallow Over a year ago

Thank you very much, I made a mixed of your two responses and now it works

Andy Over a year ago

And that is precisely how developers work. Good job @chubbymarschmallow. We're basically like witches over a boiling cauldron - "A little bit of eye-of-newt, a eagle's feather...".

ksav · Accepted Answer · 2022-06-13 11:07:19Z

2

display: grid; should be on the parent node of the letters.

.box {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  gap: 10px;
}

.letter {
  border: 1px solid black;
  text-align: center;
  text-transform: uppercase;
}

<div class="box">
  <div class="letter">s</div>
  <div class="letter">u</div>
  <div class="letter">r</div>
  <div class="letter">r</div>
  <div class="letter">e</div>
  <div class="letter">a</div>
  <div class="letter">l</div>
</div>

edited Jun 13, 2022 at 11:07

answered Jun 13, 2022 at 11:02

ksav

20.9k6 gold badges52 silver badges69 bronze badges

1 Comment

chubby marschmallow Over a year ago

Thank you very much, I made a mixed of your two responses and now it works

Collectives™ on Stack Overflow

Display each element of array in grid box one row JS

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related