Resize a dot and making that dot appear without having to write text inside of it

Resize a dot and making that dot appear without having to write text inside of it

I have a problem a dot on my garboard canvas. First of all, my dot does not show up until i add text to, which is weird since I set it a height and width of 100 and 40.

I’m using codepen, which is why I know it’s not a linking problem. Next, I can change the attributes 100 and 40, but the dot itself does not move, it though I assigned it the class of .man.

I also know that this will probably look simple yo most of you, but I’m just a kid, so I don’t know too much.
Here is my code:

// calling the dice id and "listening" to when it is clicked and then running numChange
var dice = document.getElementById("dice").addEventListener("click", numChange);
// creating a function called numChange without any arguements and alerting a random number 1-6
function numChange() {
  alert(Math.floor(Math.random() * 6 + 1));
}
// slecting "man" using doc.qs and calling upon ".man"
let circle = document.getElementById("stick-man");
let moveBy = 25;
//adding a el to window and setting atrubute to "load", as well a empty () and a reference =>
window.addEventListener("load", () => {
  //circle position now "absolute"
  circle.style.position = "absolute";
  //my circle is now at the top left corner
  circle.style.left = 0;
  circle.style.top = 0;
});
// checking if positition is 550 and 75, though it will change thanks to my new baord...
function verifyPosition(circleLeftPosition, circleRightPosition, moveBy) {
  //console.log(circleLeftPosition, circleRightPosition );
  if (circleLeftPosition == '550px' && circleRightPosition == '75px') {
    alert("Who created the internet?");
    //Something.. HAVE NO IDEA WHAT THOUGH! b
  }
}
// another ael but this time for "keyup", with e inside our (), and our => {}
window.addEventListener("keyup", (e) => {
  switch (e.key) {
    //fist case checs for left arrow
    case "ArrowLeft":
      verifyPosition(circle.style.left, circle.style.top, moveBy);
      circle.style.left = parseInt(circle.style.left) - moveBy + "px";
      break;
      //second for right arrow
    case "ArrowRight":
      verifyPosition(circle.style.left, circle.style.top, moveBy);
      circle.style.left = parseInt(circle.style.left) + moveBy + "px";
      break;
    case "ArrowUp":
      //third for up
      verifyPosition(circle.style.left, circle.style.top, moveBy);
      circle.style.top = parseInt(circle.style.top) - moveBy + "px";
      break;
    case "ArrowDown":
      //fourth for down
      verifyPosition(circle.style.left, circle.style.top, moveBy);
      circle.style.top = parseInt(circle.style.top) + moveBy + "px";
      break;
  }
});

const popOpen = document.querySelectorAll('[data-popup-target]');
const popClose = document.querySelectorAll('[data-button]');
const overLay = document.getElementById('overlay');

popOpen.forEach(button => {
  button.addEventListener('click', () => {
    const pop = document.querySelectorAll(button.dataset.popupTarget);
    openPopup(pop);
  });
});

popClose.forEach(button => {
  button.addEventListener('click', () => {
    const pop = button.closest('.popup');
    closePopup(pop);
  });
});

function openPopup(pop) {
  if (pop == null) return;
  popup.classList.add('active');
  overLay.classList.add('active');
}

function closePopup(pop) {
  if (pop == null) return;
  popup.classList.remove('active');
  overLay.classList.remove('active');
}


const openErrorPop = document.querySelectorAll('[data-target]')
const closeErrorPop = document.querySelectorAll('[data-pop-close]')
const overlay = document.getElementById('pop-idOverlay')

closeErrorPop.forEach(button => {
  button.addEventListener('click', () => {
    const pop = button.closest('.class-pop')
    closePop(pop)
  })
})

openErrorPop.forEach(button => {
  button.addEventListener('click', () => {
    const pop = document.querySelector(button.dataset.target)
    openPop(pop)
  })
})

function openPop(pop) {
  if (pop == null) return
  pop.classList.add('active')
  overlay.classList.add('active')
}

