Countdown to Cornerstone

cornerstone-countdown.js

/*

== Cornerstone Countdown ==

This JavaScript code creates a countdown that displays the remaining time until the launch of
Cornerstone Association of REALTORS(R).

To use this countdown component on your website, follow these steps:

1. Include the following HTML code where you want the countdown to appear:
   <div id="cornerstone-countdown"></div>
   
2. If you wish to have a banner-less version to put your own heading above (or below?), use:
    <div id="cornerstone-countdown-nobanner"></div>

3. Add the following script tag to your HTML file, preferably just before the closing </body> tag:
   <script src="https://s1.cdn.rahb.ca/rahbca/wp-content/uploads/2024/05/cornerstone-countdown.js"></script>

- The countdown component will automatically initialize and start counting down to the specified due date.
- The banner includes a link to https://www.realtorstogether.ca
- The circular dials will update in real-time, showing the remaining days, hours, minutes, and seconds.
- The component is responsive and adjusts its layout and size for smaller screens,
  ensuring a good user experience on mobile devices.

(Note: The CSS styles for the countdown are included within the JavaScript code using a <style> tag.)

For any questions or support using this code, please contact it.dept@rahb.ca

*/

// Create a <style> element and append the CSS code
const styleElement = document.createElement('style');
styleElement.textContent = `
  .cornerstone-countdown {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .cc-logo {
     display: block;
     margin: 0 auto 20px;
     max-width: 600px;
     width: 100%;
     height: auto;
   }

  .cc-dials {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .cc-days, .cc-hours, .cc-minutes, .cc-seconds {
    position: relative;
    margin: 16px;
    text-align: center;
  }

  .cornerstone-countdown svg {
    width: 100px;
    height: 100px;
    display: block;
    margin: auto;
    transform: rotate(-90deg);
  }

  .cc-dial-background {
    transition: transform 0.5s ease-in-out;
  }

  .cc-label {
    font-size: 18px;
    font-weight: bold;
    display: block;
    margin-top: 16px;
  }

  .cc-value {
    font-size: 24px;
    font-weight: bold;
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
  }

  @media (max-width: 768px) {
    .cc-days, .cc-hours, .cc-minutes, .cc-seconds {
      margin: 8px;
      text-align: center;
    }

    .cornerstone-countdown svg {
      width: 75px !important;
      height: 75px !important;
      margin: auto;
      transform: rotate(-90deg);
    }

    .cc-label {
      font-size: 14px;
      margin-top: 12px;
    }

    .cc-value {
      font-size: 18px;
    }
  }
`;
document.head.appendChild(styleElement);

// Define the due date here in YYYY-MM-DD format or as a Date object
const dueDate = new Date("2024-06-30T23:59:59");

let intervalId;

function updateCountdown() {
  const now = new Date(); // Current time
  const countdownTime = (dueDate - now) / 1000; // Time remaining in seconds

  if (countdownTime <= 0) {
    clearInterval(intervalId);
    document.querySelectorAll('.cc-value').forEach(element => {
      element.textContent = '00'; // Set all to zero or display a message
    });
    return; // Exit the function to avoid negative values
  }

  const days = Math.floor(countdownTime / 86400);
  const hours = Math.floor((countdownTime % 86400) / 3600);
  const minutes = Math.floor((countdownTime % 3600) / 60);
  const seconds = Math.floor(countdownTime % 60);

  document.querySelector('.cc-days .cc-value').textContent = `${days.toString().padStart(2, '0')}`;
  document.querySelector('.cc-hours .cc-value').textContent = `${hours.toString().padStart(2, '0')}`;
  document.querySelector('.cc-minutes .cc-value').textContent = `${minutes.toString().padStart(2, '0')}`;
  document.querySelector('.cc-seconds .cc-value').textContent = `${seconds.toString().padStart(2, '0')}`;

  updateCircle(document.querySelector('.cc-days'), days, 365); // Assuming max days is 365 which can be adjusted
  updateCircle(document.querySelector('.cc-hours'), hours, 24);
  updateCircle(document.querySelector('.cc-minutes'), minutes, 60);
  updateCircle(document.querySelector('.cc-seconds'), seconds, 60);
}

