Count down Timer: Right to Left Shrink

Count down Timer:

Right to Left Shrink

Implementation:

Post Edit Link:

Sdtt

Post Shared Link:

Sdft

Code: 

html :

gs script :

<div id="countdownBox" style="max-width:700px;margin:auto;padding:15px;border:1px solid #ccc;border-radius:10px;background:#fff;font-family:Arial,sans-serif;">

<!-- Line 1 -->

<h3 style="text-align:center;margin:0 0 15px;">⏳ Countdown Timer</h3>

<!-- Line 2 -->

<div style="display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;">

<input type="date" id="startDate">

<select id="day"></select>

<select id="hour"></select>

<select id="minute"></select>

<select id="second"></select>

</div>

<br>

<div id="timerDisplay" style="text-align:center;font-size:28px;font-weight:bold;color:#0F5E05;">

00 Days 00:00:00

</div>

<!-- Line 3 -->

<div style="width:100%;height:28px;background:#ddd;border-radius:20px;overflow:hidden;">

<div id="countBar" style="width:100%;height:100%;background:#00c853;"></div>

</div>

<div id="percent" style="text-align:center;font-weight:bold;margin-top:8px;">

100%

</div>

<br>

<!-- Line 4 -->

<div style="text-align:center;">

<button onclick="startCountdown()">▶ Start</button>

<button onclick="pauseCountdown()">⏸ Pause</button>

<button onclick="resetCountdown()">🔄 Reset</button>

</div>

</div>

<script>

/* ==========================================================
   Countdown Timer Script
   Purpose:
   - Populate dropdowns
   - Start countdown
   - Pause countdown
   - Reset countdown
   - Update progress bar
   - Display remaining time
========================================================== */


/* ---------- Get HTML Elements ---------- */
const day = document.getElementById("day");
const hour = document.getElementById("hour");
const minute = document.getElementById("minute");
const second = document.getElementById("second");


/* ---------- Populate Day Dropdown (1–120) ---------- */
for (let i = 0; i <= 120; i++) {
  day.innerHTML += `<option value="${i}">${i} Day</option>`;
}


/* ---------- Populate Hour Dropdown (00–23) ---------- */
for (let i = 0; i <= 23; i++) {
  let value = String(i).padStart(2, "0");
  hour.innerHTML += `<option value="${i}">${value} Hr</option>`;
}


/* ---------- Populate Minute & Second Dropdowns (00–59) ---------- */
for (let i = 0; i <= 59; i++) {

  let value = String(i).padStart(2, "0");

  minute.innerHTML += `<option value="${i}">${value} Min</option>`;

  second.innerHTML += `<option value="${i}">${value} Sec</option>`;
}


/* ==========================================================
   Global Variables
========================================================== */

// Total countdown duration (Seconds)
let totalSeconds = 0;

// Remaining countdown time (Seconds)
let remainingSeconds = 0;

// Stores the setInterval ID
let interval = null;


/* ==========================================================
   Function : updateDisplay()

   Purpose:
   - Convert seconds into Days, Hours, Minutes, Seconds
   - Update timer text
   - Update progress bar
   - Update percentage
   - Change bar color
========================================================== */

function updateDisplay() {

  let days = Math.floor(remainingSeconds / 86400);

  let hours = Math.floor((remainingSeconds % 86400) / 3600);

  let minutes = Math.floor((remainingSeconds % 3600) / 60);

  let seconds = remainingSeconds % 60;


  document.getElementById("timerDisplay").innerHTML =

      String(days).padStart(2, "0") + " Days " +

      String(hours).padStart(2, "0") + ":" +

      String(minutes).padStart(2, "0") + ":" +

      String(seconds).padStart(2, "0");


  let percentage = totalSeconds
      ? (remainingSeconds / totalSeconds) * 100
      : 100;


  document.getElementById("countBar").style.width =
      percentage + "%";


  document.getElementById("percent").innerHTML =
      percentage.toFixed(1) + "%";


  let bar = document.getElementById("countBar");


  if (percentage > 50) {

      bar.style.background = "#00c853";

  } else if (percentage > 20) {

      bar.style.background = "#ffb300";

  } else {

      bar.style.background = "#d50000";

  }

}


/* ==========================================================
   Function : startCountdown()

   Purpose:
   - Read dropdown values
   - Convert duration into seconds
   - Start timer
========================================================== */

function startCountdown() {

  if (interval) return;


  if (totalSeconds === 0) {

      totalSeconds =

          Number(day.value) * 86400 +

          Number(hour.value) * 3600 +

          Number(minute.value) * 60 +

          Number(second.value);

      remainingSeconds = totalSeconds;

      updateDisplay();

  }


  interval = setInterval(function () {

      if (remainingSeconds > 0) {

          remainingSeconds--;

          updateDisplay();

      } else {

          clearInterval(interval);

          interval = null;

          alert("⏰ Time Up!");

      }

  }, 1000);

}


/* ==========================================================
   Function : pauseCountdown()

   Purpose:
   - Pause countdown
========================================================== */

function pauseCountdown() {

  clearInterval(interval);

  interval = null;

}


/* ==========================================================
   Function : resetCountdown()

   Purpose:
   - Stop timer
   - Reload selected values
   - Reset progress bar
========================================================== */

function resetCountdown() {

  clearInterval(interval);

  interval = null;


  totalSeconds =

      Number(day.value) * 86400 +

      Number(hour.value) * 3600 +

      Number(minute.value) * 60 +

      Number(second.value);


  remainingSeconds = totalSeconds;

  updateDisplay();

}


/* ==========================================================
   Initialize Timer
========================================================== */

resetCountdown();

</script>