Generating a cookie alert for the site

Generating a cookie alert for the site

The js-cookie library will help us here.

Traditionally, we write HTML

Html

<div class="cookie-block">
Пока куки есть - меня не будет видно.

<button class="ok">ok</button>
</div>
<script src="cookie.min.js"></script>
<script src="script.js"></script>

Well, as you can see, the div himself speaks for himself)

CSS

.cookie-block {
width: 300px;
height: 50px;
border: 3px solid red;
display: none;
}

Hide the default warning

Js

const cookieEl = document.querySelector('.cookie-block');
const okEl = document.querySelector('.ok');

okEl.addEventListener('click', () => {
cookieEl.style.display = 'none';
});

let cookies = () => {
if (!Cookies.get('hide-cookie')) {
setTimeout(() => {
cookieEl.style.display = 'block';
}, 1000);
}

Cookies.set('hide-cookie', 'true', {
expires: 30
});
}


cookies();

Well, and a relatively simple JS:

  1. Find a block with cookies and a button OK
  2. By clicking on the button OK hide the warning
  3. We write a cookies function that looks if a cookie hide-cookie does not exist – show the block
  4. Well, we set the cookie itself for 30 days through the parameter expires

In general, that’s all, very simple code. Hope it helps you. The sources are below, and the video is at the beginning of the post)

Good luck!

Leave a Reply

Your email address will not be published. Required fields are marked *