Create a Cookie Consent Banner with Vanilla JS
Tags: javascript, beginners, tutorial, webdev
Published: 2022-06-01 19:27:32

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.](https://codepen.io/pen/)

##Getting Started
**=>** Paste this HTML in the HTML section of your Pen
```html
<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.
```css
/**
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:


![a cookie banner sits at the top of a web page above the header area](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cjbrde7c8j1r9ak8baok.jpg)

##Manipulating the DOM
**=>** Create a div element in the JS section of your Pen by using the [createElement()](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement) method.

![const cookieBanner equals document createElement div](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k7xdkz9zazw1c5h0rcpk.jpg)

**=>** Add a class name and insert text and a button into the Cookie Consent Banner using the [classList.add()](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList) and [innerHTML](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML#replacing_the_contents_of_an_element) methods.  

![screenshot showing how classList add and inner HTML were used to manipulate the DOM element](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yddvoen0s8hmhxae5okx.jpg)

**=>** You can use this HTML for your innerHTML content if you'd like. **‼️important!! Be sure to include the button HTML as is.**
```html
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()](https://developer.mozilla.org/en-US/docs/Web/API/Document/prepend#examples)

![the div element created has been added into the DOM. ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mqlcaavgk8sl6zl8q6cu.jpg)

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

![The cookie banner is currently unstyled](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m9j74a1fbfat3uen1gsx.jpg)

**=>** Style the Cookie Banner. 


You can use this CSS, or design it yourself.
```css
.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:

![the cookie banner and button are now styled with a green button and spacing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xj1w3pm9uv40bbq17wil.jpg)

**=>** Remove the Cookie Banner when the user clicks the button.
 
**=>** Use [querySelector](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) to select the button by its class and [store it in a variable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const).  

**=>** Add an [event listener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) for the click event to the button variable you created. 

**=>** Use the [remove() method](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove#examples) to remove the banner element from the DOM.

![remove method called within event listener to remove the banner when the button is clicked](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i35kblbyac4m8w9n5zsa.jpg)


**=>** OPTIONAL: Add a [setTimeout()](https://developer.mozilla.org/en-US/docs/Web/API/setTimeout) function within the event handler to prepare for the next steps.  Take this project even further with [my complete post here.](https://allmaddesigns.com/vanilla-js-project-make-a-cookie-banner/#user-feedback)

## See the complete project here:
{% codepen https://codepen.io/all-mad-designs/pen/gOvexgp %}