function closePop(pop) {
  if (pop == null) return
  pop.classList.remove('active')
  overlay.classList.remove('active')
}
/* styles man  not yet working*/

.stick-man {
  cursor: pointer;
  height 100px;
  width: 40px;
  border-radius: 50%;
  background-color: red;
  z-index: 16;
}


/* style button */

.open {
  position: absolute;
  top: 15px;
  right: 340px;
}


/* makes a board for the grid so stay on */

.board {
  position: absolute;
  display: grid;
  justify-content: center;
  align-content: center;
  /*   (commented out)grid-gap: -1px; */
  left: 220px;
  top: 45px;
  grid-template-columns: repeat(5, 10vw);
  grid-template-rows: repeat(5, 10vw);
}


/* styles all sqaures at once */

.square {
  width: 100%;
  height: 100%;
  border: 1px solid black;
}


/* styles sqaure 1 */

.square:nth-child(1) {
  grid-row: 1;
  grid-column: 1;
}


/* styles sqaure 2 */

.square:nth-child(2) {
  grid-row: 1;
  grid-column: 2;
}


/* styles sqaure 3 */

.square:nth-child(3) {
  grid-row: 1;
  grid-column: 3;
}


/* styles sqaure 4 */

.square:nth-child(4) {
  grid-row: 1;
  grid-column: 4;
}


/* styles sqaure 5 */

.square:nth-child(5) {
  grid-row: 1;
  grid-column: 5;
}


/* styles sqaure 6 */

.square:nth-child(6) {
  grid-row: 2;
  grid-column: 5;
}


/* styles sqaure 7 */

.square:nth-child(7) {
  grid-row: 3;
  grid-column: 5;
}


/* styles sqaure 8 */

.square:nth-child(8) {
  grid-row: 4;
  grid-column: 5;
}


/* styles sqaure 9 */

.square:nth-child(9) {
  grid-row: 5;
  grid-column: 5;
}


/* styles sqaure 101 */

.square:nth-child(10) {
  grid-row: 5;
  grid-column: 4;
}


/* styles sqaure 11 */

.square:nth-child(11) {
  grid-row: 5;
  grid-column: 3;
}


/* styles sqaure 12 */

.square:nth-child(12) {
  grid-row: 5;
  grid-column: 2;
}


/* styles sqaure 13 */

.square:nth-child(13) {
  grid-row: 5;
  grid-column: 1;
}


/* styles sqaure 14 */

.square:nth-child(14) {
  grid-row: 4;
  grid-column: 1;
}


/* styles sqaure 15 */

.square:nth-child(15) {
  grid-row: 3;
  grid-column: 1;
}


/* styles sqaure 16 */

.square:nth-child(16) {
  grid-row: 2;
  grid-column: 1;
}


/* giving padding to baord elements */

.board {
  padding: 1em 0;
}


/* cleans up by transfering more .sqaure code another call */

.square {
  background: #eaeaea;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* .man2 {
  position: absolute;
  top: 410px;
  right: 545px;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  background-color: black;
  animation: up 9s infinite;
  animation-delay: 8.5s;
}
.man3 {
  position: absolute;
  top: 100px;
  right: 545px;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  background-color: black;
  animation: right2 9s infinite;
  animation-delay: 17s;
} */


/* @keyframes right {
  from {
    right: 240px;
  }
  to {
    right: 540px;
  }
  0% {
    background-color: black;
  }
  50% {
    background-color: black;
  }
  75% {
    background-color: black;
  }
  100% {
    background-color: #c0c0c0;
  }
} */


/* makes a dice visible and clickable */

.dice {
  cursor: pointer;
  width: 50px;
  height: 50px;
  background-color: #AB6634;
  position: absolute;
  right: 440px;
  top: 320px;
  z-index: 9;
}


/* creates a templat for the dice, and lator on cards and text, to sit on */