function updateCircle(element, timeUnit, maxUnit) {
  const circumference = 251; // Circumference of the circles
  element.querySelector('.cc-dial-background').style.strokeDashoffset = circumference * (1 - timeUnit / maxUnit);
}

// Function to create the countdown element
function createCountdownElement() {
  const countdownElement = document.createElement('div');
  countdownElement.className = 'cornerstone-countdown';

  // Check if the container element has the ID "cornerstone-countdown-nobanner"
  const hasBanner = containerElement.id !== 'cornerstone-countdown-nobanner';

  if (hasBanner) {
    // Create the image element
    const imageElement = document.createElement('img');
    imageElement.src = 'https://s1.cdn.rahb.ca/rahbca/wp-content/uploads/2024/05/REALTORSTogether-Cornerstone-logo-new.png';
    imageElement.alt = 'Countdown to Cornerstone';
    imageElement.className = 'cc-logo';

    // Create a link element and wrap the image element inside it
    const linkElement = document.createElement('a');
    linkElement.href = 'https://www.realtorstogether.ca';
    linkElement.target = '_blank';
    linkElement.appendChild(imageElement);

    countdownElement.appendChild(linkElement);
  }

  // Create a container for the dials
  const dialsContainer = document.createElement('div');
  dialsContainer.className = 'cc-dials';

  // Create the days, hours, minutes, and seconds elements
  const daysElement = createTimeUnitElement('cc-days', 'Days');
  const hoursElement = createTimeUnitElement('cc-hours', 'Hours');
  const minutesElement = createTimeUnitElement('cc-minutes', 'Minutes');
  const secondsElement = createTimeUnitElement('cc-seconds', 'Seconds');

  // Append the time unit elements to the dials container
  dialsContainer.appendChild(daysElement);
  dialsContainer.appendChild(hoursElement);
  dialsContainer.appendChild(minutesElement);
  dialsContainer.appendChild(secondsElement);

  // Append the dials container to the countdown element
  countdownElement.appendChild(dialsContainer);

  return countdownElement;
}

// Function to create a time unit element (days, hours, minutes, seconds)
function createTimeUnitElement(className, labelText) {
  const element = document.createElement('div');
  element.className = className;

  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
  svg.setAttribute('viewBox', '0 0 100 100');
  svg.setAttribute('class', 'cc-dial');

  const backgroundCircle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
  backgroundCircle.setAttribute('cx', '50');
  backgroundCircle.setAttribute('cy', '50');
  backgroundCircle.setAttribute('r', '40');
  backgroundCircle.setAttribute('fill', 'none');
  backgroundCircle.setAttribute('stroke-width', '10');
  backgroundCircle.setAttribute('stroke', '#ddd');

  const foregroundCircle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
  foregroundCircle.setAttribute('cx', '50');
  foregroundCircle.setAttribute('cy', '50');
  foregroundCircle.setAttribute('r', '40');
  foregroundCircle.setAttribute('fill', 'none');
  foregroundCircle.setAttribute('stroke-width', '10');
  foregroundCircle.setAttribute('stroke', '#003A64');
  foregroundCircle.setAttribute('class', 'cc-dial-background');
  foregroundCircle.setAttribute('stroke-dasharray', '251');
  foregroundCircle.setAttribute('stroke-dashoffset', '251');

  svg.appendChild(backgroundCircle);
  svg.appendChild(foregroundCircle);

  const valueElement = document.createElement('span');
  valueElement.className = 'cc-value';
  valueElement.textContent = '00';

  const labelElement = document.createElement('span');
  labelElement.className = 'cc-label';
  labelElement.textContent = labelText;

  element.appendChild(svg);
  element.appendChild(valueElement);
  element.appendChild(labelElement);

  return element;
}

// Get the container element from the minimal HTML snippet
const containerElement = document.getElementById('cornerstone-countdown');

// Create the countdown element and append it to the container
const countdownElement = createCountdownElement();
containerElement.appendChild(countdownElement);

// Start the countdown
intervalId = setInterval(updateCountdown, 1000);
updateCountdown();