Maple Hills Artikel (met hulp van Chatgpt)

by bluesweater

HTML

<div class="container">
  <div class="textvak">
    <center>
      Hallo lieve VP'ers,<br>
      Wij zijn enorm fan van boeken lezen, zoals je (hopelijk) al wist! Afgelopen tijd kwamen we erachter dat we allebei Icrebreaker
      gelezen hebben en toen is Anouk het vervolg gaan lezen. Zodat we allebei een blog konden maken over een boek in de Maple Hills-serie van Hannah Grace.
      Daarnaast mogen wij ook wat leuks weggeven! <br>
      <br>
      Op onze blog staat alle informatie over de boeken én meer. Wij hebben allebei 8 getallen verstopt, deze getallen tel je bij elkaar op.
      Vervolgens vul je het hier rechts onder in en klik je op "check hier", als je het juiste getal hebt ingevuld verschijnt er een code. <br>
      Deze code is te claimen tot en met <b>30 september</b>. 
      <br><br>
      Vragen mag je mailen of hieronder reageren!<br>
      Succes!
      <br>Anouk & Cindy
    </center>
  </div>

  <img src="https://i.imgur.com/GY4LzAH.png" alt="puzzel">
  
  <input type="number" id="userNumber" placeholder="Getal">
  <button id="checkButton">Check hier</button>
  <div id="result"></div>
</div>

CSS

body {
    font-family: Arial, sans-serif;
  }

  .container {
    position: relative;
    width: 688px; /* breedte van je afbeelding */
  }

  .container img {
    width: 100%;
    display: block;
  }

  /* Het tekstvak bovenop de afbeelding */
  .textvak {
    position: absolute;
    width: 620px;
    height: 185px;
    top: 238px;
    left: 25px;
    color: black;
    padding: 5px;
    font-size: 13px;
  }

  /* Inputveld */
  #userNumber {
    position: absolute;
    width: 100px;
    height: 30px;
    top: 466px;
    left: 535px;
    font-size: 16px;
    text-align: center;
  }

  /* Check-knop */
  #checkButton {
    position: absolute;
    width: 120px;
    height: 40px;
    top: 520px;
    left: 530px;
    cursor: pointer;
    border: none;
    border-radius: 6px;
    background-color: #3f476e;
    color: white;
    font-size: 16px;
  }

  /* Resultaat */
  #result {
    position: absolute;
    width: 630px;
    height: 185px;
    top: 240px;
    left: 25px;
    color: #94591b;
    font-size: 18px;
    background: rgba(255, 255, 255, 1);
    font-weight: bold;
    display: none;
    text-align: center;
    align-items: center;      /* verticaal centreren */
    justify-content: center;  /* horizontaal centreren */
  }

JavaScript

// Stel hier het juiste getal in
const correctNumber = 63; 

document.getElementById("checkButton").addEventListener("click", function() {
  const userInput = parseInt(document.getElementById("userNumber").value);

  if (userInput === correctNumber) {
    document.getElementById("result").style.display = "block";
    document.getElementById("result").innerHTML = "🎉 Dit getal klopt! <br> Hierbij de code: <br><br><b>r0z3sjaaaal!</b><br><br>Klik <a href='https://virtualpopstar.com/financial/couponclaim'>HIER</a> om de code te verzilveren! ";
  } else {
    alert("Helaas, probeer het opnieuw!");
  }
});