javascript - How to create a text background - two giant numbers (score counter)

Question

I've created a rock paper scissors game as part of the TOP curriculum.

I want to display the human score and computer score as two GIANT digits shown behind all other elements. Preferably the digits take up 50% of the screen's width each.

For the life of me, I can't get this to work. So far, my code looks like this:

https://codepen.io/givemeskills/pen/GRjMYPN

#testContainer {
  max-height: 100%;
  z-index: -1;
  display: flex;
  justify-content: center;
  position: relative;
  top: 400px;
  border-color: blue;
  border-style: solid;
}

#test {
  width: 50%;
  display: flex;
  justify-content: space-between;
  border-color: red;
  border-style: solid;
  font-size: x;
  margin: 10px;
  font-size: 100px;
  overflow: hidden;
}

<div id="testContainer">
  <div id="test">
    <p id="humanScoreDispTest">3</p>
    <p id="compScoreDispTest">3</p>
  </div>
</div>

Answer 1

You have to use the font-size property. You wrote just an x, which is not a valid value (also checked it back to the CSS validator). You have to write something like 4rem or in another unit like 400%.

If you want to adjust the font height (=font-size) so that the font takes up 50% of the width, it's not so easy. Different fonts have a different width / height proportion, also depending on the letter. For this you would need JavaScript, pure CSS isn't enough. But I think, that cannot be your goal, here is an example to show why: If the computer have the result 100 and the human the result 5, the 5 would be a lot bigger than the 100.