hw07_16 .html 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. <header>
  2. <h1>Multiply table</h1>
  3. </header>
  4. <style>
  5. td {
  6. padding: 5px;
  7. border: 1px solid #999;
  8. border-top-color: rgb(153, 153, 153);
  9. border-top-style: solid;
  10. border-top-width: 1px;
  11. border-right-color: rgb(153, 153, 153);
  12. border-right-style: solid;
  13. border-right-width: 1px;
  14. border-bottom-color: rgb(153, 153, 153);
  15. border-bottom-style: solid;
  16. border-bottom-width: 1px;
  17. border-left-color: rgb(153, 153, 153);
  18. border-left-style: solid;
  19. border-left-width: 1px;
  20. border-image-source: initial;
  21. border-image-slice: initial;
  22. border-image-width: initial;
  23. border-image-outset: initial;
  24. border-image-repeat: initial;
  25. display: table-cell;
  26. vertical-align: inherit;
  27. }
  28. table {
  29. border-collapse: collapse;
  30. text-indent: initial;
  31. border-spacing: 2px;
  32. }
  33. </style>
  34. <body>
  35. <script>
  36. fetch(`https://open.er-api.com/v6/latest/USD`)
  37. .then(response => response.json())
  38. .then(data => {
  39. const name=0;
  40. const value=1;
  41. let str = "<table>";
  42. arr = Object.entries(data.rates);
  43. str += "<tr><td></td>";
  44. for (let i = 0; i < arr.length; i++) {
  45. str += `<td>${arr[i][name]}</td>`;
  46. }
  47. str += "</tr>";
  48. for (let i = 0; i < arr.length; i++) {
  49. str += `<tr><td>${arr[i][name]}</td>`;
  50. currRate1 = arr[i][value];
  51. for (let j = 0; j < arr.length; j++) {
  52. currRate2 = arr[j][value];
  53. crossCurrRate = currRate2 / currRate1;
  54. str += `<td>${crossCurrRate.toFixed(3)}</td>`;
  55. }
  56. str += "</tr>";
  57. }
  58. str += "</table>";
  59. document.write(str);
  60. });
  61. </script>
  62. </body>