(function promoBanner(data) {
  function loadTheBanner() {
    const d = document;
    const bannerCookiePrefix = "PROMOBANNER_";
    let promoConfig = data.data,
      endDate =
        new Date().getTime() + promoConfig.time_remaining_in_seconds * 1000;

    const presentationData = promoConfig.presentation_data,
      elBody = d.getElementsByTagName("body"),
      elFirst = elBody[0].firstChild,
      countdownMarkup =
        "<time class='dc-ps-banner-time' data-countdown-wrapper><span data-countdown-days></span><span data-countdown-days-unit></span><span data-countdown-hours></span><span data-countdown-hours-unit></span><span data-countdown-minutes></span><span data-countdown-minutes-unit></span><span data-countdown-seconds></span><span data-countdown-seconds-unit></span><span class='dc-ps-banner-time-icon'><svg width='12' height='12' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'><path d='M5.69 17.92a1.7 1.7 0 0 1-1.197-2.896l6.09-6.115-6.09-6.115A1.7 1.7 0 0 1 6.888.4l7.3 7.3a1.7 1.7 0 0 1 0 2.394l-7.3 7.299c-.312.33-.743.52-1.197.528z' fill='#ffffff' fill-rule='nonzero' /></svg></span></time>",
      closeMarkup =
        "<button class='dc-ps-close' data-promo-close><svg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'><path d='M6.86 9l-5.417 5.416a1.514 1.514 0 0 0 2.14 2.14L9 11.14l5.416 5.417a1.514 1.514 0 0 0 2.14-2.14L11.14 9l5.417-5.416a1.514 1.514 0 0 0-2.14-2.14L9 6.86 3.584 1.443a1.514 1.514 0 0 0-2.14 2.14L6.86 9z' fill='#ffffff' fill-rule='nonzero' /></svg></button>";
    (styles =
      "<style> @keyframes slideIn { to { max-height: 500px; opacity: 1; } } @keyframes slideOut { from { max-height: 500px; opacity: 1; } to { max-height: 0; opacity: 0.25; } } .dc-ps-banner-wrapper { font-family: Lato, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; overflow: hidden; position: -webkit-sticky; position: sticky; top: 0; z-index: 1080; } .dc-ps-banner { animation: 1s cubic-bezier(0.77, 0, 0.175, 1) 0.5s forwards slideIn; background: " +
      presentationData.background_color +
      "; border: 0; color: " +
      presentationData.text_color +
      " !important; display: block; max-height: 0; opacity: 0.25; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.77, 0, 0.175, 1); text-decoration: none; } .dc-ps-banner.dc-is-hidden { animation: 0.5s cubic-bezier(0.77, 0, 0.175, 1) slideOut; } .dc-ps-banner:hover { text-decoration: none; } .dc-ps-banner-content { flex-grow: 1; margin: 12px 42px 12px 12px; text-align: center; } .dc-ps-banner-heading { color: " +
      presentationData.text_color +
      " !important; font-size: 18px; margin: 0 0 8px; } .dc-ps-banner-countdown { margin: 4px 0 0 0; } .dc-ps-banner-time { align-items: center; background: " +
      presentationData.time_background_color +
      "; border-radius: 4px; display: inline-flex; font-weight: bold; line-height: 1; padding: 4px 6px 4px 4px; } .dc-ps-banner-time > span { padding-left: 4px; } .dc-ps-banner-time-icon { position: relative; top: 1px; } .dc-ps-close { background: none; border: 0; cursor: pointer; position: absolute; right: 8px; top: calc(50% - 10px); transition: opacity 0.3s cubic-bezier(0.77, 0, 0.175, 1); z-index: 1090; } .dc-ps-close:hover { opacity: 0.8; } @media screen and (min-width: 768px) { .dc-ps-banner-heading { font-size: 22px; margin: 0; } }</style>"),
      (bannerMarkup =
        "<a class='dc-ps-banner' data-ps-banner href=BANNER_REDIRECT><div class='dc-ps-banner-content'><h5 class='dc-ps-banner-heading'>" +
        promoConfig.title +
        "</h5><p class='dc-ps-banner-countdown'>" +
        presentationData.countdown_text +
        countdownMarkup +
        "</p></div></a>" +
        closeMarkup +
        styles);

    function countdown(endDate) {
      const elCountdownWrapper = d.querySelector("[data-countdown-wrapper]"),
        elCountdownDays = d.querySelector("[data-countdown-days]"),
        elCountdownDaysUnit = d.querySelector("[data-countdown-days-unit]"),
        elCountdownHours = d.querySelector("[data-countdown-hours]"),
        elCountdownHoursUnit = d.querySelector("[data-countdown-hours-unit]"),
        elCountdownMinutes = d.querySelector("[data-countdown-minutes]"),
        elCountdownMinutesUnit = d.querySelector(
          "[data-countdown-minutes-unit]"
        ),
        elCountdownSeconds = d.querySelector("[data-countdown-seconds]");
      elCountdownSecondsUnit = d.querySelector("[data-countdown-seconds-unit]");

      const pluralize = function(count, singular, plural) {
        if (count === 1) {
          return singular;
        }
        return plural;
      };

      let days, hours, minutes, seconds;

      if (isNaN(endDate)) {
        return;
      }

      setInterval(function() {
        promoConfig.time_remaining_in_seconds--;
        calculate(promoConfig.time_remaining_in_seconds);
      }, 1000);

      function calculate(secondsRemaining) {
        let timeRemaining = parseInt(secondsRemaining);

        if (timeRemaining >= 0) {
          days = parseInt(timeRemaining / 86400);
          timeRemaining = timeRemaining % 86400;

          hours = parseInt(timeRemaining / 3600);
          timeRemaining = timeRemaining % 3600;

          minutes = parseInt(timeRemaining / 60);
          timeRemaining = timeRemaining % 60;

          seconds = parseInt(timeRemaining);

          elCountdownDays.innerHTML = parseInt(days, 10);
          elCountdownDaysUnit.innerHTML = pluralize(days, "day", "days");
          elCountdownHours.innerHTML = ("0" + hours).slice(-2);
          elCountdownHoursUnit.innerHTML = pluralize(hours, "hr", "hrs");
          elCountdownMinutes.innerHTML = ("0" + minutes).slice(-2);
          elCountdownMinutesUnit.innerHTML = pluralize(minutes, "min", "mins");
          elCountdownSeconds.innerHTML = ("0" + seconds).slice(-2);
          elCountdownSecondsUnit.innerHTML = pluralize(seconds, "sec", "secs");
        }
      }
    }

    function setCookie(name, value, milliseconds) {
      d.cookie =
        name +
        "=" +
        value +
        ";path=/;domain=COOKIE_DOMAIN;expires=" +
        new Date(milliseconds).toUTCString();
    }

    function removeBanner() {
      const elBanner = d.querySelector("[data-ps-banner]");
      elBanner.classList.add("dc-is-hidden");
      setCookie(
        bannerCookiePrefix + promoConfig.promo_key,
        1,
        promoConfig.time_remaining_in_seconds >= 86400
          ? endDate - 86400000
          : endDate + 86400000
      );
    }

    function enableClose() {
      const elClose = d.querySelector("[data-promo-close]");
      elClose.addEventListener("click", removeBanner);
    }

    function insertBanner() {
      const bannerElement = d.createElement("article");
      bannerElement.classList.add("dc-ps-banner-wrapper");
      elBody[0].insertAdjacentElement("afterbegin", bannerElement);
      bannerElement.innerHTML = bannerMarkup;
      enableClose();
    }

    function getCookie(name) {
      var v = d.cookie.match("(^|;) ?" + name + "=([^;]*)(;|$)");
      return v ? v[2] : null;
    }

    if (
      !d.querySelector(".dc-ps-banner-wrapper") &&
      !getCookie(bannerCookiePrefix + promoConfig.promo_key)
    ) {
      insertBanner();
      countdown(endDate);
    }
  }
  if (document.readyState === "interactive") {
    loadTheBanner();
  } else {
    document.onreadystatechange = function() {
      if (document.readyState === "interactive") {
        loadTheBanner();
      }
    };
  }
})({"eligible":true,"data":{"all_coupon_codes":["SEPT2019","SEPT2019-PROMO"],"time_remaining_in_seconds":1157015,"location_dependent_data":{"coupon_code":"SEPT2019","discount_percentage":50,"annual_dollars":149},"presentation_data":{"background_color":"linear-gradient(87deg, #37bbab, #75c97e)","countdown_text":"Offer ends in ","text_color":"#ffffff","banner_text":"Subscribe now. Save discount_percentage% on an individual subscription on DataCamp and commit to learning data science and analytics.","time_background_color":"linear-gradient(263deg, #c06ac8, #8468c4)"},"promo_key":"sept_2019","landing_page":"https://www.datacamp.com/promo/sept-2019","title":"Subscribe now. Save 50% on an individual subscription on DataCamp and commit to learning data science and analytics.","cta_text":"Buy Now"}});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.