Hey friends, today in this blog you’ll learn how to create a Cookie Consent Box using HTML CSS & jаvascript. In the earlier blog, I have shared how to Detect Internet Connection using jаvascript.

A cookie is a small text file with small pieces of data (maximum size of 4KB) that the web server stores on the client computer/browser. Cookies help to ensure the user gets the best experience on the website. This blog will show how you can set cookies to the user browser as a cookie consent box using jаvascript.

At first, there is a cookie consent box on the web page, which you can see in the above preview image. There is a cookie image, header, short description, button to accept cookies, and a hyperlink for more details about this cookie in this box. This cookie box won’t hide even if you reload the page until you accept the cookies for your browser.

Once you accept the cookie by clicking on the I understand button then the cookie box will hide and won’t show again until you manually remove the cookie of this site from your browser or it’s not expired. In case you block this site from setting cookies to your browser or this consent box can’t set cookies to your browser then there will appear an error alert box. Cookies in this consent box set will be automatically expired after one month but you can increase or decrease the time duration according you want.

<div class="wrapper">
       <img src="https://cdn-icons-png.flaticon.com/512/164/164659.png" alt=""> <!-- Img By flaticon.Com -->
        <div class="content">
            <header>Cookies Consent</header>
            <p>This website use cookies to ensure you get the best experience on our website.</p>
            <div class="buttons">
                <button class="item">I understand</button>
                <a href="https://ticcix.com/" class="item">Learn more</a>
            </div>
        </div>
    </div>

.wrapper{
  position: fixed;
  bottom: 30px;
  left: 30px;
  max-width: 365px;
  background: #fff;
  padding: 25px 25px 30px 25px;
  border-radius: 15px;
  box-shadow: 1px 7px 14px -5px rgba(0,0,0,0.15);
  text-align: center;
}
.wrapper.hide{
  opacity: 0;
  pointer-events: none;
  transform: scale(0.8);
  transition: all 0.3s ease;
}
.wrapper img{
  max-width: 90px;
}
.content header{
  font-size: 25px;
  font-weight: 600;
}
.content{
  margin-top: 10px;
}
.content p{
  color: #858585;
  margin: 5px 0 20px 0;
}
.content .buttons{
  display: flex;
  align-items: center;
  justify-content: center;
}
.buttons button{
  padding: 10px 20px;
  border: none;
  outline: none;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  border-radius: 5px;
      background-image: linear-gradient(280deg , #FF7D58  
        ,  #FFCC4B   
      100.00%);
  cursor: pointer;
  
}
.buttons button:hover{
  transform: scale(0.97);
    transition: all 0.3s ease;
}
.buttons .item{
  margin: 0 10px;
}
.buttons a{
  color: #1282d2;
  text-decoration: none;

}

.buttons a:hover {

transform: scale(.99);
}

<script>
    const cookieBox = document.querySelector(".wrapper"),
            acceptBtn = cookieBox.querySelector("button");

        acceptBtn.onclick = () => {
            //setting cookie for 1 month, after one month it'll be expired automatically
            document.cookie = "CookieBy=Ticcix; max-age=" + 60 * 60 * 24 * 30;
            if (document.cookie) { //if cookie is set
                cookieBox.classList.add("hide"); //hide cookie box
            } else { //if cookie not set then alert an error
                alert("Cookie can't be set! Please unblock this site from the cookie setting of your browser.");
            }
        }
        let checkCookie = document.cookie.indexOf("CookieBy=Ticcix"); //checking our cookie
        //if cookie is set then hide the cookie box else show it
        checkCookie != -1 ? cookieBox.classList.add("hide") : cookieBox.classList.remove("hide");
</script>