• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

I created a cookie consent banner that isnt working.

Community Beginner ,
Jan 14, 2023 Jan 14, 2023

Copy link to clipboard

Copied

I am a beginner at javascript.

i created the following code for the html:

<div class="cookie-consent-banner">
  <div class="cookie-consent-banner__inner">
    <div class="cookie-consent-banner__copy">
      <div class="cookie-consent-banner__header">THIS WEBSITE USES COOKIES</div>
      <div class="cookie-consent-banner__description">We use cookies to analyse our traffic. We also share 
        information about your use of our site with 
        our social media, and analytics partners who may combine it with other information that you’ve provided 
        to them or that they’ve collected from your use of their services. You consent to our cookies if you 
        continue to use our website. Check out our <a href="cookie.html">cookie policy.</a></div>
    </div>

    <div class="cookie-consent-banner__actions">
      <button class="cookie-consent-banner__cta">
        OK
      </button>
    </div>
  </div>
</div>

  and here is the css:

 

.cookie-consent-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 2147483645;
  box-sizing: border-box;
  width: 100%;

  background-color: #F1F6F4;
}

.cookie-consent-banner__inner {     
  max-width: 960px;
  margin: 0 auto;
  padding: 32px 0;
}

.cookie-consent-banner__copy { 
  margin-bottom: 16px;
}

.cookie-consent-banner__actions {    
}

.cookie-consent-banner__header {
  margin-bottom: 8px;
  
  font-family: "CeraPRO-Bold", sans-serif, arial;
  font-weight: normal;
  font-size: 16px;
  line-height: 24px;
}

.cookie-consent-banner__description {
  font-family: "CeraPRO-Regular", sans-serif, arial;
  font-weight: normal;
  color: #838F93;
  font-size: 16px;
  line-height: 24px;
}

.cookie-consent-banner__cta {
  box-sizing: border-box;
  display: inline-block;
  min-width: 164px;
  padding: 11px 13px;
    
  border-radius: 2px;
  
  background-color: #47b2e4;
   
  color: #FFF;
  text-decoration: none;
  text-align: center;
  font-family: "CeraPRO-Regular", sans-serif, arial;
  font-weight: normal;
  font-size: 16px;
  line-height: 20px;
}

.cookie-consent-banner__cta--secondary { 
  padding: 9px 13px;
  
  border: 2px solid #3A4649;
  
  background-color: transparent;
  
  color: #2CE080;
}

.cookie-consent-banner__cta:hover {
  background-color: #47b2e4;
}

.cookie-consent-banner__cta--secondary:hover {
  border-color: #838F93;
    
  background-color: transparent;
  
  color: #47b2e4;
}

.cookie-consent-banner__cta:last-child {
  margin-left: 16px;
}

.hidden{
  display: none;
}

  and finally the javascript&colon;

 

(() => {
  const getCookie = (name) => {
    const value = " " + document.cookie;
    console.log("value", `==${value}==`);
    const parts = value.split(" " + name + "=");
    return parts.length < 2 ? undefined : parts.pop().split(";").shift();
  };

  const setCookie = function (name, value, expiryDays, domain, path, secure) {
    const exdate = new Date();
    exdate.setHours(
      exdate.getHours() +
        (typeof expiryDays !== "number" ? 365 : expiryDays) * 24
    );
    document.cookie =
      name +
      "=" +
      value +
      ";expires=" +
      exdate.toUTCString() +
      ";path=" +
      (path || "/") +
      (domain ? ";domain=" + domain : "") +
      (secure ? ";secure" : "");
  }
})();

  (() => {
  const $cookiesBanner = document.querySelector(".cookie-consent-banner");
  const $cookiesBannerButton = $cookiesBanner.querySelector("cookie-consent-banner__cta");
  const cookieName = "cookiesBanner";
  const hasCookie = getCookie(cookieName);

  if (!hasCookie) {
    $cookiesBanner.classList.remove("hidden");
  }

  $cookiesBannerButton.addEventListener("click", () => {
    setCookie(cookieName, "closed");
    $cookiesBanner.dismiss();
  });
})();

 

I am not sure where i went wrong. 

The cookie banner displays correctly, but i cannot seem to close it. and if i do manage to make it close, it wouldnt save a new cookie so it doesnt open again when i refresh.

can anyone help please?

TOPICS
Code

Views

70

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
no replies

Have something to add?

Join the conversation