Countdown CSS visual formatting-CodePudding

I am trying to match the format in the image below.

Here is the code I have now: https://codepen.io/Brite1/pen/wvPrggj (looks like I just need to add spacing and center all numbers/text). I am not sure how to add spacing and how to center all text and numbers correctly. Please help, thanks!

    body {
  align-items: center;
  background-color: transparent;
  display: flex;
}


.container {
  color: transparent;
  margin: 0 auto;
  text-align: center;
}

.circle-time{
      color: #FE7030;
    font-size: 60px;
    font-family: "Roboto Slab", Helvetica, Arial, sans-serif;
    font-weight: bold; 
  text-align: center;

}

.timer-font{
      font-family: "Roboto Slab", Helvetica, Arial, sans-serif;
    font-weight: bold;
    color: #027B46;
    font-size: 25px;

}

CodePudding user response：

Use a wrapper and remove flex from the body. After removing the flex property from body add it in the wrapper and then use text-align to center the text.

function getNextDayOfWeek(date, dayOfWeek, hour) {
  var resultDate = new Date(date.getTime());
  resultDate.setDate(date.getDate()   (7   dayOfWeek - date.getDay()) % 7);
  resultDate.setHours(hour, 0, 0, 0);
  return resultDate;
}

var countDownDate = getNextDayOfWeek(new Date(), 5, 15);

// Update the count down every 1 second
var x = setInterval(function() {

  // Get todays date and time
  var now = new Date().getTime();

  // Find the distance between now an the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24)).toString();
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)).toString();
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)).toString();
  var seconds = Math.floor((distance % (1000 * 60)) / 1000).toString();

  // Display the result in the element with id="timer"
  document.getElementById("circle-days").innerHTML = days   "<div class='timer-font'>Days</div>";
  document.getElementById("circle-hours").innerHTML = hours   "<div class='timer-font'>Hours</div>";
  document.getElementById("circle-minutes").innerHTML = minutes   "<div class='timer-font'>Minutes</div>";
  document.getElementById("circle-seconds").innerHTML = seconds   "<div class='timer-font'>Seconds</div>";

  // If the count down is finished, write some text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("timer").innerHTML = "Drawing Winners...";
  }
}, 1000);

* {
  margin: 0;
  padding: 0;
  width: 100%;
}

body {
  background-color: transparent;
}

.wrapper {
  display: flex;
  gap: 10%;
  align-items: center;
  justify-content: center;
}

.container {
  color: transparent;
  margin: 0 auto;
  text-align: center;
}

.circle-time {
  color: #FE7030;
  font-size: 60px;
  font-family: "Roboto Slab", Helvetica, Arial, sans-serif;
  font-weight: bold;
  text-align: center;
}

.timer-font {
  font-family: "Roboto Slab", Helvetica, Arial, sans-serif;
  font-weight: bold;
  color: #027B46;
  font-size: 25px;
}

span {
  text-align: center;
}

<div >
  <span style="margin-right: 20px;">
          <span id="circle-days" ></span>
  </span>
  <span style="margin-right: 20px;">
          <span id="circle-hours" ></span>
  </span>
  <span style="margin-right: 20px;">
          <span id="circle-minutes" ></span>
  </span>
  <span id="circle-seconds" ></span> <span id="timer"></span>
</div>

CodePudding user response：

You can use a flex container, and set the elements to be the same size with flex: 1 0 150px, which reads flex-grow: 1, flex-shrink: 0, flex-basis: 150px. You can use the width of your liking, but you'll get the idea.

function getNextDayOfWeek(date, dayOfWeek, hour) {
  var resultDate = new Date(date.getTime());
  resultDate.setDate(date.getDate()   (7   dayOfWeek - date.getDay()) % 7);
  resultDate.setHours(hour, 0, 0, 0);
  return resultDate;
}

var countDownDate = getNextDayOfWeek(new Date(), 5, 15);

// Update the count down every 1 second
var x = setInterval(function() {

  // Get todays date and time
  var now = new Date().getTime();

  // Find the distance between now an the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24)).toString();
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)).toString();
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)).toString();
  var seconds = Math.floor((distance % (1000 * 60)) / 1000).toString();

  // Display the result in the element with id="timer"
  document.getElementById("circle-days").innerHTML = days   "<div class='timer-font'>Days</div>";
  document.getElementById("circle-hours").innerHTML = hours   "<div class='timer-font'>Hours</div>";
  document.getElementById("circle-minutes").innerHTML = minutes   "<div class='timer-font'>Minutes</div>";
  document.getElementById("circle-seconds").innerHTML = seconds   "<div class='timer-font'>Seconds</div>";

  // If the count down is finished, write some text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("timer").innerHTML = "Drawing Winners...";
  }
}, 1000);

body {
  align-items: center;
  background-color: transparent;
  display: flex;
}

.flex-wrapper {
  display: flex;
  min-width: 600px;
}

.flex-wrapper>span {
  flex: 1 0 150px;
}

.container {
  color: transparent;
  margin: 0 auto;
  text-align: center;
}

.circle-time {
  color: #FE7030;
  font-size: 60px;
  font-family: "Roboto Slab", Helvetica, Arial, sans-serif;
  font-weight: bold;
  text-align: center;
}

.timer-font {
  font-family: "Roboto Slab", Helvetica, Arial, sans-serif;
  font-weight: bold;
  color: #027B46;
  font-size: 25px;
}

<div >
  <span id="circle-days" >00</span>
  <span id="circle-hours" >00</span>
  <span id="circle-minutes" >00</span>
  <span id="circle-seconds" >00</span>
  <span id="timer"></span>
</div>

See live example here.