Puzzel Vrouwendag deel 2

by bluesweater

HTML

<div class="backgroundImage">
 <div class="crosswordGrid">
  
  <!--Question 1-->
        <input class="crosswordInput" style="position: absolute; left: 250px; top: 90px; border: none; outline: none; text-transform: uppercase; text-align: center;" type="text"> <!--H-->
        
        <input class="crosswordInput" style="position: absolute; left: 250px; top: 115px; border: none; outline: none; text-transform: uppercase; text-align: center;" type="text"><!--I-->
        
        <input class="crosswordInput" style="position: absolute; left: 250px; top: 141px; border: none; outline: none; text-transform: uppercase; text-align: center;" type="text"><!--L-->
        
        <input class="crosswordInput" style="position: absolute; left: 250px; top: 165px; border: none; outline: none; text-transform: uppercase; text-align: center;" type="text"><!--L-->

        <input class="crosswordInput" style="position: absolute; left: 250px; top: 192px; border: none; outline: none; text-transform: uppercase; text-align: center;" type="text"><!--A-->
        
        <input class="crosswordInput" style="position: absolute; left: 250px; top: 217px; border: none; outline: none; text-transform: uppercase; text-align: center;" type="text"><!--R-->
        
        <input class="crosswordInput" style="position: absolute; left: 250px; top: 242px; border: none; outline: none; text-transform: uppercase; text-align: center;" type="text"><!--Y-->
        
        <!-- empty -->
        
        <input class="crosswordInput" style="position: absolute; left: 250px; top: 290px; border: none; outline: none; text-transform: uppercase; text-align: center;" type="text"><!--C-->
        
        <input class="crosswordInput" style="position: absolute; left: 250px; top: 320px; border: none; outline: none; text-transform: uppercase; text-align: center;" type="text"><!--L-->
        
        <input class="crosswordInput" style="position: absolute; left: 250px; top: 343px; border: none; outline: none;...

CSS

.backgroundImage
{
  position: relative;
  width: 688px;
height: 718px;
background: url(https://i.imgur.com/BmA6QNg.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: #680f30;
}

.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: 180px;
  height: 395px;
  top: 246px;
  left: 20px;
  border-radius: 7px;
  color: white;
}

.textbox2
{
  position: absolute;
  overflow: auto;
  width: 295px;
  height: 159px;
  top: 483px;
  left: 365px;
  border-radius: 7px;
  color: white;
}


.button
{
  position: absolute;
overflow: auto;
width: 180px;
height: 62px;
left: 495px;
top: 5px;
background: url(https://i.imgur.com/wUiN3L8.png);
}

#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;
}


/* 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 scrollbar */
/* Customize shape of scrollab */
.textbox2::-webkit-scrollbar {
    width: 8px;
}

/* The area behind scrollbar */
.textbox2::-webkit-scrollbar-track {
    background:...

JavaScript

$( "#crosswordCheck" ).click(function() {
    var answerString = $( ".crosswordInput" ).map(function() {
        return $( this ).val();
    }).get().join( "" ).toLowerCase();
    if ( answerString == "hillaryclintonoprahwinfreyjaneaustenalettajacobsjeannedarcmriecuriqueeneizabthcleoptratalrwifmoalisa" ) {
        $( "#crosswordPrize" ).html( '<span style="font-size: 35px!important;">GEFELICITEERD!</span><br>HIERBIJ EEN DEEL VAN DE CODE<BR><BR><b>Whorunth3world</b><br><br> Het tweede deel vind je in de blog van Dialga.' );
        $( "#crosswordPrizeContainer" ).css( "display", "flex" );
    } else {
        window.alert( "Probeer opnieuw!" );
    }
});