(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"}});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.