OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

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

  • Thread starter Thread starter Probler
  • Start date Start date
P

Probler

Guest
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


Code:
const targetDate = new Date('July 15, 2024 00:00:00');

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();

Code:
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);
}

Code:
  <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="window.location.href='special.html'">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>

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.
<p>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.</p>
<p>here is my code pen for easier debug and preview: <a href="https://codepen.io/Probler/pen/KKLJxqO" rel="nofollow noreferrer">https://codepen.io/Probler/pen/KKLJxqO</a></p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const targetDate = new Date('July 15, 2024 00:00:00');

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();</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>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);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code> <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="window.location.href='special.html'">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></code></pre>
</div>
</div>
</p>
<p>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.</p>
Continue reading...
 

Latest posts

I
Replies
0
Views
1
Isaac P. Liu
I
U
Replies
0
Views
1
user3658366
U
G
Replies
0
Views
1
Giampaolo Levorato
G
M
Replies
0
Views
1
Marcelo Rodrigo Nascimento
M
Top