Html - Clicking button opens page X until after countdown the open page Y

Probler
June 26, 2024
78 views
0 votes
2 Answers

Clicking button opens page X until after countdown the open page Y
I am making this surprise website for my wife, it consists of the index page being a countdown until a certain date. with 1 button that opens the gift. now i want the button to either be locked until the countdown is done, or if possible have it open a page where i tease here like "oh no you dont" but if the timer is at 0 then the actual prize would open. if that makes any sense 😅. either or way of it working would be amazing.

here is my code pen for easier debug and preview: https://codepen.io/Probler/pen/KKLJxqO

enter code here

if this isnt the right place to ask then im sorry! but if you could redirect me where i should be that would be helpful.

Answers

If I understood correctly what you want. So:

You need first thing to create 2 HTML pages one for surprise. and the second to ‘ho no…’

Then change the button to:

<button class="download" onclick="openGift()">Open</button>

and create the function in JS:

 function openGift() {
 if (targetDate <= new Date()) {
 window.location.href = 'gift.html'
 }
 else {
 window.location.href = 'lock.html'
 }
 }

Full code:

  const targetDate = new Date('July 15, 2024 00:00:00');
  function openGift() {
    if (targetDate <= new Date()) {
    alert("gift unlocked");
      window.location.href = 'gift.html'
    }
    else {
        alert("gift lock");
      window.location.href = 'lock.html'
    }
  }
  function updateCountdown() {
    const now = new Date();
    const remainingTime = targetDate - now;

    if (remainingTime <= 0) {
      // If the countdown is finished, display all zeros
      document.getElementById('days').textContent = '00';
      document.getElementById('hours').textContent = '00';
      document.getElementById('minutes').textContent = '00';
      document.getElementById('seconds').textContent = '00';
      clearInterval(interval); // Stop the countdown
      return;
    }

    // Calculate the time parts
    const days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
    const hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);

    // Display the time parts in the corresponding span elements
    document.getElementById('days').textContent = days.toString().padStart(2, '0');
    document.getElementById('hours').textContent = hours.toString().padStart(2, '0');
    document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0');
    document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0');
  }

  // Update the countdown every second
  const interval = setInterval(updateCountdown, 1000);

  // Initial call to display the countdown immediately
  updateCountdown();

  body {
    background-color: #1e1f22;
  }

  .download {
    font-family: "JetBrains Mono", monospace;
    background-color: #383c44;
    height: 35px;
    width: 70px;
    border-radius: 10px;
    border: 0;
    box-shadow: none;
    text-align: center;
    font-size: 23px;
    font-weight: bolder;
    color: #4cb1c2;
  }

  .tab {
    margin: 3rem;
    margin-left: 3.6em;
  }

  .centered {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    transform: translate(-50%, -50%);
  }

  h1 {
    font-family: "JetBrains Mono", monospace;
    font-size: 35px;
    white-space: nowrap;
    line-height: 0%;
    color: white;
  }

  p {
    font-family: "JetBrains Mono", monospace;
    font-size: 20px;
    padding-top: 3px;
    padding-left: 10px;
    font-weight: bolder;
    color: #abb2bf;
  }

  .border {
    outline: auto;
    outline-color: #383c44;
    outline-offset: 15px;
    outline-width: 5px;
    outline-style: solid;
    padding: 10px;
    border-top-right-radius: 1%;
    border-bottom-left-radius: 1%;
    border-bottom-right-radius: 1%;
    border-top-left-radius: 1%;
  }

  .window {
    background-color: #383c44;
    height: 35px;
    width: 150px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    text-align: left;
  }

  .win-pos {
    transform: translateY(-15px);
  }

  .dot {
    height: 13px;
    width: 13px;
    background-color: #FF6961;
    border-radius: 50%;
    transform: translate(126px, -38px);
  }

<!DOCTYPE html>
<html lang="en">
<body>
  <!--Center Content-->
  <div class="centered">
    <div class="window win-pos">
      <p>Countdown</p>
      <div class="dot">
      </div>
    </div>
    <div class="border">
      <!--Clock-->
      <h1>
        <span style="color: #c678dd;">Until</span>
        <span style="color: #abb2bf;">Gift</span>
        <span style="color: #4cb1c2;">:</span>
        <span style="color: #ffd700;">{</span>
      </h1>
      <h1 span class="tab">
        <span style="color: #abb2bf;"> &#09;</span>
        <span style="color: #e06c75;">Days</span><span style="color: #4cb1c2;">:</span>
        <span style="color: #d19a66;" id="days"></span><span style="color: #abb2bf;">,</span>
      </h1>
      <h1 span class="tab">
        <span style="color: #abb2bf;">&#09;</span>
        <span style="color: #e06c75;">Hours</span><span style="color: #4cb1c2;">:</span>
        <span style="color: #d19a66;" id="hours"></span><span style="color: #abb2bf;">,</span>
      </h1>
      <h1 span class="tab">
        <span style="color: #abb2bf;">&#09;</span>
        <span style="color: #e06c75;">Minutes</span><span style="color: #4cb1c2;">:</span>
        <span style="color: #d19a66;" id="minutes"></span><span style="color: #abb2bf;">,</span>
      </h1>
      <h1 span class="tab">
        <span style="color: #abb2bf;">&#09;</span>
        <span style="color: #e06c75;">Seconds</span><span style="color: #4cb1c2;">:</span>
        <span style="color: #d19a66;" id="seconds"></span><span style="color: #abb2bf;">,</span>
      </h1>

      <h1 span class="tab">
        <span style="color: #abb2bf;">&#09;</span>
        <span style="color: #e06c75;">Unlock Gift</span><span style="color: #4cb1c2;">:</span>

        <span style="color: #ffd700;">
          <button class="download" onclick="openGift()">Open</button>
        </span>

        <span style="color: #68a66b;" id="period"></span><span style="color: #abb2bf;">,</span>
      </h1>

      <h1>
        <span style="color: #ffd700;">}</span><span style="color: #abb2bf;">;</span>
      </h1>
    </div>
  </div>
</body>


</html>

I just needed to perform a little DOM manipulation to add a functional onClick directly when the timer reaches zero.

<span style="color: #ffd700;">
    <button class="download" onclick="window.location.href='special.html'">Open</button>
  </span>

<span style="color: #ffd700;">
    <button class="download" id="download">Open</button>
  </span>

and

const remainingTime = targetDate - now;

if (remainingTime <= 0) {
    // If the countdown is finished, display all zeros
    document.getElementById('days').textContent = '00';
    document.getElementById('hours').textContent = '00';
    document.getElementById('minutes').textContent = '00';
    document.getElementById('seconds').textContent = '00';
    clearInterval(interval); // Stop the countdown
    return;
}

const remainingTime = targetDate - now;
let button = document.getElementById("download");

if (remainingTime <= 0) {
    // If the countdown is finished, display all zeros
    document.getElementById('days').textContent = '00';
    document.getElementById('hours').textContent = '00';
    document.getElementById('minutes').textContent = '00';
    document.getElementById('seconds').textContent = '00';
    clearInterval(interval); // Stop the countdown
    button.onclick = function() {
      window.location.href = 'https://www.google.com.br';
    };
    return;
}

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Clicking button opens page X until after countdown the open page Y

Answers