blog posts quick site

data/db.json

@@ -0,0 +1,36 @@
+{
+  "posts": [
+    {
+      "id": 1,
+      "likes": 30,
+      "title": "Welcome to the new blog",
+      "body": "Lorem ninja ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut ninja wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit ninja lobortis nisl ut aliquip ex ea commodo consequat. Duis ninja autem vel eum iriure dolor in hendrerit in vulputate ninja velit esse molestie consequat, vel illum dolore eu feugiat nulla ninja facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam ninja ipsum liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi ninja non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes ninja demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas ninja est etiam processus dynamicus, qui ninja sequitur mutationem consuetudium lectorum. Mirum ninja est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem ninja ipsum modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in ninja futurum."
+    },
+    {
+      "id": 2,
+      "likes": 15,
+      "title": "How to be a Net Ninja",
+      "body": "Lorem ninja ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut ninja wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit ninja lobortis nisl ut aliquip ex ea commodo consequat. Duis ninja autem vel eum iriure dolor in hendrerit in vulputate ninja velit esse molestie consequat, vel illum dolore eu feugiat nulla ninja facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam ninja ipsum liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi ninja non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes ninja demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas ninja est etiam processus dynamicus, qui ninja sequitur mutationem consuetudium lectorum. Mirum ninja est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem ninja ipsum modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in ninja futurum."
+    },
+    {
+      "title": "Mario Kart Live review",
+      "body": "Lorem ninja ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut ninja wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit ninja lobortis nisl ut aliquip ex ea commodo consequat. Duis ninja autem vel eum iriure dolor in hendrerit in vulputate ninja velit esse molestie consequat, vel illum dolore eu feugiat nulla ninja facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam ninja ipsum liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi ninja non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes ninja demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas ninja est etiam processus dynamicus, qui ninja sequitur mutationem consuetudium lectorum. Mirum ninja est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem ninja ipsum modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in ninja futurum.",
+      "likes": 69,
+      "id": 4
+    },
+    {
+      "title": "React is the new success",
+      "body": "Quietly the he and breakfasts. Upper the in boss his invitation exploration, to become or we dins get two with french for value Mr. Up or if believed fly text can long law, box perhaps great human needs been can to the diet, the still was woke has as rhetoric to he tones occasion on multi sides differences refinements. Of expand is or in project fact, least endeavours to affects pointing, encourage however checks, would you maybe he talk step of you positives attention this technology the and found of by those so make can pay later could have yield.\n\nFarther a his one sat of not hide were is to found one them. The is up of hours. I Mr. Of toys the world to the second latest question. And the towards such' large such the fur small or o'clock managers that hero's frequency what slid room, mountains, run now, in blonde me. Impatient proportion the who sinking floundering paper you more may feel a had endeavours so the all has think read pitiful as in pretty part for as yes, achieves set chosen by a he to is the them, we've enough that one. By that to made.",
+      "likes": 0,
+      "id": 5
+    }
+  ],
+  "polls": [
+    {
+      "id": 1,
+      "question": "Do you prefer Vue or React?",
+      "answerA": "Vue",
+      "answerB": "React"
+    }
+  ]
+}

details.html

@@ -11,6 +11,8 @@
     <!-- inject blog details here -->
   </div>
 
+  <button class="delete">delete</button>
+
   <script src="js/details.js"></script>
 </body>
 </html>

index.html

@@ -8,10 +8,14 @@
 <body>
 
   <nav>
-    <h1>All Blogs</h1>
+    <a href="/" class="homepage-link"><h1>All Blogs</h1>
     <a href="/create.html">Add a new blog</a>
   </nav>
 
+  <form class="search">
+    <input type="text" placeholder="search term" name="term">
+  </form>
+
   <div class="blogs">
     <!-- inject blogs here from js -->
   </div>

info.txt

@@ -0,0 +1,3 @@
+npm i -g json-server
+
+json-server --watch data/db.json

