কীভাবে Show Countdown in top header অ্যাড করবেন

১.ই-দোকান এর ম্যানেজ প্যানেল থেকে Shop > Design ক্লিক করুন

২.JvavScript অপশন এ ক্লিক করুন

৩.Add New তে ক্লিক করে একটা new javascript ফাইল ক্রিয়েট করুন ৪.জাভাস্ক্রিপ্ট এর কোড তা copy করে ওই খানে সেট করে আপডেট করুন ৫.আবার Shop > Design > Custom CSS এ ক্লিক করুন ৬.স্ক্রোল করে নিছে css কোড তা পেস্ট করুন, আপডেট করুন

###CSS Code

//style

/* Counter Css */
#demo {
  width: 100%;
}
.counter{
    display: flex;
    flex-direction: column;
     text-align: center;
     padding: 20px 5px;
     background-color: #12171E;
     width: 100%;
     color: #fff;
     padding-bottom: 10px;

}

 .counter h4{
    font-size: 1.35rem;
    font-weight: bold;
    line-height: 1.75rem;
    margin-bottom: 5px;
    padding-bottom: 0;
}



.header-counter{
    display: flex;
    gap: 10px;
    margin-right: auto;
    margin-left: auto;
   
}

.header-counter p{
    padding-bottom: 0;
    margin-bottom: 5px;
    line-height: 20px;
    text-transform: uppercase;
    font-weight: bold;
}

.header-counter p span{
    background-color: #03497a;
    padding: 20px;
    display: block;
    width: 100px;
    margin-top: 10px;
    font-size: 35px;
    font-weight: bold;

}


@media screen and (max-width:768px){
    .counter h4{
    font-size: 1.25rem;
    
}
.header-counter p span{
    padding: 10px;
    width: 80px;
    margin-top: 10px;
    font-size: 30px;
    font-weight: bold;

}
}

###JavaScript Code

//Script
document.addEventListener("DOMContentLoaded", function(event){

  //create a div element
  let getHeader = document.querySelector("#masthead");
let div = document.createElement('div')
div.id = "demo"
// Set the date we're counting down to
var countDownDate = new Date("Dec 5, 2024 15:37:25").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

// Get today's date and time
var now = new Date().getTime();

// Find the distance between now and the count down date
var distance = countDownDate - now;

// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);

if(days < 10){
    days = "0"+days;
}
 if(hours < 10){
    hours = "0"+hours
}
if(minutes <10){
    minutes = "0"+minutes
}
 if(seconds < 10){
    seconds = "0"+seconds
  
}

// Display the result in the element with id="demo"
document.getElementById("demo").innerHTML = `<div class="counter"> <h4>5th Birthday Festival. Starts on 19 Nov.</h4><div class="header-counter"><p>Days: ${days}</p> <p> Hours: ${hours}</p> <p>Minutes: ${minutes}</p></div></div>`;

// If the count down is finished, write some text
if (distance < 0) {
  clearInterval(x);
  document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);

getHeader.insertBefore(div, getHeader.firstChild)
})

কীভাবে Show Countdown in top header অ্যাড করবেন​

কীভাবে Show Countdown in top header অ্যাড করবেন