• Register
Welcome to Smarter QA, Questions, Answers Community
Welcome to Smarter QA, where you can ask questions and receive answers from other members of the community. Ask anything that you want. Guests Posting are allowed.
+1 vote
72 views
For people who join my enewsletter, I want to invite them to purchase my product at a special discount by sending them a email with a link to my product page. But they have a deadline of 4 days after they click that link. How do I make this a dynamic timer which adapts to different people joining my new letter at different times.

Example, for person A joining my email group, I sent the link on March 1 and his deadline is March 4. But person B joining the list on March 10, will be sent the same email with the same link (automated) but when he clicks it, his deadline is March 14.

I was given this HTML and CSS code, but it’s for a SPECIFIC DATE; it’s not dynamic. Thanks for helping.

HTML code

<div class="countdown-wrap">

            <div id="clockdiv">

                <div>

                    <span class="days"></span>

                    <span class="time-label">DAYS</span>

                </div>

                <div>

                    <span class="hours"></span>

                    <span class="time-label">HOURS</span>

                </div>

                <div>

                    <span class="minutes"></span>

                    <span class="time-label">MINUTES</span>

                </div>

                <div>

                    <span class="seconds"></span>

                    <span class="time-label">SECS</span>

                </div>

            </div>

        </div>

        <script type="text/javascript">

var deadline = 'March 2 2019 12:41:39 GMT+0200';

function getTimeRemaining(endtime){

    var t = Date.parse(endtime) - Date.parse(new Date());

    console.log(t);

    var seconds = Math.floor( (t/1000) % 60 );

    var minutes = Math.floor( (t/1000/60) % 60 );

    var hours = Math.floor( (t/(1000*60*60)) % 24 );

    var days = Math.floor( t/(1000*60*60*24) );

    return {

        'total': t,

        'days': days,

        'hours': hours,

        'minutes': minutes,

        'seconds': seconds

    };

}

function initializeClock(id, endtime){

    var clock = document.getElementById(id);

    function updateClock(){

        var t = getTimeRemaining(endtime);

        var daysSpan = clock.querySelector('.days');

        var hoursSpan = clock.querySelector('.hours');

        var minutesSpan = clock.querySelector('.minutes');

        var secondsSpan = clock.querySelector('.seconds');

        daysSpan.innerHTML = t.days;

        hoursSpan.innerHTML = t.hours;

        minutesSpan.innerHTML = t.minutes;

        secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

        if(t.total<=0){

            // Redirect if the Countdown is Over

            window.location.href="https://www.google.com”;

        }

    }

    updateClock(); // run function once at first to avoid delay

    var timeinterval = setInterval(updateClock,1000);

}

initializeClock('clockdiv', deadline);

</script>

        

CSS code

countdown-wrap:before {

    content: "";

    width: 8px;

    height: 65px;

    background: #444;

    background-image: -webkit-linear-gradient(top, #555, #444, #444, #555);

    background-image: -moz-linear-gradient(top, #555, #444, #444, #555);

    background-image: -ms-linear-gradient(top, #555, #444, #444, #555);

    background-image: -o-linear-gradient(top, #555, #444, #444, #555);

    border: 1px solid #111;

    border-top-left-radius: 6px;

    border-bottom-left-radius: 6px;

    display: block;

    position: absolute;

    top: 50%;

    transform: translate(0,-50%);

    left: -10px;

}

.countdown-wrap {

    width: 100%;

    max-width: 465px;

    margin-left: auto;

    margin-right: auto;

    position: relative;

}

div#clockdiv {

    text-align: center;

    background: #222;

    background-image: -webkit-linear-gradient(top, #222, #333, #333, #222);

    background-image: -moz-linear-gradient(top, #222, #333, #333, #222);

    background-image: -ms-linear-gradient(top, #222, #333, #333, #222);

    background-image: -o-linear-gradient(top, #222, #333, #333, #222);

    border: 1px solid #111;

    border-radius: 5px;

    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.6);

    margin: auto;

    padding: 20px 0 5px;

}

.countdown-wrap:after {

    content: "";

    width: 8px;

    height: 65px;
in Programming by (230 points) 1

2 Answers

+1 vote

Are you able to store info in a database? That seems like the easiest route to me.

by Expert (3.1k points) 1 9 17
edited by
+1 vote

The best solution is to save the date where the period starts or ends for each user with a unique ID, then while purchasing, check if the condition is respected.

by Expert (3.1k points) 1 9 17
edited by
...