CODEWITHSUNDEEP
cssunicode
Bob
Bob

Reputation: 97

How do I make my unicode within span encompass full width and height of parent?

so basically when I press roll, I want the dice visuals that appear to span the full width and height of the span element that it is within. I also want that span element to take up 100% of its parent container div, with the class name "dice".

Here is my JS:

const btn=document.querySelector("button")
const player=document.querySelectorAll('.player')


player.forEach(player=> {
  diceDiv=document.createElement("div")
  span=document.createElement("span")
  player.appendChild(diceDiv)
  diceDiv.appendChild(span)
})



const diceRoll=(span)=> {
  let numOfDots = Math.floor(Math.random() * 6) + 1  
  span.innerHTML='&#9856'
}


btn.addEventListener('click', ()=> {
  player.forEach(player=> player.firstElementChild.classList.add("dice"))
  const spans=document.querySelectorAll('span')
  spans.forEach(span=> {
    diceRoll(span)
  })
})

However, I tried doing this and the unicode dice face is still appearing at the bottom of my div. Why is that?

Upvotes: 0

Views: 236

Answers (1)

shubham_kamath
shubham_kamath

Reputation: 389

I hope the main purpose of this game is JS and not CSS, After playing with your fiddle, If you add following properties to your span element, it would take the space of parent div i.e "dice"

display: inline-block;
font-size: 202px;
margin-top: -72px;

Upvotes: 0

Related Questions