display.html 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <link rel="stylesheet" href="/currency/style">
  6. <title>Lee Morgan</title>
  7. </head>
  8. <body>
  9. <div id="container">
  10. <template id="currency">
  11. <div class="currency">
  12. <h1 class="location"></h1>
  13. <p class="year"></p>
  14. <img class="frontImage">
  15. <img class="backImage">
  16. <p class="comment"></p>
  17. </div>
  18. </template>
  19. </div>
  20. <script>
  21. fetch("/currency/data")
  22. .then(r=>r.json())
  23. .then((response)=>{
  24. let container = document.getElementById("container");
  25. let template = document.getElementById("currency").content.children[0];
  26. for(let i = 0; i < response.length; i++){
  27. let currency = template.cloneNode(true);
  28. currency.querySelector(".location").innerText = response[i].location.toUpperCase();
  29. currency.querySelector(".year").innerText = response[i].year;
  30. currency.querySelector(".frontImage").src = response[i].frontImage;
  31. currency.querySelector(".backImage").src = response[i].backImage;
  32. currency.querySelector(".comment").innerText = response[i].comment;
  33. container.appendChild(currency);
  34. }
  35. })
  36. .catch((err)=>{});
  37. </script>
  38. </body>
  39. </html>