HTML, CSS & JavaScript - How to Create a Cookie Consent Message

In this video, we'll show you how to create a cookie consent message and a cookie with an expiration date so the message does not show up every time the user visits the website.
More information on how to create a cookie (very easy to follow):
www.w3schools.com/js/js_cooki...
Sponsor me on GitHub!
github.com/sponsors/miguelznunez
Follow my blog:
/ miguelznunez
Email : [e-mail]
Medium : / miguelznunez
Codepen : codepen.io/miguelznunez
GitHub : github.com/miguelznunez

[@nigelhammond99]

Great video! I have been looking for a good cookie banner for some time. Well explained, well coded, simple to follow. Thank you! One more subscriber here!

[@joebalingit]

You've got a subscriber. Thank you so much for this helpful video. Keep 'em coming...

[@mihaelabalaceanu7905]

Very well explained! Thx so much, it was so helpful!

[@kageyoshi3656]

Easy to follow, gets the job done, works flawlessly -> Subscribed! + Liked! + Shared!

[@EinDummie]

Hey Sir, your Tutorial helped me alot, thank you and keep it up.

[@_661.]

Nice bro❤

[@MillerHighLifez420]

Thanks!

[@loonatik_official]

thank you!

[@chupacabrapr]

Thanks for the video very helpful. Im having an issue, i set the expiration date and create the cookie. The exp date shows fine, but when I refresh my browser the exp date changes to “session”. Any idea why? Thanks

[@agritech802]

Great video, what editor are you using?

[@andrej1814]

vs code

[@rjapade3062]

Can u please help me , uncaught references error: data is not defined at setCookie ??

[@yoskokleng3658]

why we need it (click to store cookie)? i saw many website have done this. please make a video of benefit of it?

[@jad3nk674]

i have a question i never saw in my cookie menu with the inspect mode one that says cookie true so now i cant see the cookie and i have to show it to my teacher

[@jfpicard1]

Question here ... To be 100% compliant .. should this "consent" be stored somewhere?

[@durangodave]

dont we need to secure the cooke?

[@xchen6190]

Thanks! how to give the user option to reject the cookie?

[@agritech802]

Create a button called reject and store them value reject in the cookie

[@alexandermarcondesjunior1608]

i getting this error :
default.js:34 Uncaught TypeError: Cannot set properties of undefined (setting 'display')
at cookieMessage
someone can help me?

[@codefoxx]

It cannot find the element you are trying to add the "display" property to. Perhaps you forgot to create it, mispelled it, did not add the appropriate id, etc. Basically you are missing something. Please rewatch the tutorial

[@AashutoshBansal]

Bro can u remake video of grocery-list with localStorage, As I'm not able to do so. Please Please Please Please

[@codefoxx]

I can do that but I actually don't recommend beginners using local storage beyond 1 or 2 basic projects because that's not how data is stored in a real application. What you wanna learn is how to store it in a database like mySQL or MongoDB, which requires knowledge of Node.js or a framework like Django or Spring Boot.

[@AashutoshBansal]

@@codefoxx ok 👍

[@bilalbehar8533]

can you please help me, i followed every step , but the paragraphe inside the cookies container is empty

[@codefoxx]

Please recheck the code you must be missing something

[@bilalbehar8533]

@@codefoxx i tried to follow many other videos . But still have the same problem
Thank you anyways

[@aruzhannurmanova3696]

@@codefoxx Hi! I have the same issue. maybe there are some missing parts in the code on this video? 'cause I rechecked each part and I am sure that I wrote it correctly.

[@codefoxx]

@@aruzhannurmanova3696 can you share your code with me? Maybe you can share the Github repository

[@bilalbehar8533]

@@codefoxx its working thanks

[@bilalbehar8533]

can someone pls paste the css file here

[@adarshc7737]

*{
padding: 0;
margin: 0;
}
body{
font-size: 1rem;
}
.container{
width:1600px;
margin: auto;
}
.subcontainer{
width: 85%;
margin: auto;
}
#cookies{
width: 100%;
position: fixed;
bottom: 0;
color: aliceblue;
background-color: rgba(0, 0, 0, 0.311);
z-index: 1;
display: none;
}
.cookies{
min-height: 70px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}
.cookies .a{
color: yellow;
text-decoration: none;
font-weight: 500;
}
#cookies-btn{
border-radius: 5px;
padding: 6px 8px 6px 8px;
font-size: 1rem;
font-family: inherit;
cursor: pointer;
border: 1px solid white;
background-color: black;
color: white;
}
@media(max-width:1600px){
.container{
width: 100%;
}
}
@media(max-width:1024px){
.cookies{
padding: 10px 0;
}
}