index.html 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Lee Morgan -blog-</title>
  6. <link rel="stylesheet" href="/blog/style">
  7. </head>
  8. <body>
  9. <div id="contents">
  10. <h1 id="title"></h1>
  11. <h3 id="author"></h3>
  12. <h4 id="date"></h4>
  13. <div id="article"></div>
  14. </div>
  15. <script>
  16. let id = window.location.pathname.split("/");
  17. id = id[id.length-1];
  18. fetch(`/blog/json/${id}`)
  19. .then(response => response.json())
  20. .then((response)=>{
  21. let date = new Date(response.date);
  22. dateOptions = {
  23. year: "numeric",
  24. day: "numeric",
  25. month: "long"
  26. }
  27. console.log(response);
  28. document.getElementById("title").innerText = response.title;
  29. document.getElementById('author').innerText = response.writer.name;
  30. document.getElementById("date").innerText = date.toLocaleDateString("en-us", dateOptions);
  31. let container = document.getElementById("article");
  32. let paragraphs = response.article.split("\r\n");
  33. for(let i = 0; i < paragraphs.length; i++){
  34. let p = document.createElement("p");
  35. p.innerText = paragraphs[i];
  36. container.appendChild(p);
  37. }
  38. })
  39. .catch((err)=>{
  40. console.log(err);
  41. });
  42. </script>
  43. </body>
  44. </html>