I created a cookie consent banner that isnt working.

Report · Jan 14, 2023

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?