I want to close the offer at the end of the timer?-CodePudding

I want the ad to close automatically when the timer ends I have tried several forms of loops but it still doesn't work when implementing the loops it stops working, it just cancels the timer thing.

The other thing I couldn't do is when I press the close button I want the ad to close.

//This is the timer code
function paddedFormat(num) {
    return num < 10 ? "0"   num : num;
}

function startCountDown(duration, element) {
    let secondsRemaining = duration;
    let min = 0;
    let sec = 0;

    let countInterval = setInterval(function () {
        sec = parseInt(secondsRemaining % 60);
        element.textContent = `${paddedFormat(sec)}`;
        secondsRemaining = secondsRemaining - 1;
        if (secondsRemaining < 0) { clearInterval(countInterval) };
    }, 1000);
}

window.onload = function () {
    let time_minutes = 0; // Value in minutes
    let time_seconds = 9; // Value in seconds

    let duration = time_seconds   1 ;

    element = document.querySelector('#count-down-timer');
    element.textContent = `${paddedFormat(time_minutes)}:${paddedFormat(time_seconds)}`;

    startCountDown(--duration, element);
};

body {
    font-family: sans-serif;
    margin: 0;
}
h1 {
    font-size: 4.0em;
    margin-left: 30px;
}
.ad {
    display: flex;
    height: 120px;
    background-color: rgb(23, 29, 29);
    justify-content: space-between;
    align-items: center;
    color: rgb(253, 253, 0);
}
a {
    text-decoration: none;
    color: white;
}
img {
    width: 50px;
    height: 50px;
    margin-right: -20px;
}
header {
    display: flex;
    height: 70px;
    background-color: rgb(94, 111, 185);
    justify-content: space-between;
    align-items: center;
    padding: 10px;
}
.cerrar {
    margin-top: -10px;
    width: 50px;
    height: 50px;
    margin-right: 25px;
}
.logo {
    font-family: Brush Script MT;
    font-size: 2rem;
    display: flex;
    align-items: left;
    color: azure;
    margin-left: 15px;
}
nav a {
    font-weight: 600;
    padding-right: 10px;
}
nav a:hover {
    color: black;
}

.root {
    margin-top: 25px;
    width: 193px;
    height: 109px;
    margin-left: 25px;
    border: solid 20px rgb(94, 111, 185);
}

@media (max-width:500px) {
    header {
        flex-direction: column;
    }
    nav {
        padding: 10px 0px;
    }
}
.alert {
    margin-top: 10px;
    border: solid 5px green;
    text-align: center;
    margin-left: 10px;
    margin-right: 10px;
}
.text-center {
    background-color: rgb(0, 4, 255);
    border-radius: 100%;
    width: 105px;
    height: 80px;
    margin-left: 35rem;
    color: red;
}
.segundo_parr {
    margin-left: -15px;
}
.color {
    color: blue;
    font-size: 3.0em;
}

<!--I want this not to be erased-->
    <div >
        <h1> 10% discount</h1>
    </div>
    <header>
        <div >
            <h2 >Entornos web</h2>
        </div>
        <nav>
            <a href="" >Offers</a>
            <a href="" >Products</a>
            <a href="" >register</a>
        </nav>
    </header>
    <div id="create">

    </div>

    <!--I want all this to close when I press the close button. -->
    <div >
        <h1 >YOU HAVE A PROMOTION AND IT ENDS IN
            <!--This is the button to close the announcement-->
            <a href="" >
                <img src="img/close.ico" alt="">
            </a>
        </h1>

        <!--Este es el temporizador, quiero que se cierre cuando el contador llegue a 0.-->
        <h1  id="count-down-timer"></h1>

        <h1 >SECONDS, CLICK ON OFFERS NOW!</h1>
    </div>

the other thing I couldn't do is when I press the close button I want the ad to close.

CodePudding user response：

Use document.querySelector(".alert") and .remove() to remove that Ads from HTML like @Nathan Adda suggest, addEventListener click on DOM of close Button for remove Ads using .remove() same above:

