Cookie notice

Simple cookie notice.

by Adam Killander

HTML

<div 
id="cookie"
role="dialog"
aria-label="Cookie consent"
aria-describedby="dialogText"
hidden>
  <span id="dialogText">We use cookies, please accept.</span>
  <button id="button">Accept</button>
</div>

CSS

#cookie {
  position: absolute;
  left: 15px;
  bottom: 15px;
  padding: 1em;
  background: #66BB6A;
  color: #f1f1f1;
  border-radius: 0.5em;
  box-shadow: 0 2px 3px rgba(51, 51, 51, 0.25);
}
#cookie button {
  border: 0;
  background: #f1f1f1;
  padding: 0.5em;
  border-radius: inherit;
  box-shadow: inherit;
  margin-left: 5px;
  cursor: pointer;
}
#cookie button:hover {
  background: #fcfcfc;
  box-shadow: 0 1px 1px rgba(51, 51, 51, 0.5);
}

JavaScript

const 
dialog = document.getElementById('cookie'),
button = document.getElementById('button')

function isConsent() {
  window.dispatchEvent(new Event('consent'))
}

function consentCookie() {
  document.cookie = 'consent=true'
  dialog.hidden = true
  isConsent()
}

button.addEventListener('click', e => consentCookie())

!document.cookie.split(';').find(e => e.trim() === 'consent=true') ? dialog.hidden = false : isConsent()