Halloween puzzel

by bluesweater

HTML

<div class="backgroundImage">
 <div class="crosswordGrid">
  
  <!--HEKSEN-->
        <input class="crosswordInput" style="position: absolute; left: 305px; top: 120px; border: none; outline: none; text-transform: uppercase; text-align: center;" type="text"> <!--H-->
        
        <!--E-->
        
        <input class="crosswordInput" style="position: absolute; left: 305px; top: 181px; border: none; outline: none; text-transform: uppercase; text-align: center;" type="text"><!--K-->
        
        <input class="crosswordInput" style="position: absolute; left: 305px; top: 210px; border: none; outline: none; text-transform: uppercase; text-align: center;" type="text"><!--S-->

        <input class="crosswordInput" style="position: absolute; left: 305px; top: 242px; border: none; outline: none; text-transform: uppercase; text-align: center;" type="text"><!--E-->
        
        <input class="crosswordInput" style="position: absolute; left: 305px; top: 277px; border: none; outline: none; text-transform: uppercase; text-align: center;" type="text"><!--N-->
        
<!-- POMPOEN -->

        <input class="crosswordInput" style="position: absolute; left: 470px; top: 120px; border: none; outline: none; text-transform: uppercase; text-align: center;" type="text"><!--P-->
        
        <!--O-->
        
        <input class="crosswordInput" style="position: absolute; left: 470px; top: 180px; border: none; outline: none; text-transform: uppercase; text-align: center;" type="text"><!--M-->
        
        <input class="crosswordInput" style="position: absolute; left: 470px; top: 210px; border: none; outline: none; text-transform: uppercase; text-align: center;" type="text"><!--P-->
        
        <input class="crosswordInput" style="position: absolute; left: 470px; top: 245px; border: none; outline: none; text-transform: uppercase; text-align: center;" type="text"><!--O-->
        
        <input class="crosswordInput" style="position:...

CSS

.backgroundImage
{
  position: relative;
  width: 688px;
height: 725px;
background: url(https://i.imgur.com/IoYv24p.png);
}

.crosswordGrid
{
  position: absolute;
  overflow: auto;
  width: 688px;
  height: 700px;
  left: 20px;
  top: 10px;
  background: url();
}

.crosswordInput
{
  height: 22px;
  width: 20px;
  z-index:5;
  background: transparent;
  color: #000;
  font-size: 16px;
}

.crossword
{
  display: none;
position: absolute;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
}

.textbox1
{
  position: absolute;
  overflow: auto;
  width: 620px;
  height: 155px;
  top: 566px;
  left: 10px;
  border-radius: 7px;
  color: white;
}

.button
{
  position: absolute;
overflow: auto;
width: 45px;
height: 167px;
left: 641px;
top: 560px;
}

#crosswordCheck
{
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  color: #680f30;
  cursor: pointer;
  background: transparent;
  z-index: 10;
}

#crosswordPrize
{
  color: white;
  text-align: center;
  font-size: 20px;
  text-shadow: 2px 2px 1px #333;
  z-index: 11;
}

#crosswordPrizeContainer {
  position: fixed; /* instead of absolute */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.6);
}


/* How to make custom scrollbar */
/* Customize shape of scrollab */
.textbox1::-webkit-scrollbar {
    width: 8px;
}

/* The area behind scrollbar */
.textbox1::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
}

/* Customize the bar moving inside the tracker */
.textbox1::-webkit-scrollbar-thumb {
    background-color: #fff; 
    border-radius: 5px;
}

/* Scrollbar reacts to hover */
.textbox1::-webkit-scrollbar-thumb:hover {
    background-color: #002834;
}


/* How to make custom...

JavaScript

$( "#crosswordCheck" ).click(function() {
    var answerString = $( ".crosswordInput" ).map(function() {
        return $( this ).val();
    }).get().join( "" ).toUpperCase();
    if ( answerString == "HKSENPMPOENKAARSSCHIKKENVERKLDENSOENSNOPHEFTPINNWBGIEEENGETENAG" ) {
        $( "#crosswordPrize" ).html( '<span style="font-size: 35px!important;">GEFELICITEERD!</span><br>HIERBIJ EEN DEEL VAN DE CODE<BR><BR><b>PuzzelS3tDeel2</b><br><br> Te claimen tot en met zondag 9 november' );
        $( "#crosswordPrizeContainer" ).css( "display", "flex" );
    } else {
        window.alert( "Probeer opnieuw!" );
    }
});