Countdown : Hours and Days (countdown_hours_and_days)

← Back to Text Elements | 📋 All Elements

---

This element is available in the Lucit Template Designer Elements Panel and can be added to any template by clicking on it.

When this element is added, the code listed in Element HTML will be added as a new layer in your template design that you can then customize as you see fit.

Overview

• Type: text
• Element Class: App\LuCore\DriveTemplates\TextDriveTemplateElementClass

• Element Settings:

• Fields:

  • Target Date (targetDate) – datetime (placeholder: 12/25/2024)
  • Prefix (prefix) – text (default: Only)
  • Suffix (suffix) – text (default: Until the big day!)
  • Style (resultStyle) – text (placeholder: days_hours; allowed values: days_no_label, days, days_hours, hours)

Countdown, event, date, time, timer, time,

Preview

Countdown : Hours and Days

Element HTML

<div x-objectcode="countdown_hours_and_days" class="lc_ut_designer lc_dt_element lc_dt_text lc_dt_text_editable lc_format_fit_text" id="{id}" title="Countdown : Hours and Days" x-element-settings='{"fields":[{"key":"targetDate","name":"Target Date","type":"datetime","placeholder":"12\/25\/2024"},{"key":"prefix","name":"Prefix","type":"text","default_value":"Only"},{"key":"suffix","name":"Suffix","type":"text","default_value":"Until the big day!"},{"key":"resultStyle","enum":"true","name":"Style","type":"text","placeholder":"days_hours","enum_options":[{"label":"Days No Label","value":"days_no_label"},{"label":"Days","value":"days"},{"label":"Days, Hours","value":"days_hours"},{"label":"Hours","value":"hours"}]}]}'>Countdown : Hours and Days</div>

Default CSS

font-weight:bold;

JavaScript

registerDesignerFormattingFunction(
'format_{id}',
(el,dataValue,dataObject,elementSettings) => {

  //This is only here to ensure that the creative is updating
  //{{digital_board.location.five_minute_intervals_since_unix_epoch}}
  // Really dumb

  const startText = elementSettings.prefix ?? "";
  const dateTimeString = elementSettings.targetDate;
  const resultStyle = elementSettings.resultStyle ? elementSettings.resultStyle : "days_hours";
  const endText = elementSettings.suffix ?? "";

  const countDownText = () => {
    // Parse the input datetime string to obtain a Date object
    const targetDate = new Date(dateTimeString);

    // Get the user's local time zone offset in minutes
    const timezoneOffset = targetDate.getTimezoneOffset();

    // Adjust the target date by the time zone offset
    targetDate.setMinutes(targetDate.getMinutes() - timezoneOffset);
        //If we don't have a macro replacement yet, use current browser datetime
      const curentDateString = "{digital_board.location.datetime_current}".includes('digital_board.location.datetime_current') 
        ? new Date().toISOString()
        : "{digital_board.location.datetime_current}";    

    // Get the current date adjusted for the time zone
    const currentDate = new Date(curentDateString );

    // Calculate the time difference in milliseconds
    const timeDifference = targetDate - currentDate;

    // Convert milliseconds to seconds, minutes, hours, and days
    const seconds = Math.floor((timeDifference / 1000) % 60);
    const minutes = Math.floor((timeDifference / (1000 * 60)) % 60);
    const hours = Math.floor((timeDifference / (1000 * 60 * 60)) % 24);
    const days = Math.floor(timeDifference / (1000 * 60 * 60 * 24));

    // Build the countdown string based on the specified style
    let countdownString = "";

    if (resultStyle.includes("days") && days > 0) {
       if( resultStyle.includes("days_no_label") )
         countdownString += `${days}`;
       else
         countdownString += `${days} ${days === 1 ? "day" : "days"}`;       
    }

    if (resultStyle.includes("hours") && hours > 0) {
      if (countdownString !== "") {
        countdownString += ", ";
      }
      countdownString += `${hours} ${hours === 1 ? "hour" : "hours"}`;
    }

    if (resultStyle.includes("minutes") && minutes > 0) {
      if (countdownString !== "") {
        countdownString += ", ";
      }
      countdownString += `${minutes} ${minutes === 1 ? "minute" : "minutes"}`;
    }

    if (resultStyle.includes("seconds") && seconds > 0) {
      if (countdownString !== "") {
        countdownString += ", ";
      }
      countdownString += `${seconds} ${seconds === 1 ? "second" : "seconds"}`;
    }

    // If the countdown string is still empty, set a default value
    if (countdownString === "") {
      countdownString = "0 days";
    }

    return countdownString;
  };

  el.innerHTML = startText + ' ' + countDownText() + ' ' + endText;

},
'[id="{id}"]');

---

← Back to Text Elements | 📋 All Elements