Day 12: GDPR Cookie Consent Banner

Build a GDPR cookie consent banner that appears on page load when no consent cookie exists, lets the user choose Allow or Reject, stores that choice for 7 days, and hides the banner on future visits while the cookie is still present.

JavaScript focus

  • checking for a cookie on page load
  • conditionally showing or hiding the banner
  • handling click events for Allow and Reject
  • creating a cookie with an expiration
  • storing two clear consent states
  • reading the stored cookie value later
  • removing or hiding the banner after a choice is made

Nice extras

  • create the banner with JavaScript instead of hardcoding it in every page
  • include a short privacy message and privacy policy link
  • use a consistent cookie name and clear values
  • add a body class while the banner is visible for styling/layout
  • make the banner reusable across the whole site
  • add a small transition when the banner hides
  • include a future hook for analytics tools to read the consent value later

MDN prep

The HTML

							
								<div role="region" aria-label="Cookie Consent" class="consent_banner">
								    <!-- use createElement to render -->
								    <div class="wrap">
								        <p>We use cookies to improve your experience, analyze site usage, and support essential functionality. You can choose to accept or reject non-essential cookies. For more details, please review our <a href="/privacy-policy">Privacy Policy</a>.</p>
								        <button class="button accept_button" type="button">Accept All</button>
								        <button class="button reject_button" type="button">Reject All</button>
								    </div>
								</div>

The JavaScript

							
								function initCreateCookie(name, value, hours) {
								    let expires = "";
								    if (hours) {
								        const date = new Date();
								        date.setTime(date.getTime() + hours * 60 * 60 * 1000);
								        expires = `; expires=${date.toUTCString()}`;
								    }
								    const isSecure = location.protocol === "https:";
								    const secureFlag = isSecure ? "; Secure" : "";
								    document.cookie = `${name}=${value}${expires}; path=/; SameSite=Lax${secureFlag}`;
								}

								function initReadCookie(name) {
								    const cookies = document.cookie.split(";");
								    for (let cookie of cookies) {
								        const [key, value] = cookie.trim().split("=");
								        if (key === name) return value;
								    }
								    return false;
								}

								function initConsentBanner() {
								    const header = document.querySelector(".header");
								    if (!header) return;

								    // create the banner div
								    const banner = document.createElement("div");

								    // check to see if cookie is present + allows tracking
								    const consent = initReadCookie("cookieConsent");
								    if (consent === "accept") {
								        banner.setAttribute("hidden", "");
								        // load your tracking script here
								    }

								    // create all the things
								    const wrap = document.createElement("div");
								    const p = document.createElement("p");
								    const link = document.createElement("a");
								    const accept = document.createElement("button");
								    const reject = document.createElement("button");

								    banner.setAttribute("role", "region");
								    banner.setAttribute("aria-label", "Cookie consent");
								    banner.classList.add("consent_banner");
								    wrap.classList.add("wrap");
								    link.href = `${window.location.origin}/privacy-policy/`;
								    link.textContent = "Privacy Policy";
								    p.append("We use cookies to improve your experience, analyze site usage, and support essential functionality. You can choose to accept or reject non-essential cookies. For more details, please review our ", link, ".");

								    accept.setAttribute("type", "button");
								    accept.classList.add("button");
								    accept.classList.add("accept_button");
								    accept.textContent = "Accept All";

								    reject.setAttribute("type", "button");
								    reject.classList.add("button");
								    reject.classList.add("reject_button");
								    reject.textContent = "Reject All";

								    banner.append(wrap);
								    wrap.append(p, accept, " ", reject);

								    header.insertAdjacentElement("beforebegin", banner);

								    accept.addEventListener("click", () => {
								        // set cookie for 7 days = 168 hours
								        initCreateCookie("cookieConsent", "accept", 168);
								        banner.setAttribute("hidden", "");
								        // load your tracking script here
								    });

								    reject.addEventListener("click", () => {
								        // set cookie for 7 days = 168 hours
								        initCreateCookie("cookieConsent", "reject", 168);
								        banner.setAttribute("hidden", "");
								        // do not load your tracking script when rejected
								    });
								}