Flexbox text moves countdown timer unintentionally-CodePudding

I am making a countdown timer and my text below the numbers are moving when my numbers turn into the single digits. I have tried different flexbox configurations and I can't seem to prevent it from moving. I'm wondering if this is a flexbox issue or if there is something I am missing with my code that I have written.

let countDownDate = new Date("Dec 17, 2022 00:00:00").getTime();
let x = setInterval(function() {
  let now = new Date().getTime();
  let distance = countDownDate - now;

  let days = Math.floor(distance / (1000 * 60 * 60 * 24));
  let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  let seconds = Math.floor((distance % (1000 * 60)) / 1000);

  document.getElementById("days").innerHTML = days;
  document.getElementById("hours").innerHTML = hours;
  document.getElementById("minutes").innerHTML = minutes;
  document.getElementById("seconds").innerHTML = seconds;

  // clearing set interval. If we did not do this, the webpage would
  // display negative numbers.
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("days").innerHTML = "00";
    document.getElementById("hours").innerHTML = "00";
    document.getElementById("minutes").innerHTML = "00";
    document.getElementById("seconds").innerHTML = "00";
  }
}, 1000);

* {
  box-sizing: border-box;
}

.countdown {
  display: flex;
  height: 750px;
}

.time {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 60px;
  padding: 5px;
}

.time h2 {
  font-weight: bold;
  font-size: 100px;
  line-height: 1;
  margin: 0 0 30px;
}

.time span {
  font-size: 20px;
}

@media (max-width: 500px) {
  h1 {
    font-size: 45px;
  }
  .time {
    margin: 5px;
  }
  .time h2 {
    font-size: 12px;
  }
  .time span {
    font-size: 10px;
  }
}

body {
  font-family: "Poppins", sans-serif;
  color: aliceblue;
  background-image: url("background.jpg");
  background-repeat: no-repeat;
  background-size: 2300px;
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: left;
  text-align: left;
  margin: 0;
  overflow: hidden;
}

h1 {
  position: absolute;
  top: 20px;
  left: 50px;
  font-size: 100px;
  font-weight: lighter;
}

<h1>The <span>Final </span>Countdown</h1>

<div id="countdown" >
  <div >
    <h2 id="days">00</h2>
    <span>Days</span>
  </div>
  <div >
    <h2 id="hours">00</h2>
    <span>Hours</span>
  </div>
  <div >
    <h2 id="minutes">00</h2>
    <span>Minutes</span>
  </div>
  <div >
    <h2 id="seconds">00</h2>
    <span>Seconds</span>
  </div>
</div>

CodePudding user response：

So there is no fixed width of .time box.

Please update the CSS code of .time given below, where i have removed margin and added width of the time box. you can give width of your choice. width: 250px;

.time {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5px;
  width: 250px;
}

CodePudding user response：

I would not solve it CSS-wise but JS-wise. You convert a negative number and a 0 automatically into a 00.

It would be only logical to change that for single digit numbers aswell. Just display every number as a 2 digit number by using padStart(2, '0').

I also changed your code and replaced innerHTML to textContent for security (XSS-Injections) and performance (doesn't need to re-parse the DOM) reasons!

let countDownDate = new Date("Dec 17, 2022 00:00:00").getTime();
let x = setInterval(function() {
  let now = new Date().getTime();
  let distance = countDownDate - now;

  let days = Math.floor(distance / (1000 * 60 * 60 * 24));
  let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  let seconds = Math.floor((distance % (1000 * 60)) / 1000)
  

  document.getElementById("days").textContent = String(days).padStart(2, '0');
  document.getElementById("hours").textContent = String(hours).padStart(2, '0');
  document.getElementById("minutes").textContent = String(minutes).padStart(2, '0');
  document.getElementById("seconds").textContent = String(seconds).padStart(2, '0');
  seconds = toString(seconds).padStart(2, '0');

  // clearing set interval. If we did not do this, the webpage would
  // display negative numbers.
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("days").textContent = "00";
    document.getElementById("hours").textContent = "00";
    document.getElementById("minutes").textContent = "00";
    document.getElementById("seconds").textContent = "00";
  }
}, 1000);

* {
  box-sizing: border-box;
}

.countdown {
  display: flex;
  height: 750px;
}

.time {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 60px;
  padding: 5px;
}

.time h2 {
  font-weight: bold;
  font-size: 100px;
  line-height: 1;
  margin: 0 0 30px;
}

.time span {
  font-size: 20px;
}

@media (max-width: 500px) {
  h1 {
    font-size: 45px;
  }
  .time {
    margin: 5px;
  }
  .time h2 {
    font-size: 12px;
  }
  .time span {
    font-size: 10px;
  }
}

body {
  font-family: "Poppins", sans-serif;
  color: aliceblue;
  background-image: url("background.jpg");
  background-repeat: no-repeat;
  background-size: 2300px;
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: left;
  text-align: left;
  margin: 0;
  overflow: hidden;
}

h1 {
  position: absolute;
  top: 20px;
  left: 50px;
  font-size: 100px;
  font-weight: lighter;
}

<h1>The <span>Final </span>Countdown</h1>

<div id="countdown" >
  <div >
    <h2 id="days">00</h2>
    <span>Days</span>
  </div>
  <div >
    <h2 id="hours">00</h2>
    <span>Hours</span>
  </div>
  <div >
    <h2 id="minutes">00</h2>
    <span>Minutes</span>
  </div>
  <div >
    <h2 id="seconds">00</h2>
    <span>Seconds</span>
  </div>
</div>