From 80dfdb15fcf45551448724de915ce0d048fc7248 Mon Sep 17 00:00:00 2001 From: Eddie P Date: Wed, 10 Feb 2021 16:34:53 -0800 Subject: [PATCH 1/2] blog posts quick site --- data/db.json | 36 ++++++++++++++++++++++++++++++++++++ details.html | 2 ++ index.html | 6 +++++- info.txt | 3 +++ js/create.js | 25 ++++++++++++++++++++++++- js/details.js | 30 +++++++++++++++++++++++++++++- js/index.js | 43 ++++++++++++++++++++++++++++++++++++++++++- styles.css | 34 +++++++++++++++++++++++++++++----- 8 files changed, 170 insertions(+), 9 deletions(-) create mode 100644 data/db.json create mode 100644 info.txt diff --git a/data/db.json b/data/db.json new file mode 100644 index 0000000..ee1d2d2 --- /dev/null +++ b/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" + } + ] +} \ No newline at end of file diff --git a/details.html b/details.html index 3d66857..d3bffa2 100644 --- a/details.html +++ b/details.html @@ -11,6 +11,8 @@ + + \ No newline at end of file diff --git a/index.html b/index.html index 4378457..85a8651 100644 --- a/index.html +++ b/index.html @@ -8,10 +8,14 @@ +
+ +
+
diff --git a/info.txt b/info.txt new file mode 100644 index 0000000..0921858 --- /dev/null +++ b/info.txt @@ -0,0 +1,3 @@ +npm i -g json-server + +json-server --watch data/db.json \ No newline at end of file diff --git a/js/create.js b/js/create.js index 8bbb02f..c3384b1 100644 --- a/js/create.js +++ b/js/create.js @@ -1 +1,24 @@ -// javascript for create.html \ No newline at end of file +// 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 diff --git a/js/details.js b/js/details.js index 8fff1af..926aa2d 100644 --- a/js/details.js +++ b/js/details.js @@ -1 +1,29 @@ -// javascript for details.html \ No newline at end of file +// 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 = ` +

${post.title}

+

${post.body}

+ ` + + 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); diff --git a/js/index.js b/js/index.js index ed1d1eb..4df12cd 100644 --- a/js/index.js +++ b/js/index.js @@ -1 +1,42 @@ -// javascript for index.html \ No newline at end of file +// 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 += ` +
+

${post.title}

+

${post.likes} likes

+

${post.body.slice(0, 200)}...

+ Read more +
+ ` + }); + + 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 diff --git a/styles.css b/styles.css index c174312..a2f8953 100644 --- a/styles.css +++ b/styles.css @@ -1,9 +1,9 @@ -@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; @@ -26,14 +26,38 @@ 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; +} + +.homepage-link { + background: transparent; + color: #111; + text-transform: uppercase; } From 1a565b072654164537f9341d92a1246169651c64 Mon Sep 17 00:00:00 2001 From: Eddie P Date: Wed, 10 Feb 2021 16:37:46 -0800 Subject: [PATCH 2/2] Update styles.css --- styles.css | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/styles.css b/styles.css index a2f8953..fea786a 100644 --- a/styles.css +++ b/styles.css @@ -9,6 +9,12 @@ body { margin: 100px auto; padding: 10px; } +.homepage-link { + background: transparent; + color: #111; + text-transform: uppercase; +} + nav { display: flex; justify-content: space-between; @@ -55,9 +61,3 @@ textarea { .post a { color: #36cca2; } - -.homepage-link { - background: transparent; - color: #111; - text-transform: uppercase; -}