From 3ab139f7d9267b03d376b4522f253a7220d31513 Mon Sep 17 00:00:00 2001
From: Shaun <shaun@thenetninja.co.uk>
Date: Thu, 15 Oct 2020 12:16:19 +0100
Subject: [PATCH] starter-iles

---
 data/db.json  | 36 ------------------------------------
 details.html  |  1 -
 index.html    |  6 ------
 js/create.js  | 23 +----------------------
 js/details.js | 29 +----------------------------
 js/index.js   | 38 +-------------------------------------
 styles.css    | 17 -----------------
 7 files changed, 3 insertions(+), 147 deletions(-)
 delete mode 100644 data/db.json

diff --git a/data/db.json b/data/db.json
deleted file mode 100644
index ece6273..0000000
--- a/data/db.json
+++ /dev/null
@@ -1,36 +0,0 @@
-{
-  "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": "New Vue course coming soon!",
-      "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": 20,
-      "id": 3
-    },
-    {
-      "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
-    }
-  ],
-  "polls": [
-    {
-      "id": 1,
-      "question": "Do you prefer Vue or React?",
-      "answerA": "Vue",
-      "answerB": "React"
-    }
-  ]
-}
\ No newline at end of file
diff --git a/details.html b/details.html
index adbddf9..3d66857 100644
--- a/details.html
+++ b/details.html
@@ -10,7 +10,6 @@
   <div class="details">
     <!-- inject blog details here -->
   </div>
-  <button class="delete">delete</button>
 
   <script src="js/details.js"></script>
 </body>
diff --git a/index.html b/index.html
index e2d75a4..4378457 100644
--- a/index.html
+++ b/index.html
@@ -6,18 +6,12 @@
   <title>JSON Server</title>
 </head>
 <body>
-  
-  
 
   <nav>
     <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>
diff --git a/js/create.js b/js/create.js
index 0af846e..8bbb02f 100644
--- a/js/create.js
+++ b/js/create.js
@@ -1,22 +1 @@
-// 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);
\ No newline at end of file
+// javascript for create.html
\ No newline at end of file
diff --git a/js/details.js b/js/details.js
index 46d3aa4..8fff1af 100644
--- a/js/details.js
+++ b/js/details.js
@@ -1,28 +1 @@
-// 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);
\ No newline at end of file
+// javascript for details.html
\ No newline at end of file
diff --git a/js/index.js b/js/index.js
index d8b5a78..ed1d1eb 100644
--- a/js/index.js
+++ b/js/index.js
@@ -1,37 +1 @@
-// javascript for index.html
-const container = document.querySelector('.blogs');
-const searchForm = document.querySelector('.search');
-
-const renderPosts = async (term) => {
-  console.log(term);
-  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 => {
-    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());
\ No newline at end of file
+// javascript for index.html
\ No newline at end of file
diff --git a/styles.css b/styles.css
index c39d574..c174312 100644
--- a/styles.css
+++ b/styles.css
@@ -37,20 +37,3 @@ input, textarea {
 textarea {
   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;
-}