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

		});