Did you know how to set a cookie on the website with the basic HTML, CSS, and JavaScript codes and, what cookies are? If not, then this blog is written for you.
Today’s blog will teach you how to Create a Pop-Up Cookie Consent Box in HTML CSS and JavaScript with setting the cookie for some interval of time, even if you only know the basics of JavaScript, you will be able to create and set cookies. Recently I have uploaded how to Create Responsive Search Bar in HTML CSS & JavaScript I hope you will like it.
Cookies are text files that are sent to your browser by a website you visit. They assist the website in remembering information about your visit, which can both make it simpler for you to return to the site and increase its usefulness to you.
Have a look at the given image of our Cookies Consent Box. As you can see on the cookie Box, there are cookie icons and heading text at the top, and underneath that there is some informational text about cookies and accept and decline buttons. This cookies box will appear on loaded webpages, and you will be asked whether you want to accept or decline cookies.
To see the real demo of this Cookies Consent Box how it pops out, what happens when you click on the decline or accept buttons, and what time the cookies will be set. Also, by watching the given video tutorial, you will get to know how all the HTML CSS and JavaScript work behind this Popup Cookie Consent Box.
Cookies Consent Box in HTML CSS & JavaScript | Video Tutorial
I have provided all the HTML CSS and JavaSCript codes that I have used to create this Cookies Consent Box. Before getting into the source code files, You have to know some important thing that I did in the video tutorial of this cookie box.
As you have seen in the video tutorial, with the wepage loaded our Cookies Consent Box appeared. When I clicked on the cookie decline button it got disappeared until the wepage got refreshed. When I clicked on the cookie accept, the cookie massage set for one month. Bascially till a month that cookies consent box will not appear, after a month our cookies will be expired and the cookie consent box will appear again.
I hope by reading the blog and watching the video tutorial you got to know how to Create Popup Cookies Consent Box in HTML CSS & JavaScript with setting the cookie. If you are wondering to get all the source code file of this cookies consent box, it is provided below.
You May Like This:
Cookies Consent Box in HTML CSS & JavaScript [Source Code]
- Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
- Create an
index.htmlfile. The file name must be index and its extension .html - Create a
style.cssfile. The file name must be style and its extension .css - Create a
script.jsfile. The file name must be script and its extension .js
Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the Cookies Consent Box in HTML CSS & JavaScript by clicking on the given download button.
First, paste the following codes into your index.html file.
<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Popup Cookie Consent Box</title>
<link rel="stylesheet" href="style.css" />
<!-- Boxicons CSS -->
<link href="https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css" rel="stylesheet" />
<script src="script.js" defer></script>
</head>
<body>
<div class="wrapper">
<header>
<i class="bx bx-cookie"></i>
<h2>Cookies Consent</h2>
</header>
<div class="data">
<p>This website use cookies to help you have a superior and more relevant browsing experience on the website. <a href="#"> Read more...</a></p>
</div>
<div class="buttons">
<button class="button" id="acceptBtn">Accept</button>
<button class="button" id="declineBtn">Decline</button>
</div>
</div>
</body>
</html>
Second, paste the following codes into your style.css file.
/* Google Fonts - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
min-height: 100vh;
background-color: #4070f4;
}
.wrapper {
position: fixed;
bottom: 50px;
right: -370px;
max-width: 345px;
width: 100%;
background: #fff;
border-radius: 8px;
padding: 15px 25px 22px;
transition: right 0.3s ease;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.wrapper.show {
right: 20px;
}
.wrapper header {
display: flex;
align-items: center;
column-gap: 15px;
}
header i {
color: #4070f4;
font-size: 32px;
}
header h2 {
color: #4070f4;
font-weight: 500;
}
.wrapper .data {
margin-top: 16px;
}
.wrapper .data p {
color: #333;
font-size: 16px;
}
.data p a {
color: #4070f4;
text-decoration: none;
}
.data p a:hover {
text-decoration: underline;
}
.wrapper .buttons {
margin-top: 16px;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.buttons .button {
border: none;
color: #fff;
padding: 8px 0;
border-radius: 4px;
background: #4070f4;
cursor: pointer;
width: calc(100% / 2 - 10px);
transition: all 0.2s ease;
}
.buttons #acceptBtn:hover {
background-color: #034bf1;
}
#declineBtn {
border: 2px solid #4070f4;
background-color: #fff;
color: #4070f4;
}
#declineBtn:hover {
background-color: #4070f4;
color: #fff;
}
Third, paste the following codes into your script.js file.
const cookieBox = document.querySelector(".wrapper"),
buttons = document.querySelectorAll(".button");
const executeCodes = () => {
//if cookie contains codinglab it will be returned and below of this code will not run
if (document.cookie.includes("codinglab")) return;
cookieBox.classList.add("show");
buttons.forEach((button) => {
button.addEventListener("click", () => {
cookieBox.classList.remove("show");
//if button has acceptBtn id
if (button.id == "acceptBtn") {
//set cookies for 1 month. 60 = 1 min, 60 = 1 hours, 24 = 1 day, 30 = 30 days
document.cookie = "cookieBy= codinglab; max-age=" + 60 * 60 * 24 * 30;
}
});
});
};
//executeCodes function will be called on webpage load
window.addEventListener("load", executeCodes);
That’s all, now you’ve successfully created a project on Popup Cookies Consent Box in HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any problems, please download the source code files from the given download button. It’s free and a zip file containing the project folder with source code files will be downloaded.
