course.html 1.8 KB

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