├── .gitignore
├── LICENSE
├── README.md
├── index.html
├── package.json
└── src
├── assets
└── pngwing.com.png
├── data
├── comments.json
├── db.json
├── posts.json
└── users.json
├── js
└── main.js
└── styles
├── main.css
├── reset.css
└── style.css
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | package-lock.json
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2021 Assembler School Of Software Engineering
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | `#html` `#css` `#js` `#dom` `#JSON` `#HTTP` `#API` `#Bootstrap` `#master-in-software-development`
2 |
3 | # Blog with API
4 |
5 |
6 |
7 |
8 |
9 | > In this pill you will put into practice the knowledge learned about making HTTP requests to create a blog consuming the information from a third-party API. You will also learn how to use Bootstrap Framework for the layout.
10 |
11 | ## Index
12 |
13 | - [Requirements](#requirements)
14 | - [Repository](#repository)
15 | - [Technologies used](#technologies-used)
16 | - [Project delivery](#project-delivery)
17 | - [Resources](#resources)
18 |
19 | ## Requirements
20 |
21 | - You must use semantic HTML5 elements for all the contents of the application
22 | - You must use JSON server library to create your own local repository
23 | - You must use fecth to do the requests
24 | - You have to use Bootstrap Framework for the Layout and the styles
25 |
26 |
27 | ## Repository
28 |
29 | First of all you must fork this project into your GitHub account.
30 |
31 | To create a fork on GitHub is as easy as clicking the “fork” button on the repository page.
32 |
33 |
34 |
35 | ## Technologies used
36 |
37 | \* HTML
38 |
39 | \* CSS
40 |
41 | \* JS
42 |
43 | \* Bootstrap
44 |
45 | \* HTTP Requests
46 |
47 | \* JSON
48 |
49 | \* API
50 |
51 | ## Project delivery
52 |
53 | To deliver this project you must follow the steps indicated in the document:
54 |
55 | - [Submitting a solution](https://www.notion.so/Submitting-a-solution-524dab1a71dd4b96903f26385e24cdb6)
56 |
57 | ## Resources
58 |
59 | - [JSON server](https://github.com/typicode/json-server)
60 | - [Official Bootstrap](https://getbootstrap.com/)
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
10 |
11 |
12 | Blog with API
13 |
14 |
15 |
16 |
17 |
23 |
24 |
25 |
26 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
Modal title
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
49 |
50 |
52 |
53 |
54 |
55 |
56 |
57 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
Modal title
72 |
73 |
74 |
75 | ...
76 |
77 |
81 |
82 |
83 |
84 |
85 |
88 |
89 |
90 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "blog-with-api",
3 | "version": "1.0.0",
4 | "description": "`#html` `#css` `#js` `#dom` `#JSON` `#HTTP` `#API` `#Bootstrap` `#master-in-software-development`",
5 | "main": "index.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1",
8 | "server": "json-server --watch ./src/data/db.json",
9 | "start": "concurrently \"npm run json_server\" \"npm run server\" "
10 | },
11 | "repository": {
12 | "type": "git",
13 | "url": "git+https://github.com/victor-gv/blog-with-api.git"
14 | },
15 | "keywords": [],
16 | "author": "",
17 | "license": "ISC",
18 | "bugs": {
19 | "url": "https://github.com/victor-gv/blog-with-api/issues"
20 | },
21 | "homepage": "https://github.com/victor-gv/blog-with-api#readme",
22 | "dependencies": {
23 | "json-server": "^0.17.0"
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/src/assets/pngwing.com.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/victor-gv/blog-with-api/d7cc1fcc24eba68b99f4a9a2de2145ff719248a8/src/assets/pngwing.com.png
--------------------------------------------------------------------------------
/src/data/posts.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "userId": 1,
4 | "id": 1,
5 | "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
6 | "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
7 | },
8 | {
9 | "userId": 1,
10 | "id": 2,
11 | "title": "qui est esse",
12 | "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
13 | },
14 | {
15 | "userId": 1,
16 | "id": 3,
17 | "title": "ea molestias quasi exercitationem repellat qui ipsa sit aut",
18 | "body": "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut"
19 | },
20 | {
21 | "userId": 1,
22 | "id": 4,
23 | "title": "eum et est occaecati",
24 | "body": "ullam et saepe reiciendis voluptatem adipisci\nsit amet autem assumenda provident rerum culpa\nquis hic commodi nesciunt rem tenetur doloremque ipsam iure\nquis sunt voluptatem rerum illo velit"
25 | },
26 | {
27 | "userId": 1,
28 | "id": 5,
29 | "title": "nesciunt quas odio",
30 | "body": "repudiandae veniam quaerat sunt sed\nalias aut fugiat sit autem sed est\nvoluptatem omnis possimus esse voluptatibus quis\nest aut tenetur dolor neque"
31 | },
32 | {
33 | "userId": 1,
34 | "id": 6,
35 | "title": "dolorem eum magni eos aperiam quia",
36 | "body": "ut aspernatur corporis harum nihil quis provident sequi\nmollitia nobis aliquid molestiae\nperspiciatis et ea nemo ab reprehenderit accusantium quas\nvoluptate dolores velit et doloremque molestiae"
37 | },
38 | {
39 | "userId": 1,
40 | "id": 7,
41 | "title": "magnam facilis autem",
42 | "body": "dolore placeat quibusdam ea quo vitae\nmagni quis enim qui quis quo nemo aut saepe\nquidem repellat excepturi ut quia\nsunt ut sequi eos ea sed quas"
43 | },
44 | {
45 | "userId": 1,
46 | "id": 8,
47 | "title": "dolorem dolore est ipsam",
48 | "body": "dignissimos aperiam dolorem qui eum\nfacilis quibusdam animi sint suscipit qui sint possimus cum\nquaerat magni maiores excepturi\nipsam ut commodi dolor voluptatum modi aut vitae"
49 | },
50 | {
51 | "userId": 1,
52 | "id": 9,
53 | "title": "nesciunt iure omnis dolorem tempora et accusantium",
54 | "body": "consectetur animi nesciunt iure dolore\nenim quia ad\nveniam autem ut quam aut nobis\net est aut quod aut provident voluptas autem voluptas"
55 | },
56 | {
57 | "userId": 1,
58 | "id": 10,
59 | "title": "optio molestias id quia eum",
60 | "body": "quo et expedita modi cum officia vel magni\ndoloribus qui repudiandae\nvero nisi sit\nquos veniam quod sed accusamus veritatis error"
61 | },
62 | {
63 | "userId": 2,
64 | "id": 11,
65 | "title": "et ea vero quia laudantium autem",
66 | "body": "delectus reiciendis molestiae occaecati non minima eveniet qui voluptatibus\naccusamus in eum beatae sit\nvel qui neque voluptates ut commodi qui incidunt\nut animi commodi"
67 | },
68 | {
69 | "userId": 2,
70 | "id": 12,
71 | "title": "in quibusdam tempore odit est dolorem",
72 | "body": "itaque id aut magnam\npraesentium quia et ea odit et ea voluptas et\nsapiente quia nihil amet occaecati quia id voluptatem\nincidunt ea est distinctio odio"
73 | },
74 | {
75 | "userId": 2,
76 | "id": 13,
77 | "title": "dolorum ut in voluptas mollitia et saepe quo animi",
78 | "body": "aut dicta possimus sint mollitia voluptas commodi quo doloremque\niste corrupti reiciendis voluptatem eius rerum\nsit cumque quod eligendi laborum minima\nperferendis recusandae assumenda consectetur porro architecto ipsum ipsam"
79 | },
80 | {
81 | "userId": 2,
82 | "id": 14,
83 | "title": "voluptatem eligendi optio",
84 | "body": "fuga et accusamus dolorum perferendis illo voluptas\nnon doloremque neque facere\nad qui dolorum molestiae beatae\nsed aut voluptas totam sit illum"
85 | },
86 | {
87 | "userId": 2,
88 | "id": 15,
89 | "title": "eveniet quod temporibus",
90 | "body": "reprehenderit quos placeat\nvelit minima officia dolores impedit repudiandae molestiae nam\nvoluptas recusandae quis delectus\nofficiis harum fugiat vitae"
91 | },
92 | {
93 | "userId": 2,
94 | "id": 16,
95 | "title": "sint suscipit perspiciatis velit dolorum rerum ipsa laboriosam odio",
96 | "body": "suscipit nam nisi quo aperiam aut\nasperiores eos fugit maiores voluptatibus quia\nvoluptatem quis ullam qui in alias quia est\nconsequatur magni mollitia accusamus ea nisi voluptate dicta"
97 | },
98 | {
99 | "userId": 2,
100 | "id": 17,
101 | "title": "fugit voluptas sed molestias voluptatem provident",
102 | "body": "eos voluptas et aut odit natus earum\naspernatur fuga molestiae ullam\ndeserunt ratione qui eos\nqui nihil ratione nemo velit ut aut id quo"
103 | },
104 | {
105 | "userId": 2,
106 | "id": 18,
107 | "title": "voluptate et itaque vero tempora molestiae",
108 | "body": "eveniet quo quis\nlaborum totam consequatur non dolor\nut et est repudiandae\nest voluptatem vel debitis et magnam"
109 | },
110 | {
111 | "userId": 2,
112 | "id": 19,
113 | "title": "adipisci placeat illum aut reiciendis qui",
114 | "body": "illum quis cupiditate provident sit magnam\nea sed aut omnis\nveniam maiores ullam consequatur atque\nadipisci quo iste expedita sit quos voluptas"
115 | },
116 | {
117 | "userId": 2,
118 | "id": 20,
119 | "title": "doloribus ad provident suscipit at",
120 | "body": "qui consequuntur ducimus possimus quisquam amet similique\nsuscipit porro ipsam amet\neos veritatis officiis exercitationem vel fugit aut necessitatibus totam\nomnis rerum consequatur expedita quidem cumque explicabo"
121 | },
122 | {
123 | "userId": 3,
124 | "id": 21,
125 | "title": "asperiores ea ipsam voluptatibus modi minima quia sint",
126 | "body": "repellat aliquid praesentium dolorem quo\nsed totam minus non itaque\nnihil labore molestiae sunt dolor eveniet hic recusandae veniam\ntempora et tenetur expedita sunt"
127 | },
128 | {
129 | "userId": 3,
130 | "id": 22,
131 | "title": "dolor sint quo a velit explicabo quia nam",
132 | "body": "eos qui et ipsum ipsam suscipit aut\nsed omnis non odio\nexpedita earum mollitia molestiae aut atque rem suscipit\nnam impedit esse"
133 | },
134 | {
135 | "userId": 3,
136 | "id": 23,
137 | "title": "maxime id vitae nihil numquam",
138 | "body": "veritatis unde neque eligendi\nquae quod architecto quo neque vitae\nest illo sit tempora doloremque fugit quod\net et vel beatae sequi ullam sed tenetur perspiciatis"
139 | },
140 | {
141 | "userId": 3,
142 | "id": 24,
143 | "title": "autem hic labore sunt dolores incidunt",
144 | "body": "enim et ex nulla\nomnis voluptas quia qui\nvoluptatem consequatur numquam aliquam sunt\ntotam recusandae id dignissimos aut sed asperiores deserunt"
145 | },
146 | {
147 | "userId": 3,
148 | "id": 25,
149 | "title": "rem alias distinctio quo quis",
150 | "body": "ullam consequatur ut\nomnis quis sit vel consequuntur\nipsa eligendi ipsum molestiae et omnis error nostrum\nmolestiae illo tempore quia et distinctio"
151 | },
152 | {
153 | "userId": 3,
154 | "id": 26,
155 | "title": "est et quae odit qui non",
156 | "body": "similique esse doloribus nihil accusamus\nomnis dolorem fuga consequuntur reprehenderit fugit recusandae temporibus\nperspiciatis cum ut laudantium\nomnis aut molestiae vel vero"
157 | },
158 | {
159 | "userId": 3,
160 | "id": 27,
161 | "title": "quasi id et eos tenetur aut quo autem",
162 | "body": "eum sed dolores ipsam sint possimus debitis occaecati\ndebitis qui qui et\nut placeat enim earum aut odit facilis\nconsequatur suscipit necessitatibus rerum sed inventore temporibus consequatur"
163 | },
164 | {
165 | "userId": 3,
166 | "id": 28,
167 | "title": "delectus ullam et corporis nulla voluptas sequi",
168 | "body": "non et quaerat ex quae ad maiores\nmaiores recusandae totam aut blanditiis mollitia quas illo\nut voluptatibus voluptatem\nsimilique nostrum eum"
169 | },
170 | {
171 | "userId": 3,
172 | "id": 29,
173 | "title": "iusto eius quod necessitatibus culpa ea",
174 | "body": "odit magnam ut saepe sed non qui\ntempora atque nihil\naccusamus illum doloribus illo dolor\neligendi repudiandae odit magni similique sed cum maiores"
175 | },
176 | {
177 | "userId": 3,
178 | "id": 30,
179 | "title": "a quo magni similique perferendis",
180 | "body": "alias dolor cumque\nimpedit blanditiis non eveniet odio maxime\nblanditiis amet eius quis tempora quia autem rem\na provident perspiciatis quia"
181 | },
182 | {
183 | "userId": 4,
184 | "id": 31,
185 | "title": "ullam ut quidem id aut vel consequuntur",
186 | "body": "debitis eius sed quibusdam non quis consectetur vitae\nimpedit ut qui consequatur sed aut in\nquidem sit nostrum et maiores adipisci atque\nquaerat voluptatem adipisci repudiandae"
187 | },
188 | {
189 | "userId": 4,
190 | "id": 32,
191 | "title": "doloremque illum aliquid sunt",
192 | "body": "deserunt eos nobis asperiores et hic\nest debitis repellat molestiae optio\nnihil ratione ut eos beatae quibusdam distinctio maiores\nearum voluptates et aut adipisci ea maiores voluptas maxime"
193 | },
194 | {
195 | "userId": 4,
196 | "id": 33,
197 | "title": "qui explicabo molestiae dolorem",
198 | "body": "rerum ut et numquam laborum odit est sit\nid qui sint in\nquasi tenetur tempore aperiam et quaerat qui in\nrerum officiis sequi cumque quod"
199 | },
200 | {
201 | "userId": 4,
202 | "id": 34,
203 | "title": "magnam ut rerum iure",
204 | "body": "ea velit perferendis earum ut voluptatem voluptate itaque iusto\ntotam pariatur in\nnemo voluptatem voluptatem autem magni tempora minima in\nest distinctio qui assumenda accusamus dignissimos officia nesciunt nobis"
205 | },
206 | {
207 | "userId": 4,
208 | "id": 35,
209 | "title": "id nihil consequatur molestias animi provident",
210 | "body": "nisi error delectus possimus ut eligendi vitae\nplaceat eos harum cupiditate facilis reprehenderit voluptatem beatae\nmodi ducimus quo illum voluptas eligendi\net nobis quia fugit"
211 | },
212 | {
213 | "userId": 4,
214 | "id": 36,
215 | "title": "fuga nam accusamus voluptas reiciendis itaque",
216 | "body": "ad mollitia et omnis minus architecto odit\nvoluptas doloremque maxime aut non ipsa qui alias veniam\nblanditiis culpa aut quia nihil cumque facere et occaecati\nqui aspernatur quia eaque ut aperiam inventore"
217 | },
218 | {
219 | "userId": 4,
220 | "id": 37,
221 | "title": "provident vel ut sit ratione est",
222 | "body": "debitis et eaque non officia sed nesciunt pariatur vel\nvoluptatem iste vero et ea\nnumquam aut expedita ipsum nulla in\nvoluptates omnis consequatur aut enim officiis in quam qui"
223 | },
224 | {
225 | "userId": 4,
226 | "id": 38,
227 | "title": "explicabo et eos deleniti nostrum ab id repellendus",
228 | "body": "animi esse sit aut sit nesciunt assumenda eum voluptas\nquia voluptatibus provident quia necessitatibus ea\nrerum repudiandae quia voluptatem delectus fugit aut id quia\nratione optio eos iusto veniam iure"
229 | },
230 | {
231 | "userId": 4,
232 | "id": 39,
233 | "title": "eos dolorem iste accusantium est eaque quam",
234 | "body": "corporis rerum ducimus vel eum accusantium\nmaxime aspernatur a porro possimus iste omnis\nest in deleniti asperiores fuga aut\nvoluptas sapiente vel dolore minus voluptatem incidunt ex"
235 | },
236 | {
237 | "userId": 4,
238 | "id": 40,
239 | "title": "enim quo cumque",
240 | "body": "ut voluptatum aliquid illo tenetur nemo sequi quo facilis\nipsum rem optio mollitia quas\nvoluptatem eum voluptas qui\nunde omnis voluptatem iure quasi maxime voluptas nam"
241 | },
242 | {
243 | "userId": 5,
244 | "id": 41,
245 | "title": "non est facere",
246 | "body": "molestias id nostrum\nexcepturi molestiae dolore omnis repellendus quaerat saepe\nconsectetur iste quaerat tenetur asperiores accusamus ex ut\nnam quidem est ducimus sunt debitis saepe"
247 | },
248 | {
249 | "userId": 5,
250 | "id": 42,
251 | "title": "commodi ullam sint et excepturi error explicabo praesentium voluptas",
252 | "body": "odio fugit voluptatum ducimus earum autem est incidunt voluptatem\nodit reiciendis aliquam sunt sequi nulla dolorem\nnon facere repellendus voluptates quia\nratione harum vitae ut"
253 | },
254 | {
255 | "userId": 5,
256 | "id": 43,
257 | "title": "eligendi iste nostrum consequuntur adipisci praesentium sit beatae perferendis",
258 | "body": "similique fugit est\nillum et dolorum harum et voluptate eaque quidem\nexercitationem quos nam commodi possimus cum odio nihil nulla\ndolorum exercitationem magnam ex et a et distinctio debitis"
259 | },
260 | {
261 | "userId": 5,
262 | "id": 44,
263 | "title": "optio dolor molestias sit",
264 | "body": "temporibus est consectetur dolore\net libero debitis vel velit laboriosam quia\nipsum quibusdam qui itaque fuga rem aut\nea et iure quam sed maxime ut distinctio quae"
265 | },
266 | {
267 | "userId": 5,
268 | "id": 45,
269 | "title": "ut numquam possimus omnis eius suscipit laudantium iure",
270 | "body": "est natus reiciendis nihil possimus aut provident\nex et dolor\nrepellat pariatur est\nnobis rerum repellendus dolorem autem"
271 | },
272 | {
273 | "userId": 5,
274 | "id": 46,
275 | "title": "aut quo modi neque nostrum ducimus",
276 | "body": "voluptatem quisquam iste\nvoluptatibus natus officiis facilis dolorem\nquis quas ipsam\nvel et voluptatum in aliquid"
277 | },
278 | {
279 | "userId": 5,
280 | "id": 47,
281 | "title": "quibusdam cumque rem aut deserunt",
282 | "body": "voluptatem assumenda ut qui ut cupiditate aut impedit veniam\noccaecati nemo illum voluptatem laudantium\nmolestiae beatae rerum ea iure soluta nostrum\neligendi et voluptate"
283 | },
284 | {
285 | "userId": 5,
286 | "id": 48,
287 | "title": "ut voluptatem illum ea doloribus itaque eos",
288 | "body": "voluptates quo voluptatem facilis iure occaecati\nvel assumenda rerum officia et\nillum perspiciatis ab deleniti\nlaudantium repellat ad ut et autem reprehenderit"
289 | },
290 | {
291 | "userId": 5,
292 | "id": 49,
293 | "title": "laborum non sunt aut ut assumenda perspiciatis voluptas",
294 | "body": "inventore ab sint\nnatus fugit id nulla sequi architecto nihil quaerat\neos tenetur in in eum veritatis non\nquibusdam officiis aspernatur cumque aut commodi aut"
295 | },
296 | {
297 | "userId": 5,
298 | "id": 50,
299 | "title": "repellendus qui recusandae incidunt voluptates tenetur qui omnis exercitationem",
300 | "body": "error suscipit maxime adipisci consequuntur recusandae\nvoluptas eligendi et est et voluptates\nquia distinctio ab amet quaerat molestiae et vitae\nadipisci impedit sequi nesciunt quis consectetur"
301 | },
302 | {
303 | "userId": 6,
304 | "id": 51,
305 | "title": "soluta aliquam aperiam consequatur illo quis voluptas",
306 | "body": "sunt dolores aut doloribus\ndolore doloribus voluptates tempora et\ndoloremque et quo\ncum asperiores sit consectetur dolorem"
307 | },
308 | {
309 | "userId": 6,
310 | "id": 52,
311 | "title": "qui enim et consequuntur quia animi quis voluptate quibusdam",
312 | "body": "iusto est quibusdam fuga quas quaerat molestias\na enim ut sit accusamus enim\ntemporibus iusto accusantium provident architecto\nsoluta esse reprehenderit qui laborum"
313 | },
314 | {
315 | "userId": 6,
316 | "id": 53,
317 | "title": "ut quo aut ducimus alias",
318 | "body": "minima harum praesentium eum rerum illo dolore\nquasi exercitationem rerum nam\nporro quis neque quo\nconsequatur minus dolor quidem veritatis sunt non explicabo similique"
319 | },
320 | {
321 | "userId": 6,
322 | "id": 54,
323 | "title": "sit asperiores ipsam eveniet odio non quia",
324 | "body": "totam corporis dignissimos\nvitae dolorem ut occaecati accusamus\nex velit deserunt\net exercitationem vero incidunt corrupti mollitia"
325 | },
326 | {
327 | "userId": 6,
328 | "id": 55,
329 | "title": "sit vel voluptatem et non libero",
330 | "body": "debitis excepturi ea perferendis harum libero optio\neos accusamus cum fuga ut sapiente repudiandae\net ut incidunt omnis molestiae\nnihil ut eum odit"
331 | },
332 | {
333 | "userId": 6,
334 | "id": 56,
335 | "title": "qui et at rerum necessitatibus",
336 | "body": "aut est omnis dolores\nneque rerum quod ea rerum velit pariatur beatae excepturi\net provident voluptas corrupti\ncorporis harum reprehenderit dolores eligendi"
337 | },
338 | {
339 | "userId": 6,
340 | "id": 57,
341 | "title": "sed ab est est",
342 | "body": "at pariatur consequuntur earum quidem\nquo est laudantium soluta voluptatem\nqui ullam et est\net cum voluptas voluptatum repellat est"
343 | },
344 | {
345 | "userId": 6,
346 | "id": 58,
347 | "title": "voluptatum itaque dolores nisi et quasi",
348 | "body": "veniam voluptatum quae adipisci id\net id quia eos ad et dolorem\naliquam quo nisi sunt eos impedit error\nad similique veniam"
349 | },
350 | {
351 | "userId": 6,
352 | "id": 59,
353 | "title": "qui commodi dolor at maiores et quis id accusantium",
354 | "body": "perspiciatis et quam ea autem temporibus non voluptatibus qui\nbeatae a earum officia nesciunt dolores suscipit voluptas et\nanimi doloribus cum rerum quas et magni\net hic ut ut commodi expedita sunt"
355 | },
356 | {
357 | "userId": 6,
358 | "id": 60,
359 | "title": "consequatur placeat omnis quisquam quia reprehenderit fugit veritatis facere",
360 | "body": "asperiores sunt ab assumenda cumque modi velit\nqui esse omnis\nvoluptate et fuga perferendis voluptas\nillo ratione amet aut et omnis"
361 | },
362 | {
363 | "userId": 7,
364 | "id": 61,
365 | "title": "voluptatem doloribus consectetur est ut ducimus",
366 | "body": "ab nemo optio odio\ndelectus tenetur corporis similique nobis repellendus rerum omnis facilis\nvero blanditiis debitis in nesciunt doloribus dicta dolores\nmagnam minus velit"
367 | },
368 | {
369 | "userId": 7,
370 | "id": 62,
371 | "title": "beatae enim quia vel",
372 | "body": "enim aspernatur illo distinctio quae praesentium\nbeatae alias amet delectus qui voluptate distinctio\nodit sint accusantium autem omnis\nquo molestiae omnis ea eveniet optio"
373 | },
374 | {
375 | "userId": 7,
376 | "id": 63,
377 | "title": "voluptas blanditiis repellendus animi ducimus error sapiente et suscipit",
378 | "body": "enim adipisci aspernatur nemo\nnumquam omnis facere dolorem dolor ex quis temporibus incidunt\nab delectus culpa quo reprehenderit blanditiis asperiores\naccusantium ut quam in voluptatibus voluptas ipsam dicta"
379 | },
380 | {
381 | "userId": 7,
382 | "id": 64,
383 | "title": "et fugit quas eum in in aperiam quod",
384 | "body": "id velit blanditiis\neum ea voluptatem\nmolestiae sint occaecati est eos perspiciatis\nincidunt a error provident eaque aut aut qui"
385 | },
386 | {
387 | "userId": 7,
388 | "id": 65,
389 | "title": "consequatur id enim sunt et et",
390 | "body": "voluptatibus ex esse\nsint explicabo est aliquid cumque adipisci fuga repellat labore\nmolestiae corrupti ex saepe at asperiores et perferendis\nnatus id esse incidunt pariatur"
391 | },
392 | {
393 | "userId": 7,
394 | "id": 66,
395 | "title": "repudiandae ea animi iusto",
396 | "body": "officia veritatis tenetur vero qui itaque\nsint non ratione\nsed et ut asperiores iusto eos molestiae nostrum\nveritatis quibusdam et nemo iusto saepe"
397 | },
398 | {
399 | "userId": 7,
400 | "id": 67,
401 | "title": "aliquid eos sed fuga est maxime repellendus",
402 | "body": "reprehenderit id nostrum\nvoluptas doloremque pariatur sint et accusantium quia quod aspernatur\net fugiat amet\nnon sapiente et consequatur necessitatibus molestiae"
403 | },
404 | {
405 | "userId": 7,
406 | "id": 68,
407 | "title": "odio quis facere architecto reiciendis optio",
408 | "body": "magnam molestiae perferendis quisquam\nqui cum reiciendis\nquaerat animi amet hic inventore\nea quia deleniti quidem saepe porro velit"
409 | },
410 | {
411 | "userId": 7,
412 | "id": 69,
413 | "title": "fugiat quod pariatur odit minima",
414 | "body": "officiis error culpa consequatur modi asperiores et\ndolorum assumenda voluptas et vel qui aut vel rerum\nvoluptatum quisquam perspiciatis quia rerum consequatur totam quas\nsequi commodi repudiandae asperiores et saepe a"
415 | },
416 | {
417 | "userId": 7,
418 | "id": 70,
419 | "title": "voluptatem laborum magni",
420 | "body": "sunt repellendus quae\nest asperiores aut deleniti esse accusamus repellendus quia aut\nquia dolorem unde\neum tempora esse dolore"
421 | },
422 | {
423 | "userId": 8,
424 | "id": 71,
425 | "title": "et iusto veniam et illum aut fuga",
426 | "body": "occaecati a doloribus\niste saepe consectetur placeat eum voluptate dolorem et\nqui quo quia voluptas\nrerum ut id enim velit est perferendis"
427 | },
428 | {
429 | "userId": 8,
430 | "id": 72,
431 | "title": "sint hic doloribus consequatur eos non id",
432 | "body": "quam occaecati qui deleniti consectetur\nconsequatur aut facere quas exercitationem aliquam hic voluptas\nneque id sunt ut aut accusamus\nsunt consectetur expedita inventore velit"
433 | },
434 | {
435 | "userId": 8,
436 | "id": 73,
437 | "title": "consequuntur deleniti eos quia temporibus ab aliquid at",
438 | "body": "voluptatem cumque tenetur consequatur expedita ipsum nemo quia explicabo\naut eum minima consequatur\ntempore cumque quae est et\net in consequuntur voluptatem voluptates aut"
439 | },
440 | {
441 | "userId": 8,
442 | "id": 74,
443 | "title": "enim unde ratione doloribus quas enim ut sit sapiente",
444 | "body": "odit qui et et necessitatibus sint veniam\nmollitia amet doloremque molestiae commodi similique magnam et quam\nblanditiis est itaque\nquo et tenetur ratione occaecati molestiae tempora"
445 | },
446 | {
447 | "userId": 8,
448 | "id": 75,
449 | "title": "dignissimos eum dolor ut enim et delectus in",
450 | "body": "commodi non non omnis et voluptas sit\nautem aut nobis magnam et sapiente voluptatem\net laborum repellat qui delectus facilis temporibus\nrerum amet et nemo voluptate expedita adipisci error dolorem"
451 | },
452 | {
453 | "userId": 8,
454 | "id": 76,
455 | "title": "doloremque officiis ad et non perferendis",
456 | "body": "ut animi facere\ntotam iusto tempore\nmolestiae eum aut et dolorem aperiam\nquaerat recusandae totam odio"
457 | },
458 | {
459 | "userId": 8,
460 | "id": 77,
461 | "title": "necessitatibus quasi exercitationem odio",
462 | "body": "modi ut in nulla repudiandae dolorum nostrum eos\naut consequatur omnis\nut incidunt est omnis iste et quam\nvoluptates sapiente aliquam asperiores nobis amet corrupti repudiandae provident"
463 | },
464 | {
465 | "userId": 8,
466 | "id": 78,
467 | "title": "quam voluptatibus rerum veritatis",
468 | "body": "nobis facilis odit tempore cupiditate quia\nassumenda doloribus rerum qui ea\nillum et qui totam\naut veniam repellendus"
469 | },
470 | {
471 | "userId": 8,
472 | "id": 79,
473 | "title": "pariatur consequatur quia magnam autem omnis non amet",
474 | "body": "libero accusantium et et facere incidunt sit dolorem\nnon excepturi qui quia sed laudantium\nquisquam molestiae ducimus est\nofficiis esse molestiae iste et quos"
475 | },
476 | {
477 | "userId": 8,
478 | "id": 80,
479 | "title": "labore in ex et explicabo corporis aut quas",
480 | "body": "ex quod dolorem ea eum iure qui provident amet\nquia qui facere excepturi et repudiandae\nasperiores molestias provident\nminus incidunt vero fugit rerum sint sunt excepturi provident"
481 | },
482 | {
483 | "userId": 9,
484 | "id": 81,
485 | "title": "tempora rem veritatis voluptas quo dolores vero",
486 | "body": "facere qui nesciunt est voluptatum voluptatem nisi\nsequi eligendi necessitatibus ea at rerum itaque\nharum non ratione velit laboriosam quis consequuntur\nex officiis minima doloremque voluptas ut aut"
487 | },
488 | {
489 | "userId": 9,
490 | "id": 82,
491 | "title": "laudantium voluptate suscipit sunt enim enim",
492 | "body": "ut libero sit aut totam inventore sunt\nporro sint qui sunt molestiae\nconsequatur cupiditate qui iste ducimus adipisci\ndolor enim assumenda soluta laboriosam amet iste delectus hic"
493 | },
494 | {
495 | "userId": 9,
496 | "id": 83,
497 | "title": "odit et voluptates doloribus alias odio et",
498 | "body": "est molestiae facilis quis tempora numquam nihil qui\nvoluptate sapiente consequatur est qui\nnecessitatibus autem aut ipsa aperiam modi dolore numquam\nreprehenderit eius rem quibusdam"
499 | },
500 | {
501 | "userId": 9,
502 | "id": 84,
503 | "title": "optio ipsam molestias necessitatibus occaecati facilis veritatis dolores aut",
504 | "body": "sint molestiae magni a et quos\neaque et quasi\nut rerum debitis similique veniam\nrecusandae dignissimos dolor incidunt consequatur odio"
505 | },
506 | {
507 | "userId": 9,
508 | "id": 85,
509 | "title": "dolore veritatis porro provident adipisci blanditiis et sunt",
510 | "body": "similique sed nisi voluptas iusto omnis\nmollitia et quo\nassumenda suscipit officia magnam sint sed tempora\nenim provident pariatur praesentium atque animi amet ratione"
511 | },
512 | {
513 | "userId": 9,
514 | "id": 86,
515 | "title": "placeat quia et porro iste",
516 | "body": "quasi excepturi consequatur iste autem temporibus sed molestiae beatae\net quaerat et esse ut\nvoluptatem occaecati et vel explicabo autem\nasperiores pariatur deserunt optio"
517 | },
518 | {
519 | "userId": 9,
520 | "id": 87,
521 | "title": "nostrum quis quasi placeat",
522 | "body": "eos et molestiae\nnesciunt ut a\ndolores perspiciatis repellendus repellat aliquid\nmagnam sint rem ipsum est"
523 | },
524 | {
525 | "userId": 9,
526 | "id": 88,
527 | "title": "sapiente omnis fugit eos",
528 | "body": "consequatur omnis est praesentium\nducimus non iste\nneque hic deserunt\nvoluptatibus veniam cum et rerum sed"
529 | },
530 | {
531 | "userId": 9,
532 | "id": 89,
533 | "title": "sint soluta et vel magnam aut ut sed qui",
534 | "body": "repellat aut aperiam totam temporibus autem et\narchitecto magnam ut\nconsequatur qui cupiditate rerum quia soluta dignissimos nihil iure\ntempore quas est"
535 | },
536 | {
537 | "userId": 9,
538 | "id": 90,
539 | "title": "ad iusto omnis odit dolor voluptatibus",
540 | "body": "minus omnis soluta quia\nqui sed adipisci voluptates illum ipsam voluptatem\neligendi officia ut in\neos soluta similique molestias praesentium blanditiis"
541 | },
542 | {
543 | "userId": 10,
544 | "id": 91,
545 | "title": "aut amet sed",
546 | "body": "libero voluptate eveniet aperiam sed\nsunt placeat suscipit molestias\nsimilique fugit nam natus\nexpedita consequatur consequatur dolores quia eos et placeat"
547 | },
548 | {
549 | "userId": 10,
550 | "id": 92,
551 | "title": "ratione ex tenetur perferendis",
552 | "body": "aut et excepturi dicta laudantium sint rerum nihil\nlaudantium et at\na neque minima officia et similique libero et\ncommodi voluptate qui"
553 | },
554 | {
555 | "userId": 10,
556 | "id": 93,
557 | "title": "beatae soluta recusandae",
558 | "body": "dolorem quibusdam ducimus consequuntur dicta aut quo laboriosam\nvoluptatem quis enim recusandae ut sed sunt\nnostrum est odit totam\nsit error sed sunt eveniet provident qui nulla"
559 | },
560 | {
561 | "userId": 10,
562 | "id": 94,
563 | "title": "qui qui voluptates illo iste minima",
564 | "body": "aspernatur expedita soluta quo ab ut similique\nexpedita dolores amet\nsed temporibus distinctio magnam saepe deleniti\nomnis facilis nam ipsum natus sint similique omnis"
565 | },
566 | {
567 | "userId": 10,
568 | "id": 95,
569 | "title": "id minus libero illum nam ad officiis",
570 | "body": "earum voluptatem facere provident blanditiis velit laboriosam\npariatur accusamus odio saepe\ncumque dolor qui a dicta ab doloribus consequatur omnis\ncorporis cupiditate eaque assumenda ad nesciunt"
571 | },
572 | {
573 | "userId": 10,
574 | "id": 96,
575 | "title": "quaerat velit veniam amet cupiditate aut numquam ut sequi",
576 | "body": "in non odio excepturi sint eum\nlabore voluptates vitae quia qui et\ninventore itaque rerum\nveniam non exercitationem delectus aut"
577 | },
578 | {
579 | "userId": 10,
580 | "id": 97,
581 | "title": "quas fugiat ut perspiciatis vero provident",
582 | "body": "eum non blanditiis soluta porro quibusdam voluptas\nvel voluptatem qui placeat dolores qui velit aut\nvel inventore aut cumque culpa explicabo aliquid at\nperspiciatis est et voluptatem dignissimos dolor itaque sit nam"
583 | },
584 | {
585 | "userId": 10,
586 | "id": 98,
587 | "title": "laboriosam dolor voluptates",
588 | "body": "doloremque ex facilis sit sint culpa\nsoluta assumenda eligendi non ut eius\nsequi ducimus vel quasi\nveritatis est dolores"
589 | },
590 | {
591 | "userId": 10,
592 | "id": 99,
593 | "title": "temporibus sit alias delectus eligendi possimus magni",
594 | "body": "quo deleniti praesentium dicta non quod\naut est molestias\nmolestias et officia quis nihil\nitaque dolorem quia"
595 | },
596 | {
597 | "userId": 10,
598 | "id": 100,
599 | "title": "at nam consequatur ea labore ea harum",
600 | "body": "cupiditate quo est a modi nesciunt soluta\nipsa voluptas error itaque dicta in\nautem qui minus magnam et distinctio eum\naccusamus ratione error aut"
601 | }
602 | ]
--------------------------------------------------------------------------------
/src/data/users.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": 1,
4 | "name": "Leanne Graham",
5 | "username": "Bret",
6 | "email": "Sincere@april.biz",
7 | "address": {
8 | "street": "Kulas Light",
9 | "suite": "Apt. 556",
10 | "city": "Gwenborough",
11 | "zipcode": "92998-3874",
12 | "geo": {
13 | "lat": "-37.3159",
14 | "lng": "81.1496"
15 | }
16 | },
17 | "phone": "1-770-736-8031 x56442",
18 | "website": "hildegard.org",
19 | "company": {
20 | "name": "Romaguera-Crona",
21 | "catchPhrase": "Multi-layered client-server neural-net",
22 | "bs": "harness real-time e-markets"
23 | }
24 | },
25 | {
26 | "id": 2,
27 | "name": "Ervin Howell",
28 | "username": "Antonette",
29 | "email": "Shanna@melissa.tv",
30 | "address": {
31 | "street": "Victor Plains",
32 | "suite": "Suite 879",
33 | "city": "Wisokyburgh",
34 | "zipcode": "90566-7771",
35 | "geo": {
36 | "lat": "-43.9509",
37 | "lng": "-34.4618"
38 | }
39 | },
40 | "phone": "010-692-6593 x09125",
41 | "website": "anastasia.net",
42 | "company": {
43 | "name": "Deckow-Crist",
44 | "catchPhrase": "Proactive didactic contingency",
45 | "bs": "synergize scalable supply-chains"
46 | }
47 | },
48 | {
49 | "id": 3,
50 | "name": "Clementine Bauch",
51 | "username": "Samantha",
52 | "email": "Nathan@yesenia.net",
53 | "address": {
54 | "street": "Douglas Extension",
55 | "suite": "Suite 847",
56 | "city": "McKenziehaven",
57 | "zipcode": "59590-4157",
58 | "geo": {
59 | "lat": "-68.6102",
60 | "lng": "-47.0653"
61 | }
62 | },
63 | "phone": "1-463-123-4447",
64 | "website": "ramiro.info",
65 | "company": {
66 | "name": "Romaguera-Jacobson",
67 | "catchPhrase": "Face to face bifurcated interface",
68 | "bs": "e-enable strategic applications"
69 | }
70 | },
71 | {
72 | "id": 4,
73 | "name": "Patricia Lebsack",
74 | "username": "Karianne",
75 | "email": "Julianne.OConner@kory.org",
76 | "address": {
77 | "street": "Hoeger Mall",
78 | "suite": "Apt. 692",
79 | "city": "South Elvis",
80 | "zipcode": "53919-4257",
81 | "geo": {
82 | "lat": "29.4572",
83 | "lng": "-164.2990"
84 | }
85 | },
86 | "phone": "493-170-9623 x156",
87 | "website": "kale.biz",
88 | "company": {
89 | "name": "Robel-Corkery",
90 | "catchPhrase": "Multi-tiered zero tolerance productivity",
91 | "bs": "transition cutting-edge web services"
92 | }
93 | },
94 | {
95 | "id": 5,
96 | "name": "Chelsey Dietrich",
97 | "username": "Kamren",
98 | "email": "Lucio_Hettinger@annie.ca",
99 | "address": {
100 | "street": "Skiles Walks",
101 | "suite": "Suite 351",
102 | "city": "Roscoeview",
103 | "zipcode": "33263",
104 | "geo": {
105 | "lat": "-31.8129",
106 | "lng": "62.5342"
107 | }
108 | },
109 | "phone": "(254)954-1289",
110 | "website": "demarco.info",
111 | "company": {
112 | "name": "Keebler LLC",
113 | "catchPhrase": "User-centric fault-tolerant solution",
114 | "bs": "revolutionize end-to-end systems"
115 | }
116 | },
117 | {
118 | "id": 6,
119 | "name": "Mrs. Dennis Schulist",
120 | "username": "Leopoldo_Corkery",
121 | "email": "Karley_Dach@jasper.info",
122 | "address": {
123 | "street": "Norberto Crossing",
124 | "suite": "Apt. 950",
125 | "city": "South Christy",
126 | "zipcode": "23505-1337",
127 | "geo": {
128 | "lat": "-71.4197",
129 | "lng": "71.7478"
130 | }
131 | },
132 | "phone": "1-477-935-8478 x6430",
133 | "website": "ola.org",
134 | "company": {
135 | "name": "Considine-Lockman",
136 | "catchPhrase": "Synchronised bottom-line interface",
137 | "bs": "e-enable innovative applications"
138 | }
139 | },
140 | {
141 | "id": 7,
142 | "name": "Kurtis Weissnat",
143 | "username": "Elwyn.Skiles",
144 | "email": "Telly.Hoeger@billy.biz",
145 | "address": {
146 | "street": "Rex Trail",
147 | "suite": "Suite 280",
148 | "city": "Howemouth",
149 | "zipcode": "58804-1099",
150 | "geo": {
151 | "lat": "24.8918",
152 | "lng": "21.8984"
153 | }
154 | },
155 | "phone": "210.067.6132",
156 | "website": "elvis.io",
157 | "company": {
158 | "name": "Johns Group",
159 | "catchPhrase": "Configurable multimedia task-force",
160 | "bs": "generate enterprise e-tailers"
161 | }
162 | },
163 | {
164 | "id": 8,
165 | "name": "Nicholas Runolfsdottir V",
166 | "username": "Maxime_Nienow",
167 | "email": "Sherwood@rosamond.me",
168 | "address": {
169 | "street": "Ellsworth Summit",
170 | "suite": "Suite 729",
171 | "city": "Aliyaview",
172 | "zipcode": "45169",
173 | "geo": {
174 | "lat": "-14.3990",
175 | "lng": "-120.7677"
176 | }
177 | },
178 | "phone": "586.493.6943 x140",
179 | "website": "jacynthe.com",
180 | "company": {
181 | "name": "Abernathy Group",
182 | "catchPhrase": "Implemented secondary concept",
183 | "bs": "e-enable extensible e-tailers"
184 | }
185 | },
186 | {
187 | "id": 9,
188 | "name": "Glenna Reichert",
189 | "username": "Delphine",
190 | "email": "Chaim_McDermott@dana.io",
191 | "address": {
192 | "street": "Dayna Park",
193 | "suite": "Suite 449",
194 | "city": "Bartholomebury",
195 | "zipcode": "76495-3109",
196 | "geo": {
197 | "lat": "24.6463",
198 | "lng": "-168.8889"
199 | }
200 | },
201 | "phone": "(775)976-6794 x41206",
202 | "website": "conrad.com",
203 | "company": {
204 | "name": "Yost and Sons",
205 | "catchPhrase": "Switchable contextually-based project",
206 | "bs": "aggregate real-time technologies"
207 | }
208 | },
209 | {
210 | "id": 10,
211 | "name": "Clementina DuBuque",
212 | "username": "Moriah.Stanton",
213 | "email": "Rey.Padberg@karina.biz",
214 | "address": {
215 | "street": "Kattie Turnpike",
216 | "suite": "Suite 198",
217 | "city": "Lebsackbury",
218 | "zipcode": "31428-2261",
219 | "geo": {
220 | "lat": "-38.2386",
221 | "lng": "57.2232"
222 | }
223 | },
224 | "phone": "024-648-3804",
225 | "website": "ambrose.net",
226 | "company": {
227 | "name": "Hoeger LLC",
228 | "catchPhrase": "Centralized empowering task-force",
229 | "bs": "target end-to-end models"
230 | }
231 | }
232 | ]
--------------------------------------------------------------------------------
/src/js/main.js:
--------------------------------------------------------------------------------
1 | //Execute getData on window load
2 | window.onload = () => {
3 | getData();
4 | };
5 | //Global variables stored data from fetch
6 | let usersData;
7 | let postsComments;
8 | let apiImages;
9 | let editBtn;
10 | let modalTitle = document.getElementById("exampleModalLabel");
11 | let modalBody = document.getElementById("bodyContent");
12 | let editTitle = document.getElementById("staticBackdropLabel");
13 | let editBody = document.getElementById("editBodyContent");
14 | let saveChangesBtn = document.getElementById("saveChanges");
15 | let postTitleElement;
16 |
17 |
18 | //Fetch all data from json & pixabay API
19 | function getData() {
20 | let url = "https://jsonplaceholder.typicode.com";
21 | const Comments = fetch(`${url}/comments`);
22 | const Posts = fetch(`${url}/posts`);
23 | const Users = fetch(`${url}/users`);
24 | const Images = fetch(
25 | "https://pixabay.com/api/?key=27437216-9ddae61d97237ec9e5fc37f36&q=nature&image_type=photo&category=nature"
26 | );
27 |
28 | Posts.then((response) => response.json())
29 | .then((data) => {
30 | renderPostTitle(data);
31 | })
32 | .catch((error) => console.error(error));
33 | Comments.then((response) => response.json())
34 | .then((data) => {
35 | getComments(data);
36 | })
37 | .catch((error) => console.error(error));
38 |
39 | Users.then((response) => response.json())
40 | .then((data) => {
41 | getUsers(data);
42 | })
43 | .catch((error) => console.error(error));
44 | Images.then((response) => response.json())
45 | .then((data) => {
46 | getImages(data);
47 | })
48 | .catch((error) => console.error(error));
49 |
50 | }
51 |
52 | //Set data to global Variables
53 | const getUsers = (users) => {
54 | usersData = users;
55 | };
56 | const getComments = (comments) => {
57 | postsComments = comments;
58 | };
59 | const getImages = (images) => {
60 | apiImages = images;
61 | };
62 |
63 | //Render images & post title to the main page
64 | function renderPostTitle(postData) {
65 | const postsTitlesContainer = getElement("postsTitlesContainer");
66 |
67 | //Iterate each post in posts.json
68 | postData.map((post) => {
69 | const postElement = createPostTitleElement(post, postsTitlesContainer);
70 | listElementAddEvent(post, postElement);
71 | });
72 | }
73 |
74 | //Create a div element for each "Post Title" & append it to the section in html
75 | const createPostTitleElement = (post, postsTitlesContainer) => {
76 | let elementContainer = createElement("div");
77 | elementContainer.classList.add("col", "card");
78 | elementContainer.setAttribute("data-id", post.id);
79 | postTitleElement = createElement("div");
80 | let img = createBootstrapImg();
81 | editBtn = createButton("Edit", post.id);
82 | editBtn.setAttribute("data-bs-toggle", "modal");
83 | editBtn.setAttribute("data-bs-target", "#staticBackdrop");
84 |
85 |
86 | let removeBtn = createButton("Remove", post.id);
87 |
88 | postTitleElement.className = "list-group-item";
89 | postTitleElement.setAttribute("data-bs-toggle", "modal");
90 | postTitleElement.setAttribute("data-bs-target", "#exampleModal");
91 | postTitleElement.textContent = post.title;
92 | postsTitlesContainer.append(elementContainer);
93 |
94 | let buttonContainer = createElement("div");
95 | buttonContainer.className = "buttonContainer";
96 |
97 | elementContainer.append(img, postTitleElement, buttonContainer);
98 | buttonContainer.append(editBtn, removeBtn);
99 |
100 | removeBtn.addEventListener("click", deletePost);
101 |
102 | return postTitleElement;
103 | };
104 |
105 |
106 |
107 |
108 | //Create bootstrapImg with each post
109 | const createBootstrapImg = () => {
110 | let i = Math.round(Math.random() * (19 - 1) + 1);
111 | let imgUrl = apiImages.hits[i].webformatURL;
112 | let img = createElement("img");
113 | img.src = `${imgUrl}`;
114 | img.classList = "img-thumbnail";
115 | img.alt = "...";
116 | return img;
117 | };
118 |
119 | //Create delete & remove buttons
120 | const createButton = (element, id) => {
121 | let btn = createElement("button");
122 | btn.textContent = element;
123 | if (element == "Remove") {
124 | btn.classList = `btn btn-danger blog__post__${element}__btn`;
125 | } else {
126 | btn.classList = `btn btn-primary blog__post__${element}__btn`;
127 | }
128 | btn.setAttribute("data-id", id);
129 | btn.dataset.type = element;
130 | return btn;
131 | };
132 |
133 | //Add click event to every post element
134 | const listElementAddEvent = (post, postElement) => {
135 | postElement.addEventListener("click", () => {
136 | setModalTitle(post);
137 | setPostUser(post);
138 | setPostComments(post);
139 | });
140 |
141 | editBtn.addEventListener("click", () => {
142 | setModalTitle(post);
143 | setPostUser(post);
144 | });
145 |
146 | saveChangesBtn.addEventListener("click", () => {
147 | saveChanges(post);
148 | });
149 |
150 | };
151 |
152 |
153 |
154 |
155 | //Set title & body to the modal
156 | const setModalTitle = (post) => {
157 | modalTitle.textContent = post.title;
158 | modalBody.textContent = post.body;
159 | editTitle.textContent = post.title;
160 | editBody.textContent = post.body;
161 | editTitle.setAttribute("data-edit-id", post.id);
162 | editTitle.setAttribute("contenteditable", "true");
163 | editBody.setAttribute("contenteditable", "true");
164 | };
165 |
166 |
167 |
168 |
169 |
170 | //Save changes in edit modal
171 | function saveChanges(post) {
172 |
173 | let element = document.querySelector(`[data-edit-id`);
174 | let identifier = element.getAttribute("data-edit-id");
175 | let title = document.querySelector(`[data-id="${identifier}"]`);
176 | //Loop through all posts to find the post with the same id
177 | Object.entries(post).map(item => {
178 | //Find the post with id = identifier and edit it
179 | if (item[0] == "id" && item[1] == identifier) {
180 | post.title = editTitle.textContent;
181 | post.body = editBody.textContent;
182 | title = title.children[1];
183 | title.textContent = post.title;
184 | }
185 | })
186 |
187 | fetch(`https://jsonplaceholder.typicode.com/posts/${post.id}`, {
188 | method: "PATCH",
189 | headers: {
190 | "Content-type": "application/json; charset=UTF-8",
191 | },
192 | body: JSON.stringify( {title: post.title, body: post.body}),
193 | })
194 | .then((res) => {
195 | res.json();
196 | //console.log(res)
197 | })
198 | .then((data) => {
199 | //console.log(data);
200 | })
201 |
202 |
203 | }
204 |
205 |
206 | //Set user name & email to each post when modal displays
207 | const setPostUser = (post) => {
208 | let userId = post.userId;
209 | let userName = getElement("userName");
210 | let email = createElement("p");
211 | usersData.map((user) => {
212 | if (user.id == userId) {
213 | userName.textContent = user.name;
214 | email.textContent = user.email;
215 | }
216 | });
217 | userName.append(email);
218 | };
219 |
220 | //Set comments to each post when modal displays
221 | const setPostComments = (post) => {
222 | let commentContainer = getElement("commentContainer");
223 | commentContainer.textContent = "";
224 |
225 | postsComments.map((comment) => {
226 | if (comment.postId == post.id) {
227 | let commentWrapper = createCommentWrapper();
228 | let commentName = createCommentItem(comment, "name");
229 | let commentBody = createCommentItem(comment, "body");
230 | let email = createCommentItem(comment, "email");
231 | commentContainer.append(commentWrapper);
232 | commentWrapper.append(commentName, commentBody, email);
233 | }
234 | });
235 | };
236 | //Creates paraghrpah for each comment item "user, comment, email"
237 | const createCommentItem = (comment, key) => {
238 | let item = createElement("p");
239 | item.textContent = comment[key];
240 | item.classList = `comment__${key}`;
241 | return item;
242 | };
243 | //create comment container
244 | const createCommentWrapper = () => {
245 | let commentWrapper = createElement("div");
246 | commentWrapper.className = "commentWrapper";
247 | return commentWrapper;
248 | };
249 | const getElement = (element) => {
250 | return document.getElementById(element);
251 | };
252 |
253 | const createElement = (element) => {
254 | return document.createElement(element);
255 | };
256 |
257 |
258 | function deletePost(e) {
259 |
260 | let postId = e.target.dataset.id;
261 | let postElement = document.querySelector(`[data-id="${postId}"]`);
262 | if (confirm(`Are you sure you want to delete post number ${postId}?`)) {
263 |
264 | postElement.remove();
265 | fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`, {
266 | method: "DELETE",
267 | })
268 | .then((res) => {
269 | res.json();
270 | console.log(res)
271 | })
272 | .then((res) => {
273 | console.log("Post deleted");
274 | })
275 | }
276 |
277 |
278 | }
--------------------------------------------------------------------------------
/src/styles/main.css:
--------------------------------------------------------------------------------
1 |
2 | /*Header*/
3 |
4 | .blog__header__img {
5 | width: 7rem;
6 | height: 7rem;
7 | }
8 |
9 | .navbar {
10 | margin-bottom: 40px;
11 | }
12 |
13 | .navbar-brand {
14 | font-size: 2rem;
15 | font-weight: bold;
16 | }
17 |
18 |
19 | /*Main section*/
20 |
21 | .list-group-item {
22 | border: none;
23 | }
24 |
25 | .list-group-item:hover {
26 | cursor: pointer;
27 | background-color: #f8f9fa;
28 | }
29 |
30 | .modal-body-name {
31 | display: flex;
32 | flex-direction: column;
33 | }
34 |
35 | .accordion-button {
36 | font-weight: bold;
37 | }
38 |
39 |
40 | .blog__postTitle--container {
41 | margin: 0 1rem;
42 | }
43 |
44 | .row {
45 | --bs-gutter-y: 5rem;
46 | }
47 |
48 | .card {
49 | padding: 0;
50 | }
51 |
52 | .commentWrapper {
53 | margin-bottom: 10px;
54 | border-radius: 15px;
55 | background-color: #f8f8f8;
56 | box-shadow: 0px 74px 34.2px 3.8px rgb(0 0 0 / 10%);
57 | padding: 20px 0px 10px 10px;
58 | border: 4px #bcbcbc29;
59 | border-style: double;
60 | }
61 |
62 | .comment__name,
63 | .comment__email {
64 | font-weight: bold;
65 | }
66 |
67 |
68 | /* Buttons */
69 | .buttonContainer {
70 | display: flex;
71 | justify-content: flex-end;
72 | margin: .5rem 0;
73 | }
74 |
75 | .blog__post__remove__btn {
76 | margin-left: .3rem;
77 | }
78 |
79 | .btn-outline-success {
80 | background-color: #fff;
81 | color: #212529;
82 | }
83 |
84 | .btn-outline-success:hover {
85 | background-color: #fff;
86 | color: #212529;
87 | }
88 |
89 |
90 | /* Images */
91 | .img-thumbnail {
92 | padding: 0;
93 | border: none;
94 | width: 100%;
95 | }
96 |
--------------------------------------------------------------------------------
/src/styles/reset.css:
--------------------------------------------------------------------------------
1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
2 |
3 | /* Document
4 | ========================================================================== */
5 |
6 | /**
7 | * 1. Correct the line height in all browsers.
8 | * 2. Prevent adjustments of font size after orientation changes in iOS.
9 | */
10 |
11 | html {
12 | line-height: 1.15;
13 | /* 1 */
14 | -webkit-text-size-adjust: 100%;
15 | /* 2 */
16 | }
17 |
18 | /* Sections
19 | ========================================================================== */
20 |
21 | /**
22 | * Remove the margin in all browsers.
23 | */
24 |
25 | body {
26 | margin: 0;
27 | background: #f6f6f6;
28 |
29 | }
30 |
31 |
32 | /**
33 | * Render the `main` element consistently in IE.
34 | */
35 |
36 | main {
37 | display: block;
38 | }
39 |
40 | /**
41 | * Correct the font size and margin on `h1` elements within `section` and
42 | * `article` contexts in Chrome, Firefox, and Safari.
43 | */
44 |
45 | h1 {
46 | font-size: 2em;
47 | margin: 0.67em 0;
48 | }
49 |
50 | /* Grouping content
51 | ========================================================================== */
52 |
53 | /**
54 | * 1. Add the correct box sizing in Firefox.
55 | * 2. Show the overflow in Edge and IE.
56 | */
57 |
58 | hr {
59 | box-sizing: content-box;
60 | /* 1 */
61 | height: 0;
62 | /* 1 */
63 | overflow: visible;
64 | /* 2 */
65 | }
66 |
67 | /**
68 | * 1. Correct the inheritance and scaling of font size in all browsers.
69 | * 2. Correct the odd `em` font sizing in all browsers.
70 | */
71 |
72 | pre {
73 | font-family: monospace, monospace;
74 | /* 1 */
75 | font-size: 1em;
76 | /* 2 */
77 | }
78 |
79 | /* Text-level semantics
80 | ========================================================================== */
81 |
82 | /**
83 | * Remove the gray background on active links in IE 10.
84 | */
85 |
86 | a {
87 | background-color: transparent;
88 | }
89 |
90 | /**
91 | * 1. Remove the bottom border in Chrome 57-
92 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
93 | */
94 |
95 | abbr[title] {
96 | border-bottom: none;
97 | /* 1 */
98 | text-decoration: underline;
99 | /* 2 */
100 | text-decoration: underline dotted;
101 | /* 2 */
102 | }
103 |
104 | /**
105 | * Add the correct font weight in Chrome, Edge, and Safari.
106 | */
107 |
108 | b,
109 | strong {
110 | font-weight: bolder;
111 | }
112 |
113 | /**
114 | * 1. Correct the inheritance and scaling of font size in all browsers.
115 | * 2. Correct the odd `em` font sizing in all browsers.
116 | */
117 |
118 | code,
119 | kbd,
120 | samp {
121 | font-family: monospace, monospace;
122 | /* 1 */
123 | font-size: 1em;
124 | /* 2 */
125 | }
126 |
127 | /**
128 | * Add the correct font size in all browsers.
129 | */
130 |
131 | small {
132 | font-size: 80%;
133 | }
134 |
135 | /**
136 | * Prevent `sub` and `sup` elements from affecting the line height in
137 | * all browsers.
138 | */
139 |
140 | sub,
141 | sup {
142 | font-size: 75%;
143 | line-height: 0;
144 | position: relative;
145 | vertical-align: baseline;
146 | }
147 |
148 | sub {
149 | bottom: -0.25em;
150 | }
151 |
152 | sup {
153 | top: -0.5em;
154 | }
155 |
156 | /* Embedded content
157 | ========================================================================== */
158 |
159 | /**
160 | * Remove the border on images inside links in IE 10.
161 | */
162 |
163 | img {
164 | border-style: none;
165 | }
166 |
167 | /* Forms
168 | ========================================================================== */
169 |
170 | /**
171 | * 1. Change the font styles in all browsers.
172 | * 2. Remove the margin in Firefox and Safari.
173 | */
174 |
175 | button,
176 | input,
177 | optgroup,
178 | select,
179 | textarea {
180 | font-family: inherit;
181 | /* 1 */
182 | font-size: 100%;
183 | /* 1 */
184 | line-height: 1.15;
185 | /* 1 */
186 | margin: 0;
187 | /* 2 */
188 | }
189 |
190 | /**
191 | * Show the overflow in IE.
192 | * 1. Show the overflow in Edge.
193 | */
194 |
195 | button,
196 | input {
197 | /* 1 */
198 | overflow: visible;
199 | }
200 |
201 | /**
202 | * Remove the inheritance of text transform in Edge, Firefox, and IE.
203 | * 1. Remove the inheritance of text transform in Firefox.
204 | */
205 |
206 | button,
207 | select {
208 | /* 1 */
209 | text-transform: none;
210 | }
211 |
212 | /**
213 | * Correct the inability to style clickable types in iOS and Safari.
214 | */
215 |
216 | button,
217 | [type="button"],
218 | [type="reset"],
219 | [type="submit"] {
220 | -webkit-appearance: button;
221 | }
222 |
223 | /**
224 | * Remove the inner border and padding in Firefox.
225 | */
226 |
227 | button::-moz-focus-inner,
228 | [type="button"]::-moz-focus-inner,
229 | [type="reset"]::-moz-focus-inner,
230 | [type="submit"]::-moz-focus-inner {
231 | border-style: none;
232 | padding: 0;
233 | }
234 |
235 | /**
236 | * Restore the focus styles unset by the previous rule.
237 | */
238 |
239 | button:-moz-focusring,
240 | [type="button"]:-moz-focusring,
241 | [type="reset"]:-moz-focusring,
242 | [type="submit"]:-moz-focusring {
243 | outline: 1px dotted ButtonText;
244 | }
245 |
246 | /**
247 | * Correct the padding in Firefox.
248 | */
249 |
250 | fieldset {
251 | padding: 0.35em 0.75em 0.625em;
252 | }
253 |
254 | /**
255 | * 1. Correct the text wrapping in Edge and IE.
256 | * 2. Correct the color inheritance from `fieldset` elements in IE.
257 | * 3. Remove the padding so developers are not caught out when they zero out
258 | * `fieldset` elements in all browsers.
259 | */
260 |
261 | legend {
262 | box-sizing: border-box;
263 | /* 1 */
264 | color: inherit;
265 | /* 2 */
266 | display: table;
267 | /* 1 */
268 | max-width: 100%;
269 | /* 1 */
270 | padding: 0;
271 | /* 3 */
272 | white-space: normal;
273 | /* 1 */
274 | }
275 |
276 | /**
277 | * Add the correct vertical alignment in Chrome, Firefox, and Opera.
278 | */
279 |
280 | progress {
281 | vertical-align: baseline;
282 | }
283 |
284 | /**
285 | * Remove the default vertical scrollbar in IE 10+.
286 | */
287 |
288 | textarea {
289 | overflow: auto;
290 | }
291 |
292 | /**
293 | * 1. Add the correct box sizing in IE 10.
294 | * 2. Remove the padding in IE 10.
295 | */
296 |
297 | [type="checkbox"],
298 | [type="radio"] {
299 | box-sizing: border-box;
300 | /* 1 */
301 | padding: 0;
302 | /* 2 */
303 | }
304 |
305 | /**
306 | * Correct the cursor style of increment and decrement buttons in Chrome.
307 | */
308 |
309 | [type="number"]::-webkit-inner-spin-button,
310 | [type="number"]::-webkit-outer-spin-button {
311 | height: auto;
312 | }
313 |
314 | /**
315 | * 1. Correct the odd appearance in Chrome and Safari.
316 | * 2. Correct the outline style in Safari.
317 | */
318 |
319 | [type="search"] {
320 | -webkit-appearance: textfield;
321 | /* 1 */
322 | outline-offset: -2px;
323 | /* 2 */
324 | }
325 |
326 | /**
327 | * Remove the inner padding in Chrome and Safari on macOS.
328 | */
329 |
330 | [type="search"]::-webkit-search-decoration {
331 | -webkit-appearance: none;
332 | }
333 |
334 | /**
335 | * 1. Correct the inability to style clickable types in iOS and Safari.
336 | * 2. Change font properties to `inherit` in Safari.
337 | */
338 |
339 | ::-webkit-file-upload-button {
340 | -webkit-appearance: button;
341 | /* 1 */
342 | font: inherit;
343 | /* 2 */
344 | }
345 |
346 | /* Interactive
347 | ========================================================================== */
348 |
349 | /*
350 | * Add the correct display in Edge, IE 10+, and Firefox.
351 | */
352 |
353 | details {
354 | display: block;
355 | }
356 |
357 | /*
358 | * Add the correct display in all browsers.
359 | */
360 |
361 | summary {
362 | display: list-item;
363 | }
364 |
365 | /* Misc
366 | ========================================================================== */
367 |
368 | /**
369 | * Add the correct display in IE 10+.
370 | */
371 |
372 | template {
373 | display: none;
374 | }
375 |
376 | /**
377 | * Add the correct display in IE 10.
378 | */
379 |
380 | [hidden] {
381 | display: none;
382 | }
--------------------------------------------------------------------------------
/src/styles/style.css:
--------------------------------------------------------------------------------
1 | /*RESET*/
2 | @import './reset.css';
3 |
4 |
5 | /* GENERAL STYLES */
6 | @import './main.css';
7 |
8 |
9 |
--------------------------------------------------------------------------------
7 | 
34 |
35 | ## Technologies used
36 |
37 | \* HTML
38 |
39 | \* CSS
40 |
41 | \* JS
42 |
43 | \* Bootstrap
44 |
45 | \* HTTP Requests
46 |
47 | \* JSON
48 |
49 | \* API
50 |
51 | ## Project delivery
52 |
53 | To deliver this project you must follow the steps indicated in the document:
54 |
55 | - [Submitting a solution](https://www.notion.so/Submitting-a-solution-524dab1a71dd4b96903f26385e24cdb6)
56 |
57 | ## Resources
58 |
59 | - [JSON server](https://github.com/typicode/json-server)
60 | - [Official Bootstrap](https://getbootstrap.com/)
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
10 |
11 |
12 |