@import url(https://fonts.googleapis.com/css?family=Berkshire+Swash);

body{
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: arial;
  margin: 0;
  height: 100vh;
  background: linear-gradient(#c9e1e0, #fff) no-repeat;
}
#crackerWrapper{
  cursor: pointer;
  height: 120px;
  width: 586px;
  transform: scaleX(1);
  text-align: center;
}
#message{
  position: absolute;
  width: 100%;
  text-align: center;
  font-family: 'Berkshire Swash', cursive;
  font-size: 30px;
  color: #b81313;
  text-shadow: 3px 3px #fff;
  animation: null;
}
@keyframes title{
  from{
    font-size: 30px;
    transform: translate(0px, 0px);
  }
  to{
    font-size: 80px;
    transform: translate(0px, -250px);
  }
}
#jokeWrap{
  width: 326px;
  height: 100px;
  position: absolute;
  top: 10px;
  left: 130px;
  text-align: center;
  animation: null;
}
@keyframes joke{
  from{
    opacity: 0;
  }
  to{
    opacity: 1;
  }
}
#leftCracker{
  width: 300px;
  height: 120px;
  animation: null;
}
@keyframes left{
  from{
    transform: translate(0px, 0px) rotate(0deg)
  }
  to{
    transform: translate(-140px, 80px) rotate(-30deg)
  }
}


.end{
  position: relative;
  top: -120px;
  left: 0px;
  height: 120px;
  width: 10px;
  border-radius: 50%;
  background-color: #c48300;
}
.handle{
  position: relative;
  top: 0px;
  left: 5px;
  height: 120px;
  width: 50px;
  background-color: #EEAE2D;
}
.handle2{
  position: relative;
  top: -240px;
  left: 55px;
  border-left: 40px solid #EEAE2D;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  height: 70px;
  width: 0;
}
.ring{
  position: relative;
  top: -338px;
  left: 95px;
  height: 76px;
  width: 15px;
  background-color: #244B96;
  border-radius: 3px;
}
.body{
  position: relative;
  top: -435px;
  left: 110px;
  border-right: 20px solid #c48300;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  height: 70px;
  width: 0;
}
.body2{
  position: relative;
  top: -556px;
  left: 130px;
  height: 120px;
  width: 150px;
  background-color: #eda71a;
}
.zigzag{
  position: relative;
  top: -676px;
  left: 260px;
  height: 120px;
  width: 40px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);

}
.zig1{
  height: 30px;
  width: 30px;
  background-color: #eda71a;
  transform: translate(5px, -14px) rotate(45deg);
}
#rightCracker{
  position: relative;
  top: -120px;
  left: 286px;
  width: 300px;
  height: 120px;
  transform: rotate(180deg);
  animation: null;
}
@keyframes right{
  from{
    transform: translate(0px, 0px) rotate(180deg)
  }
  to{
    transform: translate(140px, 80px) rotate(210deg)
  }
}
#rightCracker > .zigzag .zig1{
  height: 30px;
  width: 30px;
  background-color: #eda71a;
  transform: translate(5px, -1px) rotate(45deg);
}

.instructions{
  position: absolute;
  top: calc(50% + 150px);
}

const cracker = document.getElementById("crackerWrapper");
const leftCracker = document.getElementById("leftCracker");
const rightCracker = document.getElementById("rightCracker");
const message = document.getElementById("message");
const jokeWrap = document.getElementById("jokeWrap");
const joke = document.getElementById("joke");
const punchline = document.getElementById("punchline");

let counter = 0
let jokes =[{Q: "What do you call a blind reindeer?" ,A: "No-eye deer."}, {Q: "Why are mummies such big fans of Christmas?" ,A: "Because they enjoy wrapping."}, {Q: "Why did Santa have to go to the hospital?" ,A: "Because of his poor elf."}, {Q: "What do you get when you cross a snowman with a vampire?" ,A: "Frostbite."}, {Q: "Why did no-one bid for Rudolph and Blitzen on eBay?" ,A: "Because they were two deer."}, {Q: "What do you call an old snowman?" ,A: "Water."}, {Q: "What do snowmen have for breakfast?" ,A: "Snowflakes!"}, {Q: "What is white and minty?" ,A: "A polo bear!"}, {Q: "Who is a Christmas tree’s favorite singer?" ,A: "Spruce Springsteen!"}, {Q: "Why don’t penguins fly?" ,A: "Because they’re not tall enough to be pilots!"}]
let num = Math.floor(Math.random() * jokes.length)

cracker.addEventListener('click', () => {
  if(counter < 13){
    counter++
  } else{
    joke.textContent = jokes[num].Q
    punchline.textContent = jokes[num].A
    leftCracker.style.animation = "left 1s forwards"
    rightCracker.style.animation = "right 1s forwards"
    message.style.animation = "title 1s forwards"
    jokeWrap.style.animation = "joke 2s forwards"
    cracker.style.transform = "scaleX(1)"
  }
})

function Loop(){      
  window.requestAnimationFrame(Loop);
  if(counter > 0 && counter < 13){
    cracker.style.transform = `scaleX(${1 + (counter / 100)})`
    counter -= 0.05
  }
}
Loop()