Hey all! In this blog, you’ll learn how to create a Cookie Consent Box using HTML, CSS, and JavaScript. I’ve also demonstrated how to detect an Internet Connection using JavaScript. I’ve also provided various JavaScript projects that may assist in your mission, so be sure to take a look!
Cookies are small text documents with bits of data (usually no bigger than 4KB) stored by an internet server on a customer computer/browser to ensure a quality user experience at an online site. This blog demonstrates how you could set cookies into individual browsers as consent boxes through Javascript.
At first, an Internet webpage will have a cookie consent field, as shown in its preview image above. It contains an image, header text, a brief description, a button to accept cookies and a link for additional information about that cookie in this field. Even when refreshing pages, this cookie container will only reappear once you accept cookies through your browser.
Once you receive the cookie by clicking “I understand,” its container will disappear until you manually clear away it or it has not expired. If a website blocks cookies from being placed or this consent container cannot set any for your browser, an error alert container will display instead. By default, all consent containers set will automatically expire after one month, but this period can be increased or decreased according to your wishes.
You have seen in the video how I created a cookie consent box using HTML CSS & JavaScript to build its design layouts, while I used a bit of JavaScript codes to set cookies in consumer browsers. Even amateur programmers can easily make consent fields using our codes and take it further than ever!
As is common these days, websites use cookies to provide relevant advertisements and records, so if you also run a website or endeavour, you could quickly implement this cookie field by making minor adjustments in its code. Please find this cookie consent box and its codes to set cookies to consumer browsers useful!
Learn How to Set Cookies in a User Browser [Source Codes]
To create the Cookie Consent Box, start by creating two files: an HTML File and a CSS File. When those are complete, simply paste their codes into your document—alternatively, you can download them using the button below!
Start creating an HTML document with the name index.Html and copy-pasting these codes. Be aware that documents with an extension HTML cannot be edited directly.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cookie Constent Box</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<img src="#" alt="">
<div>
<header>Cookies Consent</header>
<p>This website use cookies to ensure you get the best experience on our website.</p>
<div>
<button>I understand</button>
<a href="#">Learn more</a>
</div>
</div>
</div>
<script>
const cookieBox = document.querySelector(".wrapper"),
acceptBtn = cookieBox.querySelector("button");
acceptBtn.onclick = ()=>{
//setting cookie for 1 month, after one month it'll be expired automatically
document.cookie = "CookieBy=CodingNepal; max-age="+60*60*24*30;
if(document.cookie){ //if cookie is set
cookieBox.classList.add("hide"); //hide cookie box
}else{ //if cookie not set then alert an error
alert("Cookie can't be set! Please unblock this site from the cookie setting of your browser.");
}
}
let checkCookie = document.cookie.indexOf("CookieBy=CodingNepal"); //checking our cookie
//if cookie is set then hide the cookie box else show it
checkCookie != -1 ? cookieBox.classList.add("hide") : cookieBox.classList.remove("hide");
</script>
</body>
</html>
Second, create a CSS report named favor. Css and paste the given code into it. Please remember to name it favor.Css for your report extension.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
background: #FCBA7F;
}
.wrapper{
position: absolute;
bottom: 30px;
left: 30px;
max-width: 365px;
background: #fff;
padding: 25px 25px 30px 25px;
border-radius: 15px;
box-shadow: 1px 7px 14px -5px rgba(0,0,0,0.15);
text-align: center;
}
.wrapper.hide{
opacity: 0;
pointer-events: none;
transform: scale(0.8);
transition: all 0.3s ease;
}
::selection{
color: #fff;
background: #FCBA7F;
}
.wrapper img{
max-width: 90px;
}
.content header{
font-size: 25px;
font-weight: 600;
}
.content{
margin-top: 10px;
}
.content p{
color: #858585;
margin: 5px 0 20px 0;
}
.content .buttons{
display: flex;
align-items: center;
justify-content: center;
}
.buttons button{
padding: 10px 20px;
border: none;
outline: none;
color: #fff;
font-size: 16px;
font-weight: 500;
border-radius: 5px;
background: #FCBA7F;
cursor: pointer;
transition: all 0.3s ease;
}
.buttons button:hover{
transform: scale(0.97);
}
.buttons .item{
margin: 0 10px;
}
.buttons a{
color: #FCBA7F;
}
Assuming your code works correctly and no errors or trouble arises, download the source code files via the given download button. They are free zip files that must be extracted later.
Finally, a straightforward tutorial on implementing cookie consent! Your step-by-step instructions made it a breeze to add this crucial feature to my website. Thank you!
This tutorial deserves five stars! It’s rare to find such clear, concise guidance on a topic like form cookies. Thanks for making it accessible to everyone.
Thank you for simplifying what seemed like a complex topic. Your tutorial was incredibly helpful, and I now feel confident incorporating form validation into my web designs. Keep up the great work!
Pingback: How to send mail using PHP on an XAMPP Server - Web Designer Freelancer | UI/ UX Designer | Abhikesh Kumar