.inside-board {
  position: absolute;
  height: 45%;
  width: 30%;
  background-color: #f5f5f5;
  top: 145px;
  right: 290px;
}


/* pre-code for question number one (may be deleted) */

.q1 {
  position: absolute;
  top: 440px;
  right: 200px;
}


/* changes font family to dosis for less-ugly looking text */

* {
  font-family: dosis, sans-serif;
}


/* popup code */


/* styles popupe created in HTML */

.class-pop {
  position: fixed;
  top: 50%;
  left: 50%;
  transition: 300ms ease-in-out;
  transform: translate(-50%, -50%) scale(0);
  border: 1px solid black;
  border-radius: 10px;
  z-index: 10;
  background-color: white;
}


/* makes popup appear when .active is applied to the list */

.class-pop.active {
  transform: translate(-50%, -50%) scale(1);
}


/* styles header */

.pop-classhead {
  padding: 5px 15px;
  display: flex;
  justify-content: space-between;
  align-item: center;
  border-bottom: 1px solid black;
}


/* styles the title so it stands out */

.classhead-title {
  font-size: 1.25rem;
  font-weight: bold;
}


/* styles the button on the header */

.classhead-close {
  cursor: pointer;
  border: 1px solid blue;
  outline: 1px solid blue;
  background: white;
  font-size: 1.05rem;
  font-weight: bold;
}


/* makes the body seem less squezed into the box */

.pop-classbody {
  padding: 10px 15px;
}


/* stretches the overlay to every corner of the screen and colors it */

.pop-classoverlay {
  position: fixed;
  opacity: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: 300ms ease-in-out;
  background-color: rgba(0, 0, 0, .5);
  pointer-events: none;
}


/* makes it appear when .active is added to the list */

.pop-classoverlay.active {
  opacity: 1;
  pointer-events: all;
}


/* comented out code */


/* 
.img {
  height: 30px;
  width: 50px;
}

.form {
  font-size: 1.00rem;
} */


/* td {
  background-color: #BA7A3A;
  width: 65px;
  height: 65px;
  text-align: center;
}

.noPeice {
  background-color: #F0D2B4;
} */
<!-- title -->
<h1 class="board">STORIE</h1>
<!-- starting div's -->
<div class="stick-man" id="stick-man">/. / </div>
<div class="dice" id="dice"></div>
<div class="inside-board"></div>
<!-- baord element -->
<div class="board">
  <!--   start square -->
  <div class="square">START
    <!--     opening button -->
    <button class="open" data-target="#id-pop">
    I
  </button>
    <!--     popup head parent -->
    <div class="class-pop" id="id-pop">
      <!--     popup head -->
      <div class="pop-classhead" id="pop-idHead">
        <div class="classhead-title" data-id-Head-title>Info Card #1</div>
        <button data-pop-close class="classhead-close" id="idHead-close">&times;</button>
      </div>
      <!--     popup body -->
      <div class="pop-classbody" data-pop-idBody>
        Bob Khan and Vint Cerf created internet in the 1900's. Eventually, the internet, then called the E-ternet became public. For more information, visite <a href="https://en.wikipedia.org/wiki/Internet">This wikipedia page</a><br>
        <!--       form elment for checkbox -->
        <form>Did you click the link?
          <inb put type="checkbox">
        </form>
      </div>
    </div>
    <!--     gray overylay -->
    <div class="pop-classoverlay" id="pop-idOverlay"></div>

  </div>
  <!--   inactive sqaures -->
  <!--   garduin sqaure parent div -->
  <div class="square">guardian</div>
  <!--   blank square parent div -->
  <div class="square">blank</div>
  <!--   garduin sqaure parent div -->
  <div class="square">LAVA</div>
  <!--    LAVA sqaure parent div -->
  <div class="square">blank</div>
  <!--   blank sqaure parent div -->
  <div class="square">NATIVE</div>
  <!--   NATIVE blank parent div -->
  <div class="square">blank</div>
  <!--   blank sqaure parent div -->
  <div class="square">blank</div>
  <!--   blank sqaure parent div -->
  <div class="square">wizard</div>
  <!--   wizard sqaure parent div -->
  <div class="square">blank</div>
  <!--   blank sqaure parent div -->
  <div class="square">king</div>
  <!--   king sqaure parent div -->
  <div class="square">bank</div>
  <!--   bank sqaure parent div -->
  <div class="square">EARTH</div>
  <!--   EARTH sqaure parent div -->
  <div class="square">guardian</div>
  <!--   garduin sqaure parent div -->
  <div class="square">blank</div>
  <!--   blank sqaure parent div -->
  <div class="square">blank</div>
  <!--   blank sqaure parent div -->
