0

So basically for fun I am making a spooky website. Once the user clicks on the enter button a scary face pops up. After 3 seconds of the image popping up I want another button that says "Continue" so the user can go on to the next html page but have no clue on how to do so. I am not great with Javascript or Jquery. Here is all I have so far....

    <html>
     <head>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <style>
      .header {
      justify-content: center;
      text-align: center;
      font-size: 170%; 
      color: black;
    font-family: Papyrus;
      
}

* {
  margin: 0;
  box-sizing: border-box;
}

body {
   padding: 70px 200px;
   margin: 59px;
   background-position: center top;
   background-repeat: no-repeat;
   background-image: url("https://i.postimg.cc/13dfXzBt/Shadow-Men.jpg");
   background-size: 950px 1000px;
   background-color: #000000;
}

button {
  background-color: red;
  border: none;
  color: black;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 16px;
  font-family: Papyrus;
  font-weight : bold ;
  margin: 0 auto;
  cursor: pointer;
  position: center;
  justify-content: center;
}


#jumpscare{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
visibility:hidden;
}


</style>


<body>

<div class="header">
     <h1><span style="color:red">T</span>he <span style="color:red">E</span>xorcist <span style="color:red">H</span>ouse</h1>
    </div>  
    
<button onclick="jumpscare();"> Enter </button>
<img id="jumpscare" src="img_scaryface.jpg"/>

<script>
function jumpscare(){
var jumpscare = document.getElementById("jumpscare");
jumpscare.style.visibility="visible";
}

</script>

 </body>  
</html>
Sara Humphreys
  • 11
  • 2

4 Answers4

0

Maybe. Also, it would make more sense to use display than visibility. 

$('#butonOne').on('click', function(){
      $('.image').css('visibility', 'visible')
      $('#butonOne').css('visibility', 'hidden')
      
      
    $('.image').delay(3000).fadeOut(0)
    $('#butonTwo').delay(3000).fadeIn(0)
})
#butonTwo{
  display: none;
}

.image{
  width: 10rem;
  height: 10rem;
  background: blue;
  visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="butonOne"> Enter </button>
 
 <button id="butonTwo"> Enter </button>
 
 <div class="image"></div>
Hüsam Susame
  • 15
  • 4
0

Essentially what you are looking for is setTimeout() which will call the provided function after a given time in milliseconds (3 seconds => 3000 milliseconds).

window.addEventListener("DOMContentLoaded", e => {
    const enterBtn = document.getElementById("enter");
    const continueBtn = document.getElementById("continue");
    const scaryFace = document.getElementById("scaryFace");

    // whenever the enter button is clicked
    enterBtn.addEventListener("click", e => {
        console.log("Ahh, jumpscare!")
        scaryFace.style.visibility = "visible";
        setTimeout(() => {
            // at least 3 seconds are gone => show the "continue" button
            console.log("3 seconds are gone...")
            continueBtn.style.visibility = "visible";
        }, 3000)
    })
    // when the continue button is clicked
    continueBtn.addEventListener("click", e => {
        continueBtn.style.visibility = "hidden";
        scaryFace.style.visibility = "hidden";
        console.log("Continue with whatever you want to do now");
    })
})
<button id="enter">Enter</button>
<button id="continue" style="visibility: hidden;">Continue</button>
<img id="scaryFace" style="visibility: hidden;" src="https://dummyimage.com/600x100/000/fff&text=scary+face">

This implementation simply shows/ hides some HTML elements whenever necessary you could of course completely remove them from the DOM or navigate to another page. You could also just use <a> tag instead of a Continue <button> or other solutions are also possible.

Mushroomator
  • 6,516
  • 1
  • 10
  • 27
0

A one-off delay is achieved using setTimeout (see https://developer.mozilla.org/en-US/docs/Web/API/setTimeout )

setTimeout takes two arguments, the first is a reference to the function you want to execute after the delay, the second is the duration of the delay, in milliseconds:

setTimeout(myfunction(), "1000");
// function myfunction called afer a one second delay;

For simple functions, such as your need to change the visibility style of you button, the function can be included as an anonymous function inside the argument:

        setTimeout(() => {
          document.getElementsByClassName("delayed")[0].style = "visibility: visible";
        }, "3000")
// style changes to make button visible after 3 seconds;

The snippet shows a working example using setTimeout. It also uses an event listener to handle all click, with conditionals to determine which button was pressed. You might optionally set the visibility of the first button to hidden inside its event conditional so that users don't press it repeatedly while waiting for something to happen.

document.addEventListener('click', event => {

  if (event.target.className == "begin") {
    // show image;
    document.getElementsByClassName("scary-image-container")[0].style = "visibility: visible";
    
    // trigger timer for next button;
    setTimeout(() => {
      document.getElementsByClassName("delayed")[0].style = "visibility: visible";
    }, "3000")
    
  } // end if begin button pressed;

  else
  
  if (event.target.className == "delayed") {
    // link to next page;
    console.log("enter button pressed"); 
  } // end else if continue button pressed;


}); // end event listener;
.scary-image-container {
 visibility: hidden;
 width: 200px;
 aspect-ratio: 1;
 background: yellow;
}

.delayed {
  visibility: hidden; {
}
<button class="begin">Enter</button>
<div class="scary-image-container">Scary Image Here</div>
<button class="delayed">continue</button>
Dave Pritlove
  • 2,601
  • 3
  • 15
  • 14
  • Thanks this worked, but I want the scary face to cover the entire screen, can you tell me how I would code that? please and thank you – Sara Humphreys May 18 '22 at 23:55
  • You can style the image (or a container div holding it) to 100% width and height. The delayed button would need to be displayed on top of it so would need `absolute` positioning with a `z-index` to put it on top. Check https://developer.mozilla.org/en-US/docs/Web/CSS/z-index. – Dave Pritlove May 19 '22 at 00:01
  • not sure if my first reply went through, but how can i code it for the entire image to fit the screen? – Sara Humphreys May 19 '22 at 00:09
  • There's an example of covering the page with an image that you might find useful here: https://www.w3schools.com/howto/howto_css_modal_images.asp It has more features than you need but I think it covers the concepts you'd need to style your picture using css with a z-index quite well. – Dave Pritlove May 19 '22 at 00:18
  • thanks again, however the continue button will not go to my next html page. Where would i put "nextpage.html"? Sorry I am not very good at this – Sara Humphreys May 19 '22 at 00:24
  • The simplest way is to put `location.href = 'nextpage.html';` in the event listener code block that responds to the enter site button click. It could also go in the markup for the button ``. – Dave Pritlove May 19 '22 at 11:30
0

I think you can try something like this - use setTimeout() to run some code to display the continue link after the jumpscare is displayed! Good luck 

<style>
...
#continue-link {
  display: none;
}
.continue-link-display {
  display: block;
}
</style>


<body>
  ...
<a href="/next-page" id="continue-link"> Continue </a>

<script>
function jumpscare(){
  ...
  setTimeout(() => {
    const continue = document.getElementById("continue-link")
    continue.classList.add("continue-link-display")
  }, 3000)
}

</script>
</body>
LacheM
  • 64
  • 2
  • 4