<!--
**********
Problem 1:
**********
We need to tell the user something happened when they clicked the button.
Options: Use setAttribute() on the aria-pressed attribute. Use CSS to change the look of the button. Use textContent to update the button text.
**********
Problem 2:
**********
If we prepend the cookie banner we will get CLS!
What ways could we solve for this?
Option: Add CSS positioning to prevent elements from shifting?
-->
<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>
.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;
  /*****************
  This code prevents CLS
  *******************
  1. Comment it out and reload the page.
  2. When you click the button, the page will shift
 **/
  position: fixed;
  top: 0;
  z-index: 2; 
/***/
}
.btn {
  width: 150px;
  margin-left: 1%;
  background-color: limegreen;
  padding: .5% 1%;
  border: 2px outset white;
  outline: 1px solid black;
  color: white;
  border-radius: 5%;
}
/**
This CSS will style the button when clicked
**/
.clicked {
  border: 2px inset black;
  outline: 2px solid black;
}


/**
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;
}
//create a div element
const cookieBanner = document.createElement('div');

//add a class and text with a button
cookieBanner.classList.add('cookie-message');
cookieBanner.innerHTML=`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 it as the first child of the body element
document.body.prepend(cookieBanner);

//remove the banner when clicked
const button = document.querySelector('.btn');
button.addEventListener( 'click' , () => {
/*********
This code sets the aria-pressed attribute to true for non-visual users
**********/
  button.setAttribute( 'aria-pressed', true);
/*
 This code will add a class name "clicked" to the button which allows you to style the button
**/
  button.classList.add('clicked'); 
/*
This code will change the text of the button
**/
  button.textContent = 'bye bye!';
  setTimeout( ()=> {
    cookieBanner.remove();
      }, 1000);
});

Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.