I am working on a project where countdown is the main focus. But when the count down starts as the numbers count down certain numbers push and pull other numbers like when eg. 22:00
changes it pulls the number on the right towards left eg. 21:59
. This makes the countdown look jumpy and weird.
I want to avoid this behaviour. What I am thinking is that each number occupy a certain space and stay at its place fixed while the countdown. I don’t want to use a monospace font for visual reasons.
...
<div id="timer-container">
...
<div id="time-left">25:00</div>
</div>
...
timer-container {
position: relative;
margin-top: 0.5rem;
display: flex;
justify-content: center;
align-items: center;
background-color: transparent;
cursor: pointer;
border: 2px solid transparent;
border-radius: 50px;
transition: border-color 0.2s ease-in-out;
overflow: hidden;
max-height: 180px;
padding: 0px 20px;
}
#timer-container:hover {
border-color: black;
}
#time-left {
font-family: "Karla", sans-serif;
font-size: 10.375rem;
font-weight: 800;
text-align: center;
margin-bottom: 1rem;
letter-spacing: -5px;
user-select: none;
position: relative;
z-index: 1;
opacity: 1;
}
let timeLeft = 25 * 60; // seconds
const timeLeftEl = document.getElementById('time-left');
// ...
// Function to update the time left text content
function updateTimeLeftTextContent() {
const minutes = Math.floor(timeLeft / 60);
const seconds = timeLeft % 60;
timeLeftEl.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
}
I am quite new to pure HTML, CSS, Javascript. So a breif explaination on this is possible is much appriciated.
I have tried to separate the timer into individual span tags ’00’, ‘:’, ’00’ then tried to make block of fixed size but it just made it more werid. I also tired ch
for the timer-container and the time-left but it didnt work.
I want the timer to stay in one place like monospace characters but the text is not monospace font, that what I want to solve