Bereken je sterrenbeeld

<form id="birthstoneForm">

  <label for="month">Kies je geboortemaand:</label>

  <select id="month" required>

    <option value="">Selecteer maand</option>

    <option value="1">Januari</option>

    <option value="2">Februari</option>

    <option value="3">Maart</option>

    <option value="4">April</option>

    <option value="5">Mei</option>

    <option value="6">Juni</option>

    <option value="7">Juli</option>

    <option value="8">Augustus</option>

    <option value="9">September</option>

    <option value="10">Oktober</option>

    <option value="11">November</option>

    <option value="12">December</option>

  </select>

  

  <button type="submit">Ontdek jouw kristal</button>

</form>

<div id="result" style="margin-top:20px; font-weight:bold;"></div>

<script>

document.getElementById('birthstoneForm').addEventListener('submit', function(e) {

  e.preventDefault();

  var month = document.getElementById('month').value;

  var result = '';

  switch(month) {

    case '1': result = 'Januari: Granaat'; break;

    case '2': result = 'Februari: Amethist'; break;

    case '3': result = 'Maart: Aquamarijn'; break;

    case '4': result = 'April: Diamant'; break;

    case '5': result = 'Mei: Smaragd'; break;

    case '6': result = 'Juni: Parel of Maansteen'; break;

    case '7': result = 'Juli: Robijn'; break;

    case '8': result = 'Augustus: Peridoot'; break;

    case '9': result = 'September: Saffier'; break;

    case '10': result = 'Oktober: Opaal of Rozenkwarts'; break;

    case '11': result = 'November: Citrien'; break;

    case '12': result = 'December: Turkoois, Tanzaniet of Zirkoon'; break;

    default: result = 'Selecteer een maand.';

  }

  document.getElementById('result').innerHTML = 'Jouw geboortesteen is: ' + result;

});

</script>