Setting cookies is one of the most basic things you can do using simple HTML, CSS, and JavaScript. Don’t be worried if you didn’t know. This blog will assist you.
Cookies are text files that a website sends to your browser when you visit it. They help the website remember information about your visit, making it easier for you to return to the site and increasing its usefulness to you.
Today, you will learn how to Build a Pop-Up Cookie Consent Box in HTML CSS and JavaScript with setting the cookie for certain interval of time, even if you simply know the fundamentals of JavaScript.
Have a look at the image of our Cookies Consent Box below. As you can see, the website is teal in color, and on the left-hand corners cookie Box, there are cookie symbols and header text at the top, as well as some information about cookies and accept and refuse buttons. On loaded webpages, this cookies box will show, and you will be asked whether you wish to accept or deny cookies.
Source Code For Cookies Consent Box in HTML CSS & JavaScript:
I have provided all the HTML CSS and JavaScript codes that I have used to create this Cookies Consent Box. follow the given steps.
Step One: Create an index.html file. The file name must be index and its extension .html
<!DOCTYPE html>
<!-- Hassan Ali | Web Developer | Hassanrao.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 | Hassanrao.com</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" />
</head>
<body>
<div class="wrapper">
<header>
<i class="fa fa-cookie-bite"></i>
<h2>Cookies Consent</h2>
</header>
<div class="data">
<p>This website uses cookies to provide you with a more personalised and relevant browsing experience. <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>
<script src="script.js"></script>
</body>
</html>
Step Two: Create a style.css file. The file name must be style and its extension .css
@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: #029B8C;
}
.wrapper {
position: fixed;
bottom: 50px;
left: -350px;
max-width: 340px;
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 {
left: 20px;
}
.wrapper header {
display: flex;
align-items: center;
column-gap: 15px;
}
header i {
color: #029B8C;
font-size: 32px;
}
header h2 {
color: #029B8C;
font-weight: 500;
}
.wrapper .data {
margin-top: 16px;
}
.wrapper .data p {
color: #333;
font-size: 16px;
}
.data p a {
color: #029B8C;
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: #029B8C;
cursor: pointer;
width: calc(100% / 2 - 10px);
transition: all 0.2s ease;
}
.buttons #acceptBtn:hover {
background-color: #034bf1;
}
#declineBtn {
border: 2px solid #029B8C;
background-color: #fff;
color: #029B8C;
}
#declineBtn:hover {
background-color: #029B8C;
color: #fff;
}
Final Step: 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; you’ve completed a project on Popup Cookies Consent Box in HTML CSS & JavaScript. If your code doesn’t function or you’re having troubles, please obtain the source code files from the link provided. It’s free, and you’ll get a zip file including the project folder and source code files.
View This Post On Hassanrao.com for free source Files download Link.
Top comments (0)