</div>
<!-- code for later -->
<!--   <div class="q1" id="q1">
    <ul>
      <li>Who created the internet?</li>
      <li><a heref="#">Bob Khan</a></li>
      <li><a heref="#">Vint Cerf</a></li>
      <li><a heref="#">Both Bob Khan and Vint Cerf</a></li>
    </ul>
  </div>
  <div>
  </div>
  </div> -->

<!--   <table>
  <tr>
    <td></td>
    <td class="noPeice"></td>
    <td></td>
    <td class="noPeice"></td>
    <td></td>
    <td class="noPeice"></td>
    <td></td>
    <td class="noPeice"></td>
  </tr>
  <tr>
    <td class="noPeice"></td>
    <td></td>
    <td class="noPeice"></td>
    <td></td>
    <td class="noPeice"></td>
    <td></td>
    <td class="noPeice"></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td class="noPeice"></td>
    <td></td>
    <td class="noPeice"></td>
    <td></td>
    <td class="noPeice"></td>
    <td></td>
    <td class="noPeice"></td>
  </tr>
  <tr>
    <td class="noPeice"></td>
    <td></td>
    <td class="noPeice"></td>
    <td></td>
    <td class="noPeice"></td>
    <td></td>
    <td class="noPeice"></td>
    <td></td>
  </tr>
  <tr>
    <td class="noPeice"></td>
    <td></td>
    <td class="noPeice"></td>
    <td></td>
    <td class="noPeice"></td>
    <td></td>
    <td class="noPeice"></td>
    <td></td>
  </tr>
  <tr>
    <td class="noPeice"></td>
    <td></td>
    <td class="noPeice"></td>
    <td></td>
    <td class="noPeice"></td>
    <td></td>
    <td class="noPeice"></td>
    <td></td>
  </tr>
  <tr>
    <td class="noPeice"></td>
    <td></td>
    <td class="noPeice"></td>
    <td></td>
    <td class="noPeice"></td>
    <td></td>
    <td class="noPeice"></td>
    <td></td>
  </tr>
  <tr>
    <td class="noPeice"></td>
    <td></td>
    <td class="noPeice"></td>
    <td></td>
    <td class="noPeice"></td>
    <td></td>
    <td class="noPeice"></td>
    <td></td>
  </tr>
</table> -->

First, thank you for posting a complete set of code!

I don’t think this is “obvious” or “simple”, but then I don’t know HTML/CSS/JS. But with CodePen and your complete code I can at least experiment!

So my first thought is that .stick-man sets the style on the <div>. I.e. you are not drawing a circle inside the <div>, but are making the <div> look like a circle! But a <div> is invisible unless it has something in it, which is why you have to add text!

You can add “invisible” text by using &nbsp;, e.g.

<div class="stick-man" id="stick-man">&nbsp;</div>

My second thought is perhaps you want to actually draw a circle instead of modifying the <div>. This page shows an example of drawing a circle using a <span>. I’m only guessing but perhaps if you put a circle <span> inside your <div> [after removing the existing styles] you can then move the <span> instead of the <div>.

but the dot itself does not move

I’m confused about this statement - the “dot” moves about inside its div fine for me, using the arrow keys. Could you clarify?