Create Popup Cookies Consent Box in HTML CSS & JavaScript | Set Cookie JavaScript

[@lyubon9492]

I just needed the JavaScript part with the cookie and it works perfectly. Thank you so much for this video. Very helpful : )

[@crissantanna6555]

thank you!!!! how can I make the cookie window disappear when the person clicks reject?

[@alman_harbi]

Can you explain for what cookies are used for? If a user accepts it, what will be next, like we would know the user's information?

[@CodingLabYT]

Cookies are small pieces of text sent to your browser by a website you visit. They help that website remember information about your visit, which can both make it easier to visit the site again and make the site more useful to you. The cookie box I have made is set only one cookie value which name is codinglab, and until that cookie expired model box will not come if you click on accept button. That cookie is for only that model box.

[@benjawiBen]

A good example of cookies is when you tick a box on a login page that says to remember your login for something like 30 days. Sets a cookie for 30 days and saves you having to log into that website every time. If you don't accept cookies on that website, then the remember me function won't work.

[@tioem3399]

Easy to follow and worked like a charm! Thank you!

[@lucblouin2747]

Very good! Thank a lot ! It works fine except how can I make the cookies window disappear when the person clicks decline? I would just like the box not to recharge when the user refuses. Please tell me if you have a solution?

[@MoroccanHub]

const cookieBox = document.querySelector(".wrapper"); const buttons = document.querySelectorAll(".button"); // Function to check if a cookie exists function getCookie(name) { const nameEQ = name + "="; const cookies = document.cookie.split(';'); for (let i = 0; i < cookies.length; i++) { let cookie = cookies[i]; while (cookie.charAt(0) === ' ') { cookie = cookie.substring(1, cookie.length); } if (cookie.indexOf(nameEQ) === 0) { return cookie.substring(nameEQ.length, cookie.length); } } return null; } const executeCodes = () => { // Check if either cookieBy or cookieDeclined exists if (getCookie('cookieBy') || getCookie('cookieDeclined')) { return; // Do nothing if either cookie exists } cookieBox.classList.add("show"); buttons.forEach((button) => { button.addEventListener("click", () => { cookieBox.classList.remove("show"); if (button.id === "acceptBtn") { // Set cookie for acceptance document.cookie = "cookieBy=codinglab; max-age=" + (60 * 60 * 24 * 30); } else if (button.id === "declineBtn") { // Set cookie for decline document.cookie = "cookieDeclined=true; max-age=" + (60 * 60 * 24 * 30); } }); }); }; // Execute function on page load window.addEventListener("load", executeCodes);

[@aertic3747]

Hey, is it possible to use more of your stuff, like this password strength and email validation etc. on one screen at the same time on the site? If so, how?

[@social.knowledge_0]

Thanks you

[@CodingLabYT]

Welcome

[@truegoldenhands]

very good and useful ´work!

[@LaurianeBL]

Hello and thanks for the tutorial but the pop up keeps showing after i refresh the page when i click on decline... do you have a solution ? Thank you :)

[@lorenzolin4959]

Hello guys, should i use it on every page of the website? or just write it on 1 page?

[@yenvi1546]

You should put it on your index or home page! So use it only once :)

[@PawełMurawski]

Hello, what IDE are you using here?

[@CodingLabYT]

Vs code editor

[@mar4974]

what is the use of cookies?

[@AjPrince7]

You don't need to signin again in a website

[@AbhinavMishraA-wc3ky]

@CodingLab Hi men! Please create a video on how to create a login system using cookie 🍪! In js. Pin me!

[@CodingLabYT]

Okey I will think about it.

[@omorfaruk6986]

please give html css full website design tutorial

[@CodingLabYT]

Here they are - kzbin.info/www/bejne/jqbWoGudmtB4msk kzbin.info/www/bejne/nYbbeq2laMydY8k

[@enderbenderplayz5189]

source code?

[@CodingLabYT]

Link is in the description.