Create Popup Cookies Consent Box in HTML CSS & JavaScript
by Letscode - October 15,2023
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.
Cookies Consent Box in HTML CSS & JavaScript [Source Code]
To create Popup Cookies Consent Box in HTML CSS & JavaScript, follow the given steps line by line:
- Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
- Create an index.html file. The file name must be index and its extension .html
- Create a style.css file. The file name must be style and its extension .css
- Create a script.js file. 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.
<!-- Coding By LetsCodeweb - youtube.com/LetsCodeweb -->
<!DOCTYPE html>
<!-- Coding by Letscodeweb-->
<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.
/* Coding by Letscode */
/* 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("Letscodeweb")) 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.
Most Popular
Recent Posts
-
Image Slider in HTML CSS and JavaScript
Letscode - October 4,2023
-
Facebook Login Page Using HTML & CSS
Letscode - October 10,2023
-
Amazon Website clone in HTML & CSS
Letscode - November 4,2023
-
Custom Captcha Generator in HTML CSS and JS
Letscode - October 24,2023