Kruiswoord puzzel

by Mylastwish

HTML

<div class="backgroundImage">
 <div class="crosswordGrid">
  
  <!--Donker-->
        <input class="crosswordInput" style="position: absolute; left: 18px; top: 47px; border: none; outline: none; text-transform: uppercase; text-align: center;" type="text"> <!--D-->

        <input class="crosswordInput" style="position: absolute; left: 51px; top: 47px; border: none; outline: none; text-transform: uppercase; text-align: center;" type="text"> <!--o-->

        <input class="crosswordInput" style="position: absolute; left: 85px; top: 47px; border: none; outline: none; text-transform: uppercase; text-align: center;" type="text"> <!--n-->

        <input class="crosswordInput" style="position: absolute; left: 119px; top: 47px; border: none; outline: none; text-transform: uppercase; text-align: center;" type="text"> <!--k-->

        <input class="crosswordInput" style="position: absolute; left: 152px; top: 47px; border: none; outline: none; text-transform: uppercase; text-align: center;" type="text"> <!--e-->

        <input class="crosswordInput" style="position: absolute; left: 186px; top: 47px; border: none; outline: none; text-transform: uppercase; text-align: center;" type="text"> <!--r-->

<!--rendieren-->

       <!--r-->

        <input class="crosswordInput" style="position: absolute; left: 186px; top: 79px; border: none; outline: none; text-transform: uppercase; text-align: center;" type="text"> <!--e-->

        <input class="crosswordInput" style="position: absolute; left: 186px; top: 111px; border: none; outline: none; text-transform: uppercase; text-align: center;" type="text"> <!--n-->

        <input class="crosswordInput" style="position: absolute; left: 186px; top: 143px; border: none; outline: none; text-transform: uppercase; text-align: center;" type="text"> <!--d-->

         <input class="crosswordInput" style="position: absolute; left: 186px; top: 175px; border: none; outline: none; text-transform: uppercase; text-align:...

CSS

.backgroundImage
{
  position: relative;
  width: 688px;
height: 688px;
background: url(https://i.postimg.cc/Kv5MDkRn/kerstkruiswoord.png);
}

/* Hier aanpassen: afbeeldingslink en afbeeldingsgrootte (width, height) */

.crosswordGrid
{
  position: absolute;
  overflow: auto;
  width: 688px;
  height: 555px;
}

/* Dit gaat over het raster (grid) met de vakjes. AFmetingen aanpassen (widht, height, left, top) */

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

/* Color is de tekst kleur in de vakjes (je kan hier hexcode of zoals zo kleur neerzetten)
Fontsize kan groter/kleiner, maar 16 is inprincipe goed leesbaar. */

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

/* Niks aanpassen! */

.textbox1
{
  position: absolute;
  overflow: auto;
  width: 330px;
  height: 100px;
  top: 580px;
  left: 10px;
  border-radius: 7px;
  color: white;
}

.textbox2
{
  position: absolute;
  overflow: auto;
  width: 330px;
  height: 100px;
  top: 580px;
  left: 360px;
  border-radius: 7px;
  color: white;
}

/* Dit gaat over tekstvak: pas hier afmetingen aan. Kleur kan ook. */

.button
{
  position: absolute;
overflow: auto;
width: 65px;
height: 80px;
left: 568px;
top: 445px;

}

/* Dit gaat over de check: pas hier afmetingen aan! 
HIERONDER HOEFT ER NIKS TE WORDEN AANGEPAST! */

#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:...

JavaScript

$( "#crosswordCheck" ).click(function() {
    var answerString = $( ".crosswordInput" ).map(function() {
        return $( this ).val();
    }).get().join( "" ).toUpperCase();
    if ( answerString == "DONKERENDIERENSATACLAUSLICHTJESHEGINCHKRSTKRANSJEUZALEMKOKJESERSTBOOMDECEMERSNEUWPOPCANYCANE" ) {
        $( "#crosswordPrize" ).html( '<span style="font-size: 35px!important;">GEFELICITEERD!</span><br>Hierbij een code voor 2 leuke setjes<BR><BR><b>D3c3mb3rPuzzelPrij$!</b><br><br> Te claimen tot en met zondag 14 december' );
        $( "#crosswordPrizeContainer" ).css( "display", "flex" );
    } else {
        window.alert( "Probeer opnieuw!" );
    }
});