Styling with CSS to create a visual countdown display

I'm trying to replicate the format shown in the image below. https://i.sstatic.net/lnW2C.png

Currently, this is the code I have: https://codepen.io/Brite1/pen/wvPrggj (it seems like I just need to adjust spacing and center all numbers/text). I'm unsure how to correctly add spacing and center all text and numbers. Can someone please assist me with this? Thank you!

    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;

}
javascripthtmlcss

Answer №1

To center the text, use a wrapper and remove the flex property from the body. Add the flex property to the wrapper instead and then apply text-align:center to center the text.

function findNextWeekday(date, weekday, time) {
  var newDate = new Date(date.getTime());
  newDate.setDate(date.getDate() + (7 + weekday - date.getDay()) % 7);
  newDate.setHours(time, 0, 0, 0);
  return newDate;
}

var targetDate = findNextWeekday(new Date(), 5, 15);

// Update the countdown every second
var updateCountdown = setInterval(function() {

  // Get current date and time
  var currentTime = new Date().getTime();

  // Calculate the difference between current time and target time
  var timeDifference = targetDate - currentTime;

  // Calculate days, hours, minutes, seconds
  var days = Math.floor(timeDifference / (1000 * 60 * 60 * 24)).toString();
  var hours = Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)).toString();
  var minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60)).toString();
  var seconds = Math.floor((timeDifference % (1000 * 60)) / 1000).toString();

  // Display the countdown in specific elements
  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 countdown is over, display message 
  if (timeDifference < 0) {
    clearInterval(updateCountdown);
    document.getElementById("timer").innerHTML = "Selecting 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 class="wrapper">
  <span style="margin-right: 20px;">
          <span id="circle-days" class="circle-time"></span>
  </span>
  <span style="margin-right: 20px;">
          <span id="circle-hours" class="circle-time"></span>
  </span>
  <span style="margin-right: 20px;">
          <span id="circle-minutes" class="circle-time"></span>
  </span>
  <span id="circle-seconds" class="circle-time"></span> <span id="timer"></span>
</div>

Answer №2

To ensure uniform size for elements, utilize a flex container and specify the dimensions using flex: 1 0 150px, which interprets as flex-grow: 1, flex-shrink: 0, flex-basis: 150px. Adjust the width according to your preference.

function calculateNextDayOfWeek(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 = calculateNextDayOfWeek(new Date(), 5, 15);

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

  // Obtain current date and time
  var now = new Date().getTime();

  // Determine the difference between current and countdown dates
  var distance = countdownDate - now;

  // Calculate 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 countdown results in designated elements
  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>";

  // Handle countdown completion
  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 class="flex-wrapper">
  <span id="circle-days" class="circle-time">00</span>
  <span id="circle-hours" class="circle-time">00</span>
  <span id="circle-minutes" class="circle-time">00</span>
  <span id="circle-seconds" class="circle-time">00</span>
  <span id="timer"></span>
</div>

For a live demonstration, click here.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Implementing a dialog box pop-up from a separate React file

My journey with React is just beginning, so forgive me if this question seems basic. I have a delete icon in one of my files, and when it's clicked, I want to display a confirmation dialog box. I found an example on the official Material-UI website: h ...

javascriptreactjs

Dynamic data retrieval with the power of JavaScript and AJAX

When attempting to send data using AJAX in PHP, I encountered an issue with my jQuery click function on a button that sends data only when the quantity is greater than 1. The error arises because PHP does not recognize the variables 'name' and &a ...

javascriptphpjqueryajax

Ensure the camera flag remains set in three.js

I am currently experimenting with the WebGLRenderer in three.js and I am looking for a way to keep the camera in motion without resetting, similar to how it is shown in this video at the 4:00 minute mark. You can view the video here: https://www.youtube.c ...

javascriptthree.js

"Exploring the differences between request.body, request.params, and request.query

I am working with a client-side JS file that includes: agent = require('superagent'); request = agent.get(url); Afterwards, the code looks something like this: request.get(url) //or request.post(url) request.end( function( err, results ) { ...

javascriptajaxnode.jshttp

In ReactJS, ensure only a single div is active at any given moment

I'm working on a layout with three divs in each row, and there are multiple rows. Only one div can be selected at a time within a row, and selecting a new div will automatically unselect the previously selected one. Here is a simplified version of my ...

javascriptcssreactjsecmascript-6

An error occurs when attempting to assign a value to a MUI file TextField

Struggling with setting the value of a MUI Textfield that has type="file" props, resulting in the following exception being thrown: Uncaught DOMException: An attempt was made to use an object that is not, or is no longer, usable Interest ...

javascripthtmlreactjsmaterial-ui

JavaScript's square bracket notation is commonly used to access nested objects within an object

My goal is to accomplish the following: this.inputs[options.el.find('form').attr('class')] = {}; this.inputs[options.el.find('form').attr('class')][options.elements[x].selector] = false; Unfortunately, I'm fa ...

javascript

The layout is being disrupted by a bug in the nested list div in IE 7

I am currently in the process of creating a website with nested lists in the sidebar. The parent list contains children li elements. Initially, only 4 list items are displayed, and the rest should be hidden with an option to "Show All" above them. Here is ...

htmlcssinternet-explorer-7

Adjust the dimensions of the bootstrap dropdown to match the dimensions of its textbox

The second textbox features a bootstrap dropdown with extensive content that is overflowing and extending to other textboxes below it. I am looking for a way to resize the dropdown to fit the size of its corresponding textbox. UPDATE: I want the dropdown ...

javascripthtmlcssbootstrap-5

Has the binary search operation not been executed?

My attempt to implement the binary search algorithm in my code example is not producing the expected result. I'm unsure of the cause. Can someone please explain it to me? var array = [1, 4, 6, 8, 9, 12, 15, 17, 19, 34, 55, 78, 80]; function binarySe ...

javascriptarraysalgorithmsearchdata-structures

HTML5 video function is only supported in Internet Explorer, while other browsers display a black screen instead

My task involves creating an html5 application that can be accessed across all major browsers, including Chrome, Firefox, IE9, Safari, and Opera. One of the requirements is for the application to support video playback. I am utilizing the video tag and hav ...

htmlvideocross-browserhtml5-videovideo.js

Verify whether the session has been initiated and establish a global variable that can be utilized by JavaScript

I currently have the following arrangement: main.php page.php Whenever a user visits any of these pages, they experience an "introductory header animation". However, I want to ensure that this animation is only displayed on their initial visit and not w ...

phpjavascriptsessionsessionid

Unable to make CSS footer stay at the bottom of the page following the utilization of V-for to display a list of items in

Footer seems to be misbehaving by not staying at the bottom and instead showing under the items rendered using v-for. This issue is only happening on this page while it is working fine on others. <template> <div> <!-- Item renderin ...

cssvue.jsbootstrap-4

Node.JS guide on handling geonames city information

While unconventional, I wanted to share my solution since there is a lack of information on how to accomplish this task on the stack. After searching for an easy-to-use Node.JS module to process geonames data into a mongo database, I found very few project ...

javascriptnode.jsmongodbobjectgeonames

Ensuring the legitimacy of Rails form submissions

I am encountering an issue with validating a form before submitting it, as the form is being submitted without triggering the jQuery part. <%= form_for(:session,class:"form-signin form-horizontal",:id=> "form",:role=> "form") do |f| %> & ...

javascriptjqueryruby-on-railsformsvalidation

Is it time to shake up the location of your Toastr

Recently, I've been working on implementing Toastr from this GitHub repository. While I am able to receive alerts and toasts as intended, I'm running into issues when trying to apply custom options. It seems to only stick to the default settings ...

javascriptjqueryhtmltwitter-bootstrap-3

Error message: The "spawn" function is not defined and is causing a TypeError to be thrown in

Having a bit of trouble here. I'm trying to make an async request using redux-thunk in my action creator, and the code looks like this: export const downloadFromYoutube = (download) => { console.log("Hello"); return dispatch => { va ...

javascriptreactjsasynchronousreduxreact-redux

Reordering sections in a dynamic manner

I'm working on a single-page website with four sections arranged like this: <section id=“4”> <section id=“3”> <section id=“2”> <section id=“1”> Now, I want to change the order of these sections when scrolling ...

javascriptjqueryhtml

Click on a button to completely remove all JavaScript from your website using jQuery

I'm currently experiencing some difficulties with my website Concept Studio. On a specific page, I have a typing animation within a form and I'd like to include a button that allows users to skip the animation. However, I'm unsure of how to ...

javascriptjquery

Diminishing sheets in the realm of C# web application development

I have been researching ways to incorporate a fading page function, but I am encountering some issues. I am unsure about the specific code that needs to be included in jquery.js and how to integrate this script into all of my web forms or alternatively int ...

c#javascriptfadevisual-web-developer-2010