script.js 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. const urlDefault = 'https://open.er-api.com/v6/latest/USD';
  2. const currencyMain = document.querySelector('#currencyMain');
  3. const currencySecond = document.querySelector('#currencySecond');
  4. const countMain = document.querySelector('#countMain');
  5. const countSecond = document.querySelector('#countSecond');
  6. let arrMain = new Map();
  7. function requestOption (url, currencyMain, currencySecond){
  8. fetch(url)
  9. .then(response => response.json())
  10. .then(data => {
  11. for (const prod in data.rates) {
  12. let listOption = document.createElement('option');
  13. listOption.textContent = prod;
  14. currencyMain.appendChild(listOption);
  15. currencySecond.appendChild(listOption.cloneNode(true));
  16. }
  17. })
  18. .catch(er => console.error(er))
  19. } //отрисовка всех доступных option
  20. function requestValues (url, arr){
  21. fetch(url)
  22. .then(response => response.json())
  23. .then(data => {
  24. for (const prod in data.rates) {
  25. arr.set(prod, data.rates[prod]);
  26. }
  27. })
  28. .catch(er => console.error(er))
  29. } // получение актуально курса по определённой валюте
  30. function calculate (countMain, countSecond, currencyMain, currencySecond, arrMain){
  31. if (currencyMain === currencySecond){
  32. countSecond.value = 'Выберите разные валюты';
  33. }
  34. else if(countMain <= 0){
  35. countSecond.value = 'Введите число больше 0';
  36. }
  37. else {
  38. countSecond.value = +arrMain.get(currencySecond) * +countMain;
  39. }
  40. } // конвертация валют
  41. function eventListener(arrMain){
  42. arrMain.clear();
  43. requestValues(`https://open.er-api.com/v6/latest/${currencyMain.value}`, arrMain);
  44. setTimeout(() => {
  45. calculate(countMain.value, countSecond, currencyMain.value, currencySecond.value, arrMain);
  46. },1000);
  47. } // функция вызова по событию
  48. requestOption(urlDefault, currencyMain, currencySecond);
  49. currencyMain.addEventListener('change', () => eventListener(arrMain));
  50. currencySecond.addEventListener('change', () => eventListener(arrMain));
  51. countMain.addEventListener('change', () => eventListener(arrMain));