<!--
**********
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;
}
.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%;
}
/**
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' , () => {
setTimeout( ()=> {
cookieBanner.remove();
}, 1000);
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.