Make an HTML page hide all content after 5 minutes and only show again after 30 minutes have passed

Question

I'm making a page that will when it's done let people just take a little break for 5 minutes, then after their 5 minutes are up, all HTML elements will hide and not be accessible for another 30 minutes. I've tried using the onload event and the short interval I have keyed in is just for testing, but I was wondering if anyone could point me in the right direction.

PS: this is coded in a google apps script project. All my code.gs file has is the code to get the html service.

<!DOCTYPE html>
<script>
var elements = document.getElementsByTagName("*");

function kick(){


elements.style.display = 'none';

}

var interval = setInterval(kick,3000; );







</script> 
<style> 
button {
border-radius: 20px;
background-color: crimson ;
color: aqua;
border-width: 5px;

}






</style>


<html onload = 'timeOut()'>
<head>
  
    <style>
        * { padding: 0; margin: 0; }
        canvas { background: #eee; display: block; margin: 0 auto; }
    </style>
</head>
<body >

<canvas id="myCanvas" width="480" height="320"></canvas>

<script>
function playGame() {   var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var x = canvas.width/2;

var y = canvas.height-30;
var dx = 2;
var dy = -2;
var ballRadius = 12;
var paddleHeight = 10;
var paddleWidth = 75;
var paddleX = (canvas.width-paddleWidth) / 2;
var rightPressed = false;
var leftPressed = false;
var difficulty = 10
var score = 0
var gameRunning = false

function drawBall() {
    ctx.beginPath();
   ctx.arc(x, y, ballRadius, 0, Math.PI*2);
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    ctx.closePath();
}
function drawPaddle() {
    ctx.beginPath();
    ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    ctx.closePath();
}
function drawScore() {
    ctx.font = "24px ";
    ctx.fillStyle = "#0095DD";
    ctx.fillText("Score: "+score, 8, 20);
}
function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawBall();
    drawPaddle();
   drawScore();
   x += dx;
    y += dy;
   
if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
    dx = -dx;
}
if(y + dy < ballRadius) {
    dy = -dy;
} else if(y + dy > canvas.height-ballRadius) {
    if(x > paddleX && x < paddleX + paddleWidth) {
        dy = -dy;
        difficulty = difficulty + 0.5;
  score = score + 1;
  }
    else {
        alert("GAME OVER");
        document.location.reload();
        clearInterval(interval);
   
   }
}

if(rightPressed) {
    paddleX += 5;
    if (paddleX + paddleWidth > canvas.width){
        paddleX = canvas.width - paddleWidth;
    }
}
else if(leftPressed) {
    paddleX -= 5;
    if (paddleX < 0){
        paddleX = 0;
    }
}


}
document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);
function keyDownHandler(e) {
    if(e.key == "Right" || e.key == "ArrowRight") {
        rightPressed = true;
    }
    else if(e.key == "Left" || e.key == "ArrowLeft") {
        leftPressed = true;
    }
}

function keyUpHandler(e) {
    if(e.key == "Right" || e.key == "ArrowRight") {
        rightPressed = false;
    }
    else if(e.key == "Left" || e.key == "ArrowLeft") {
        leftPressed = false;
    }
}
var interval = setInterval(draw, difficulty);}
 
    
 
</script>
<button onclick = 'playGame()'>play keep it alive </button>


</body>

<script>

function lookAtPup() {

  var x = document.getElementById("a");
var y = document.getElementById('b')
var z = document.getElementById('c')
var xx = document.getElementById('d')
var yy = document.getElementById('e')
var zz = document.getElementById('f')
var xxx = document.getElementById('g')
var yyy = document.getElementById('h')
var zzz = document.getElementById('i')
var xxxx = document.getElementById('j')
if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
if (y.style.display === "none") {
    y.style.display = "block";
  } else {
    y.style.display = "none";
 
}
if (z.style.display === "none") {
    z.style.display = "block";
  } else {
    z.style.display = "none";
 
}
if (xx.style.display === "none") {
    xx.style.display = "block";
  } else {
    xx.style.display = "none";
 
}
if (yy.style.display === "none") {
    yy.style.display = "block";
  } else {
    yy.style.display = "none";
 
}
if (zz.style.display === "none") {
    zz.style.display = "block";
  } else {
    zz.style.display = "none";
 
}
if (xxx.style.display === "none") {
    xxx.style.display = "block";
  } else {
    xxx.style.display = "none";
 
}
if (yyy.style.display === "none") {
    yyy.style.display = "block";
  } else {
    yyy.style.display = "none";
 
}
if (zzz.style.display === "none") {
    zzz.style.display = "block";
  } else {
    zzz.style.display = "none";
 
}
if (xxxx.style.display === "none") {
    xxxx.style.display = "block";
  } else {
    xxxx.style.display = "none";
 
}

}
  














</script>
<button onclick = 'lookAtPup()'> Look at a puppy </button>
<img id = 'a'  style = 'display: none' src = 'example image'> 
<img id = 'b'  style = 'display: none;' src = 'example image'>
<img id = 'c'  style = 'display: none;' src = 'example image'>
<img id = 'd'  style = 'display: none;' src = 'example image'>
<img id = 'e'  style = 'display: none;' src = 'example image'>
<img id = 'f'  style = 'display: none;' src = 'example image'>
<img id = 'h'  style = 'display: none;' src = 'example image'>
<img id = 'i'   style = 'display: none;' src = 'example image'>
<img id = 'j'  style = 'display: none;' src = 'example image'>
<button onclick = 'seeSatisfying()'> see something satisfying </button>
<img id = 'g1' style = 'display: none;' src = 'example image'> 
<img id = 'g2' style = 'display: none;' src = 'example image'>

<script>
function seeSatisfying(){
var gifOne = document.getElementById('g1')
var gifTwo = document.getElementById('g2')
if (gifOne.style.display === 'none') {
gifOne.style.display = 'block';


}
else {

gifOne.style.display = 'none';

}
if (gifTwo.style.display === 'none') {
gifTwo.style.display = 'block';


}
else {

gifTwo.style.display = 'none';

}
}
</script>




</html>

It looks that you should start by reading https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics (the `html` tag should be the root tag) — Rubén, Nov 07 '20 at 22:24

score 3 · Accepted Answer · answered Nov 07 '20 at 23:38

3

You could perhaps do something like

var body = document.querySelector('body')
    
    setInterval(()=>{
        body.style.display = 'initial' ;
        setTimeout(()=>{
              body.style.display = 'none'
        }, 300000)
     }, 18300000)

answered Nov 07 '20 at 23:38

BlowFish

154
6

1

Why is this answer -1? Isn't this a valid answer and what the OP is asking for? – Liam Pillay Nov 08 '20 at 01:51
Is there a way that i could make it so that somebody couldn't just bypass the cooldown by reloading the page? – LlamaButt Nov 09 '20 at 15:17
Well. You will need to set the function on the server. Instead of hiding the html, you could provide a jwt with an expiration of 5 minutes, and from the server manage the routes. Do you have access to manage this server side?? – BlowFish Nov 09 '20 at 16:08

score 2 · Answer 2 · answered Nov 07 '20 at 23:04

I'm not familiar with Google Apps Script, but it looks like you could make everything disappear if you made elements be the body tag, as it encompasses all the elements on the page, and therefore making its display none would make everything in it invisible. Aside from that, your code looks good.

Make an HTML page hide all content after 5 minutes and only show again after 30 minutes have passed

2 Answers2