Consent cookies message

by Osama Qassar

HTML

<div id="cookies-banner">
    <div class="container">
      <div class="item">
        <i class="fa-solid fa-cookie-bite"></i>
      </div>
      <div class="item">
        <p>We use third-party cookies in order to personalize your site experience.</p>
      </div>
      <div class="item">
        <button id="allow">Allow</button>
        <button id="decline">Decline</button>
      </div>
    </div>
  </div>

CSS

* {
  padding: 0;
  margin: 0;
}

body {
  font-family: 'Poppins', sans-serif;
}

#cookies-banner{
  font-size: 0.9rem;
  width: auto;
  position: fixed;
  bottom: 0;
  color: white;
  border-radius: 10px;
  background-color: #333333;
  z-index: 1;
  margin: 10px;
}

.container {
  min-height: 70px;
  display: grid;
  grid-template-columns: 70px auto 200px;
  justify-items: center;
  align-items: center;
}

.container i {
  padding: 5px;
  background-color: #1a1a1a;
  border-radius: 50%;
  font-size: 1.5rem;
}

#allow,
#decline {
  width: 80px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  padding: 8px;
  font-family: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  border: 1px solid rgba(211, 211, 211, 0.3);
  background-color: #1a1a1a;
  color: white;
}

#decline {
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

@media(max-width:800px){
  #cookies-banner{
    width: 100%;
    margin: auto;
    border-radius: 0;
  }

  .container{
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    text-align: center;
  }
}

JavaScript

let acceptDecline = localStorage.getItem("cookie") ? JSON.parse(localStorage.getItem("cookie")) : "";
const cookiesBanner = document.querySelector("#cookies-banner")

// localStorage.clear()

document.querySelector("#allow").addEventListener("click", () => {
  setCookie()
})

document.querySelector("#decline").addEventListener("click", () => {
  setCookie()
})

function setCookie(){
  acceptDecline = true
  localStorage.setItem("cookie", JSON.stringify(acceptDecline))
  cookiesBanner.style.display = "none"
}

if(acceptDecline){
  cookiesBanner.style.display = "none"
}