How to create Cookie Consent Box using HTML CSS and JavaScript ? Last Updated : 26 Jul, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report 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 browserclick 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.PrerequisiteHTMLCSSJAVASCRIPTPreviewApproachCreate 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"); ExplanationThe 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: How to create Cookie Consent Box using HTML CSS and JavaScript Comment More infoAdvertise with us Next Article How to Create a Modal Box using HTML CSS and JavaScript? T the_ravisingh Follow Improve Article Tags : JavaScript Web Technologies Geeks Premier League JavaScript-Projects Geeks Premier League 2023 +1 More 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 a 3 min read 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 3 min read 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 m 2 min read 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 3 min read 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 3 min read How to Create Popup Box using HTML and CSS? Popup boxes are widely used in web design, with nearly 80% of modern websites utilizing them for alerts, forms, confirmations, or user guidance. They enhance interactivity and improve user experience. Below are three common methods to create a popup box using only HTML and CSS:1. Using Display Prope 4 min read Like