Address Book using MERN

How to create Cookie Consent Box using HTML CSS and JavaScript ?

Last Updated : 26 Jul, 2024

In this article, we will see how cookies are stored using the cookie consent box using HTML, CSS, & JavaScript.

Cookies are small pieces of data that are stored on a user's device while browsing the website. Cookies are used to store information for faster access to data and provide a better user experience. Also, it is used for session management and helps users log in as they go to different web pages of the same website.

To see where the cookies are stored, follow the below steps:

Right-click on the browser
click on the inspect option,
Go to the Application tab, under the storage section there are 'Cookies'
Expand the 'Cookies' and now see all cookies stored by the current website.
Also, you can manage the cookies from that section like editing, Deleting, storing, etc.

Prerequisite

Preview

file

Approach

Create an HTML file, defining a div for the cookie consent box. Inside, add an image, a header, text explaining cookie usage, and Accept/Reject buttons.
Style the consent box using CSS, applying specific designs for elements like buttons, backgrounds, and positioning.
Use JavaScript to handle button clicks. When the 'Accept' button is clicked, set a cookie and hide the consent box. On 'Reject', display an alert and hide the box.
Check if a specific cookie exists. If the cookie is found, hide the consent box to reflect the user's choice. If not, show the consent box for the user to decide.

Example: This example describes the basic creation of the Cookie Consent Box using HTML CSS & JavaScript.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>
          Cookie Consent Box using HTML CSS & JavaScript
      </title>
    <link rel="stylesheet"
          href="style.css">
</head>

<body>
    <div id="consentBox">
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20231115025707/gfg.png"
             alt="Logo">
        <div id="consentContent">
            <header id="consentHeader">
                  Cookies: The choice is yours
              </header>
            <p>
              We use cookies to make our site work well
              for you and so we can continually improve it.
              <br>The cookies that are necessary to 
              keep the site functioning are always on
            </p>
            <div class="buttons">
                <button class="consentButton">
                      Accept Cookies
                  </button>
                <button class="rejectButton">
                      Reject
                  </button>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>

</html>

CSS

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background: #f3f3f3;
}

#consentBox {
    background: #fff;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    text-align: center;
}

#consentBox.hide {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.8);
    transition: all 0.3s ease;
}

::selection {
    color: #fff;
    background: #229a0f;
}

#consentContent p {
    color: #858585;
    margin: 10px 0 20px 0;
}

#consentContent .buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
}

.consentButton,
.rejectButton {
    padding: 12px 30px;
    border: none;
    outline: none;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.consentButton {
    background: #2a910b;
    margin-right: 10px;
}

.rejectButton {
    color: #111211;
    background: transparent;
    border: 2px solid #099c2c;
    text-decoration: none;
}

#consentBox img {
    max-width: 90px;
}

#consentHeader {
    font-size: 25px;
    font-weight: 600;
    margin-top: 10px;
}

JavaScript

const consentBox = 
    document.getElementById("consentBox");
const acceptBtn = 
    document.querySelector(".consentButton");
const rejectBtn = 
    document.querySelector(".rejectButton");

acceptBtn.onclick = () => {
    document.cookie = "CookieBy=GeeksForGeeks; max-age="
        + 60 * 60 * 24;
    if (document.cookie) {
        consentBox.classList.add("hide");
    } else {
        alert
            ("Cookie can't be set! Please"+
              " unblock this site from the cookie"+
              " setting of your browser.");
    }
};

rejectBtn.onclick = () => {
    alert(
        "Cookies rejected. Some functionality may be limited.");
    consentBox.classList.add("hide");
};

let checkCookie = 
    document.cookie.indexOf("CookieBy=GeeksForGeeks");
checkCookie !== -1 ? consentBox.classList.add("hide") :
    consentBox.classList.remove("hide");

Explanation

The HTML file includes a section for cookie consent with visual elements and buttons for user choice.
CSS styles are applied to enhance the appearance of the consent box, customizing its visual attributes.
JavaScript functions manage user actions, setting cookies upon 'Accept' and hiding the box.
On clicking on the 'Accept cookies' button, a cookie named "GeeksForGeeks" is stored in the cookies storage with a maximum age of 24hrs, which means that after 24hrs the cookies are automatically deleted from the storage.
Upon 'Reject', an alert is shown, and the consent box is hidden accordingly.
The script verifies the existence of a specific cookie and adjusts the display of the consent box based on its presence or absence.

Output:

Address Book using MERN

the_ravisingh

Improve

Article Tags :

Similar Reads

How to create Popup Box using HTML, CSS and JavaScript ?

Creating a popup box with HTML, CSS, and JavaScript improves user interaction on a website. A responsive popup appears when a button is clicked, featuring an HTML structure, CSS for styling, and JavaScript functions to manage visibility. ApproachCreate the Popup structure using HTML tags, Some tags

How to Create a Chips Component using HTML CSS & JavaScript ?

In this article, we will see how we can create a chip component with the help of HTML, CSS, and JavaScript. In a chip component, there are basically two sections: one is the content section, and the other is the cross-button section. Both should be under one container with a proper border-radius. Pr

How to Create a Modal Box using HTML CSS and JavaScript ?

We will learn how to create a modal dialog box using HTML, CSS, and JavaScript. A modal is a pop-up dialog that appears on top of the main content and requires the user to interact with it before returning to the main screen. Approach to Create Modal BoxHTML Structure:Create a button that opens the

Create a Contact Form using HTML CSS & JavaScript

A contact form is a web form used to collect user information and messages, facilitating communication between visitors and site owners. It is essential for feedback, inquiries, and support. Create a contact form using HTML for structure, CSS for styling, and JavaScript for validation and submission

How to create a Popup Form using HTML CSS and JavaScript ?

To create a popup form using JavaScript, you can design a hidden overlay that becomes visible when triggered. We will use HTML for form elements, CSS for styling, and JavaScript to toggle the visibility of the overlay. This allows for a user-friendly and interactive way to display forms on your webp

How to Create Popup Box using HTML and CSS?

Popups are useful for displaying alerts, forms, notifications, or additional information. Here are three common methods to create a popup box: 1. Using Display PropertyThis method toggles the popup's visibility by changing its CSS display property. [GFGTABS] HTML <html> <head> <style

How to Make a Cookie Clicker Using HTML and JavaScript?

Creating a "Cookie Clicker" game is a great beginner project for learning how to manipulate elements in HTML with JavaScript. The idea is simple: a user clicks on a cookie image, and each click increases the score. We can add more features like auto-clickers, upgrades, or score multipliers, but we'l

How to create a Snackbar using HTML, CSS & JavaScript?

Snackbar or toast notifications are brief messages that pop up on a webpage to convey information or feedback to users. They are versatile tools for signaling different states, like success, error, or invalid input, and can appear at various positions on the screen. Approach:First, create a basic HT

How to create a Landing page using HTML CSS and JavaScript ?

A landing page, also referred to as a lead capture page, static page, or destination page, serves a specific purpose and typically appears as a result of online advertising or search engine optimization efforts. Unlike a homepage, a landing page is stripped of distractions and focuses on capturing v

Create a Facebook Post Box Clone in HTML CSS & JavaScript

We will see how can we implement a Facebook post box clone with the help of HTML, CSS, and JavaScript. A Facebook post is a message or update shared by a user on their profile or page. It typically includes text, photos, videos, or links. Users can tag locations, and friends, express feelings, and s