const ads = document.querySelector(".alert")
const closeButton = document.querySelector(".close")
//This is the timer code
function paddedFormat(num) {
    return num < 10 ? "0"   num : num;
}

function startCountDown(duration, element) {
    
    let secondsRemaining = duration;
    let min = 0;
    let sec = 0;

    let countInterval = setInterval(function () {

        
        sec = parseInt(secondsRemaining % 60);

        element.textContent = `${paddedFormat(sec)}`;

        secondsRemaining = secondsRemaining - 1;
        if (secondsRemaining < 0) { 
          clearInterval(countInterval)
          if(ads){
            ads.remove();
           } 
         };

    }, 1000);
}

window.onload = function () {
    let time_minutes = 0; // Value in minutes
    let time_seconds = 9; // Value in seconds

    let duration = time_seconds   1 ;

    element = document.querySelector('#count-down-timer');
    element.textContent = `${paddedFormat(time_minutes)}:${paddedFormat(time_seconds)}`;

    startCountDown(--duration, element);
};

function closeAd(){ads.remove()}
if(closeButton) closeButton.addEventListener("click", closeAd)

body {
    font-family: sans-serif;
    margin: 0;
}

h1 {
    font-size: 4.0em;
    margin-left: 30px;

}

.ad {
    display: flex;
    height: 120px;
    background-color: rgb(23, 29, 29);
    justify-content: space-between;
    align-items: center;
    color: rgb(253, 253, 0);
}

a {
    text-decoration: none;
    color: white;
}

img {
    width: 50px;
    height: 50px;
    margin-right: -20px;
}

header {
    display: flex;
    height: 70px;
    background-color: rgb(94, 111, 185);
    justify-content: space-between;
    align-items: center;
    padding: 10px;
}

.cerrar {
    margin-top: -10px;
    width: 50px;
    height: 50px;
    margin-right: 25px;
}

.logo {
    font-family: Brush Script MT;
    font-size: 2rem;
    display: flex;
    align-items: left;
    color: azure;
    margin-left: 15px;
}

nav a {
    font-weight: 600;
    padding-right: 10px;
}

nav a:hover {
    color: black;
}


.root {
    margin-top: 25px;
    width: 193px;
    height: 109px;
    margin-left: 25px;
    border: solid 20px rgb(94, 111, 185);
}

@media (max-width:500px) {
    header {
        flex-direction: column;
    }

    nav {
        padding: 10px 0px;
    }
}


.alert {
    margin-top: 10px;
    border: solid 5px green;
    text-align: center;
    margin-left: 10px;
    margin-right: 10px;
}

.text-center {
    background-color: rgb(0, 4, 255);
    border-radius: 100%;
    width: 105px;
    height: 80px;
    margin-left: 35rem;
    color: red;
}

.segundo_parr {
    margin-left: -15px;
}

.color {

    color: blue;
    font-size: 3.0em;
}

<!--I want this not to be erased-->
    <div >
        <h1> 10% discount</h1>

    </div>
    <header>
        <div >
            <h2 >Entornos web</h2>
        </div>
        <nav>
            <a href="" >Offers</a>
            <a href="" >Products</a>
            <a href="" >register</a>
        </nav>
    </header>
    <div id="create">

    </div>

    <!--I want all this to close when I press the close button. -->
    <div >
        <h1 >YOU HAVE A PROMOTION AND IT ENDS IN
            <!--This is the button to close the announcement-->
            <a >
                <img src="img/close.ico" alt="">
            </a>
        </h1>

        <!--Este es el temporizador, quiero que se cierre cuando el contador llegue a 0.-->
        <h1  id="count-down-timer"></h1>

        <h1 >SECONDS, CLICK ON OFFERS NOW!</h1>
    </div>

CodePudding user response：

How about adding an id to the div you want to be deleted then

delete the element directly at the end of the timer with this function or another:

document.getElementById("elToDelete").remove();

Maybe use the .then of a time to insert that part