├── .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 | Version 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 | Fork on GitHub 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 | 63 | 64 | 65 | 66 | 67 | 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 | --------------------------------------------------------------------------------