DEV Community


Posted on

Create a Cookie Consent Banner with Vanilla JS

This easy, step by step article will show you how to create, manipulate, and remove DOM elements. With relevant links to MDN docs along the way, this is sure to help any JavaScript newbie hit the ground running.

=> Start a new pen on CodePen here.

Getting Started

=> Paste this HTML in the HTML section of your Pen

  <div>Site Title</div>
Enter fullscreen mode Exit fullscreen mode

=> Paste this CSS in the CSS section of your Pen.

Web Page Styles
* {
  font-family: "Arial", sans-serif;
  font-size: 16px;
header {
  background: white;
  color: darkblue;
  border-bottom: .5px solid darkblue;
  width: 100%;
  padding: 2%;
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr 1fr;
header div {
  grid-column: 1 /span 1;
  grid-row: 1;
  display: flex;
  margin: 1em;
  justify-self: left;
nav {
  grid-column: 2 /span 1;
  grid-row: 1;
  display: flex;
  justify-content: flex-end;
nav ul {
  display: flex;
  justify-content: space-evenly;
  width: 40%;
nav li {
  list-style: none;
main {
  min-height: 600px;
  background: url('') 0 0 no-repeat;
  opacity: .5;
Enter fullscreen mode Exit fullscreen mode

Your pen should look a bit like a web page:

a cookie banner sits at the top of a web page above the header area

Manipulating the DOM

=> Create a div element in the JS section of your Pen by using the createElement() method.

const cookieBanner equals document createElement div

=> Add a class name and insert text and a button into the Cookie Consent Banner using the classList.add() and innerHTML methods.

screenshot showing how classList add and inner HTML were used to manipulate the DOM element

=> You can use this HTML for your innerHTML content if you'd like. ‼️important!! Be sure to include the button HTML as is.

This site uses 🍪 cookies 🍪 to track everything you do, except not really, idk actually I am just an example <button class="btn" aria-pressed="false">Got It</button>
Enter fullscreen mode Exit fullscreen mode

=> Insert this DOM element you've created into the DOM using prepend()

the div element created has been added into the DOM.

Now you have created a banner and inserted it into the DOM 🎉

The cookie banner is currently unstyled

=> Style the Cookie Banner.

You can use this CSS, or design it yourself.

.cookie-message {
  padding: 2% 0;
  background: white;
  box-shadow: 12px 12px 25px #444444aa;
  border-bottom: .5px solid limegreen;
  text-align: center;
  letter-spacing: .12em;
.btn {
  width: 100px;
  margin-left: 1%;
  background-color: limegreen;
  padding: .5% 1%;
  border: 2px inset white;
  outline: 2px outset black;
  color: white;
  border-radius: 5%;
Enter fullscreen mode Exit fullscreen mode

Your Banner should look something like this:

the cookie banner and button are now styled with a green button and spacing

=> Remove the Cookie Banner when the user clicks the button.

=> Use querySelector to select the button by its class and store it in a variable.

=> Add an event listener for the click event to the button variable you created.

=> Use the remove() method to remove the banner element from the DOM.

remove method called within event listener to remove the banner when the button is clicked

=> OPTIONAL: Add a setTimeout() function within the event handler to prepare for the next steps. Take this project even further with my complete post here.

See the complete project here:

Top comments (0)