js/create.js

@@ -1 +1,24 @@
-// javascript for create.html
+// javascript for create.html
+
+const form = document.querySelector('form');
+
+
+const createPost = async (e) => {
+    e.preventDefault();
+
+    const doc = {
+      title: form.title.value,
+      body: form.body.value,
+      likes: 0,
+    }
+
+    await fetch('http://localhost:3000/posts', {
+      method: 'POST',
+      body: JSON.stringify(doc),
+      headers: { 'Content-Type': 'application/json' }
+    })
+
+    window.location.replace('/');
+  }
+
+  form.addEventListener('submit', createPost);

js/details.js

@@ -1 +1,29 @@
-// javascript for details.html
+// javascript for details.html
+
+const id = new URLSearchParams(window.location.search).get('id');
+const container = document.querySelector('.details');
+const deleteBtn = document.querySelector('.delete');
+
+const renderDetails = async () => {
+  const res = await fetch('http://localhost:3000/posts/' + id);
+  if (!res.ok) {
+    window.location.replace("/");
+  }
+  const post = await res.json();
+
+  const template = `
+    <h1>${post.title}</h1>
+    <p>${post.body}</p>
+  `
+
+  container.innerHTML = template;
+}
+
+deleteBtn.addEventListener('click', async () => {
+  const res = await fetch('http://localhost:3000/posts/' + id, {
+    method: 'DELETE'
+  });
+  window.location.replace("/");
+})
+
+window.addEventListener('DOMContentLoaded', renderDetails);

js/index.js

@@ -1 +1,42 @@
-// javascript for index.html
+// javascript for index.html
+
+
+const container = document.querySelector('.blogs');
+const searchForm = document.querySelector('.search');
+
+const renderPosts = async (term) => {
+    // let uri = 'http://localhost:3000/posts';
+    // let uri = 'http://localhost:3000/posts?_sort=likes';
+    let uri = 'http://localhost:3000/posts?_sort=likes&_order=desc';
+    if (term) {
+        uri += `&q=${term}`
+      }
+
+    const res = await fetch(uri);
+    const posts = await res.json();
+    console.log(posts);
+
+    let template = '';
+    posts.forEach(post => {
+        // `` means template string
+        template += `
+        <div class="post">
+            <h2>${post.title}</h2>
+            <p><small>${post.likes} likes</small></p>
+            <p>${post.body.slice(0, 200)}...</p>
+            <a href="/details.html?id=${post.id}">Read more</a>
+        </div>
+        `
+    });
+
+    container.innerHTML = template;
+
+}
+
+// search
+searchForm.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    renderPosts(searchForm.term.value.trim());
+})
+
+window.addEventListener('DOMContentLoaded', () => renderPosts());

styles.css

@@ -1,14 +1,20 @@
-@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap");
 
 /* base styles */
 body {
   background: #eee;
-  font-family: 'Roboto';
+  font-family: "Roboto";
   color: #444;
   max-width: 960px;
   margin: 100px auto;
   padding: 10px;
 }
+.homepage-link {
+  background: transparent;
+  color: #111;
+  text-transform: uppercase;
+}
+
 nav {
   display: flex;
   justify-content: space-between;
@@ -26,14 +32,32 @@ nav a {
 form {
   max-width: 500px;
 }
-input, textarea {
+input,
+textarea {
   display: block;
   margin: 16px 0;
   padding: 6px 10px;
   width: 100%;
   border: 1px solid #ddd;
-  font-family: 'Roboto';
+  font-family: "Roboto";
 }
 textarea {
-  min-height:200px;
+  min-height: 200px;
+}
+
+/* post list */
+.post {
+  padding: 16px;
+  background: white;
+  border-radius: 10px;
+  margin: 20px 0;
+}
+.post h2 {
+  margin: 0;
+}
+.post p {
+  margin-top: 0;
+}
+.post a {
+  color: #36cca2;
 }