Advertisement
EntropyStarRover

create topic

Mar 5th, 2021
61
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1.  
  2. import {visualiseComments} from "./submitComment.js"
  3. function createTopic(){
  4.  
  5. let topicNameInput=document.getElementById("topicName");
  6. let usernameInput=document.getElementById("username");
  7. let postTextArea=document.getElementById("postText");
  8.  
  9.  
  10. let cancelBtn=Array.from(document.getElementsByClassName("cancel"))[0];
  11. let postBtn=Array.from(document.getElementsByClassName("public"))[0];
  12.  
  13. let main=document.querySelector("main");
  14.  
  15.  
  16. cancelBtn.addEventListener("click", function(e){
  17. e.preventDefault();
  18. topicNameInput.value="";
  19. usernameInput.value="";
  20. postTextArea.value="";
  21. })
  22.  
  23. postBtn.addEventListener("click", function(e){
  24.  
  25. e.preventDefault();
  26. publishPost();
  27. }
  28. )
  29.  
  30. function publishPost(){
  31. let topic=topicNameInput.value;
  32. let topicContent=postTextArea.value;
  33. let author=usernameInput.value;
  34.  
  35. let newTopic={topic,topicContent,author}
  36.  
  37. let myHeaders = new Headers();
  38. myHeaders.append("Content-Type", "application/json");
  39.  
  40. let raw = JSON.stringify(newTopic);
  41.  
  42. let requestOptions = {
  43. method: 'POST',
  44. headers: myHeaders,
  45. body: raw,
  46. redirect: 'follow'
  47. };
  48.  
  49. fetch("http://localhost:3030/jsonstore/collections/myboard/posts", requestOptions)
  50. .then(response => response.json())
  51. .then(result => visualiseNewTopic(result))
  52. .catch(error => console.log('error', error));
  53. }
  54.  
  55. function visualiseNewTopic(data){
  56. let values=Object.values(data);
  57. console.log(values);
  58.  
  59. let topicContainer=document.createElement("div");
  60. topicContainer.className="topic-container";
  61. topicContainer.id=values[3];
  62. topicContainer.innerHTML=`<div class="topic-container">
  63. <div class="topic-name-wrapper">
  64. <div class="topic-name">
  65. <a href="#" class="normal">
  66. <h2>${values[0]}</h2>
  67. </a>
  68. <div class="columns">
  69. <div>
  70. <p>Date: <time>${new Date().toLocaleDateString()}</time></p>
  71. <div class="nick-name">
  72. <p>Username: <span>${values[2]}</span></p>
  73. </div>
  74. </div>
  75. <div class="subscribers">
  76. <!-- <button class="subscribe">Subscribe</button> -->
  77. <p>Subscribers: <span>456</span></p>
  78. </div>
  79. </div>
  80. </div>
  81. </div>
  82. </div>`
  83. let hLink=topicContainer.querySelector("h2")
  84. hLink.addEventListener("click", ()=>(visualiseComments(topicContainer.id,topicContainer)))
  85. main.appendChild(topicContainer)
  86.  
  87.  
  88.  
  89. }
  90. }
  91.  
  92. createTopic();
  93.  
Advertisement
RAW Paste Data Copied
Advertisement