course.html 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Lee Morgan -course-</title>
  6. <link rel="stylesheet" href="/learn/style">
  7. </head>
  8. <body>
  9. <h1 id="title"></h1>
  10. <div id="lectures" class="cardContainer"></div>
  11. <template id="template">
  12. <a class="card">
  13. <img>
  14. <div>
  15. <h2></h2>
  16. <p></p>
  17. </div>
  18. </a>
  19. </template>
  20. <script>
  21. let id = window.location.href.split("/");
  22. id = id[id.length-1];
  23. fetch(`/learn/lectures/json/${id}`)
  24. .then(response => response.json())
  25. .then((response)=>{
  26. document.getElementById("title").innerText = response.course.title;
  27. let container = document.getElementById("lectures");
  28. let template = document.getElementById("template").content.children[0];
  29. for(let i = 0; i < response.lectures.length; i++){
  30. let card = template.cloneNode(true);
  31. card.href = "/learn/lectures/:id";
  32. card.children[0].src = response.course.thumbNail;
  33. card.children[0].alt = `${response.course.thumbNail} thumbnail`;
  34. card.children[1].children[0].innerText = response.lectures[i].title;
  35. card.children[1].children[1].innerText = response.lectures[i].description;
  36. container.appendChild(card)
  37. }
  38. })
  39. .catch((err)=>{});
  40. </script>
  41. </body>
  42. </html>