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

<header>
  <div>Site Title</div>
  <nav>
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>Contact</li>
    </ul>
  </nav>
  </header>
  <main>
  </main>
  <footer>
      <nav>
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>Contact</li>
    </ul>
  </nav>
  </footer>

=> 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('https://images.unsplash.com/photo-1651505343248-26d2400939c4?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTM5NjcxMTM&ixlib=rb-1.2.1&q=80') 0 0 no-repeat;
  opacity: .5;
}

Your pen should look a bit like a web page:

Manipulating the DOM

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

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

=> 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>

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

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

=> Style the Cookie Banner.

You can use this CSS, or design it yourself.

.cookie-message {
  width:100%;
  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%;
}

Your Banner should look something like this:

=> 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.

=> 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: