curensy.html 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. <html lang="en">
  2. <body>
  3. <div>
  4. <span>Из какой валюты:</span>
  5. <select id="rates"></select>
  6. </div>
  7. <div>
  8. <input type="number" id="amount" value="0">
  9. <p></p>
  10. </div>
  11. <div>
  12. <span>В какую валюту:</span>
  13. <select id="rates2"></select>
  14. </div>
  15. <div>
  16. <p>результат</p>
  17. <input type="number" id="result2" value="0">
  18. </div>
  19. <h1 id="result"></h1>
  20. <button value="Refresh Page" onClick='location.href="./index.html"'>Назад на главную</button>
  21. <script>
  22. fetch('https://api.exchangeratesapi.io/latest')
  23. .then(res => res.json())
  24. .then(d => {
  25. console.log(d)
  26. // тут у нас есть данные
  27. //и ниже с ними можно работать
  28. //нигде кроме этой функции (этих фигурных скобок) переменной d нет
  29. d.rates["EUR"] = 1;
  30. console.log(d)
  31. let str = "";
  32. for (let currency in d.rates) {
  33. // console.log(currency, d.rates[currency])
  34. str += `<option value="${d.rates[currency]}">${currency}</option>`
  35. }
  36. rates2.innerHTML = rates.innerHTML = str
  37. })
  38. rates.onchange = rates2.onchange = amount.oninput = () => {
  39. console.log(amount.value, rates.value, rates2.value)
  40. result2.value = result.innerHTML = amount.value / rates.value * rates2.value
  41. }
  42. </script>
  43. </body>
  44. </html>