JSFiddle - React, Tailwind, and code Playground

by mlattari

HTML

<h5>Pobierz wartość kursu &euro; NBP wg. daty</h5>
<div>
  <div class="left">
    <select class="form" id="kurs_data_dzien" name="kurs_data_dzien">
      <option value="01">01</option>
      <option value="02">02</option>
      <option value="03">03</option>
      <option value="04">04</option>
      <option value="05">05</option>
      <option value="06">06</option>
      <option value="07">07</option>
      <option value="08">08</option>
      <option value="09">09</option>
      <option value="10">10</option>
      <option value="11">11</option>
      <option value="12">12</option>
      <option value="13">13</option>
      <option value="14">14</option>
      <option value="15">15</option>
      <option value="16">16</option>
      <option value="17">17</option>
      <option value="18">18</option>
      <option value="19">19</option>
      <option value="20">20</option>
      <option value="21">21</option>
      <option value="22">22</option>
      <option value="23">23</option>
      <option value="24">24</option>
      <option value="25">25</option>
      <option value="26">26</option>
      <option value="27">27</option>
      <option value="28">28</option>
      <option value="29">29</option>
      <option value="30">30</option>
      <option value="31">31</option>
    </select>
  </div>

  <div class="left center">
    <select class="form" id="kurs_data_miesiac" name="kurs_data_miesiac">
      <option value="01">01</option>
      <option value="02">02</option>
      <option value="03">03</option>
      <option value="04">04</option>
      <option value="05">05</option>
      <option value="06">06</option>
      <option value="07">07</option>
      <option value="08">08</option>
      <option value="09">09</option>
      <option value="10">10</option>
      <option value="11">11</option>
      <option value="12">12</option>
    </select>
  </div>

  <div class="left center">
    <select class="form" id="kurs_data_rok" name="kurs_data_rok">
      <option...

CSS

.center {
  text-align: center;
}

.left {
  float: left;
}

.clearboth {
  clear: both;
}

div.form {
  font-size: 0.9em;
  margin-bottom: 0.7em;
  padding-top: 0.7em;
  padding-bottom: 0.2em;
}

input.form,
textarea.form,
select.form {
  color: #160f08;
  border: 1px solid #ccc;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  font-size: 16px;
  padding: 3px;
  outline: 0;
  -webkit-appearance: none;
}

select.form {
  width: auto;
}

JavaScript

$(document).ready(function() {

  $("#getRate").on("click", function(event) {

    // Download the xml rates file
    var date = $("#kurs_data_rok").val() + '-' + $("#kurs_data_miesiac").val() + '-' + $("#kurs_data_dzien").val();

    $("#kurs-result").html('<img src="./images/site/ajax-loader.gif" width="50" />');
    $("#kurs_euro1").val('');
    $("#kurs_euro2").val('');
    $("#tabela_nbp").val('');

    $.post('./ajax/api_nbp_tab_A_xml.php', {
      'data': date
    }, function(data) {

      $("#kurs-result").html(data);

      var xhttp = new XMLHttpRequest();

      xhttp.onreadystatechange = function() {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
          getRates(xhttp);
        }
      }

      xhttp.open("GET", "xml/" + date + ".xml", true);
      xhttp.send();

    });

    function getRates(xml) {
      var xmlDoc = xml.responseXML;

      var tab = xmlDoc.getElementsByTagName("ExchangeRatesSeries")[0].getElementsByTagName("Rates")[0].getElementsByTagName("Rate")[0].getElementsByTagName("No")[0].childNodes[0].nodeValue;
      var rate = xmlDoc.getElementsByTagName("ExchangeRatesSeries")[0].getElementsByTagName("Rates")[0].getElementsByTagName("Rate")[0].getElementsByTagName("Mid")[0].childNodes[0].nodeValue;

      var point = rate.indexOf(".");
      var rateInt = rate.substr(0, point);
      var rateDec = rate.substr(point + 1);

      $("#kurs_euro1").val(rateInt);
      $("#kurs_euro2").val(rateDec);
      $("#kurs-result").html(tab);
      $("#tabela_nbp").val(tab);

    }

  });

});