• Register
Welcome to Techno Smarter QA, Questions, Answers Community
Welcome to Techno Smarter Q&A, where you can ask questions and receive answers from other members of the community. Ask the tech & programming Question that you want. Guests Posting are allowed.
+1 vote
141 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 1

2 Answers

+1 vote

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

by (6k points) 2 18 41
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 (6k points) 2 18 41
edited by
...