├── .gitignore ├── index.html ├── javascript.svg ├── main.js ├── package-lock.json ├── package.json ├── public └── vite.svg ├── src └── breakingbad │ └── breakingbad-app.js └── style.css /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite App 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /javascript.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | import './style.css'; 2 | import javascriptLogo from './javascript.svg'; 3 | import { BreakingbadApp } from './src/breakingbad/breakingbad-app'; 4 | 5 | document.querySelector('#app').innerHTML = ` 6 |
7 | 8 | 9 | 10 | 11 | 12 | 13 |

Hello Vite!

14 |
15 | 16 |
17 | 18 |
19 | `; 20 | 21 | const element = document.querySelector('.card'); 22 | 23 | BreakingbadApp( element ); 24 | -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "http-app", 3 | "version": "0.0.0", 4 | "lockfileVersion": 2, 5 | "requires": true, 6 | "packages": { 7 | "": { 8 | "name": "http-app", 9 | "version": "0.0.0", 10 | "devDependencies": { 11 | "vite": "^3.2.3" 12 | } 13 | }, 14 | "node_modules/@esbuild/android-arm": { 15 | "version": "0.15.15", 16 | "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.15.15.tgz", 17 | "integrity": "sha512-JJjZjJi2eBL01QJuWjfCdZxcIgot+VoK6Fq7eKF9w4YHm9hwl7nhBR1o2Wnt/WcANk5l9SkpvrldW1PLuXxcbw==", 18 | "cpu": [ 19 | "arm" 20 | ], 21 | "dev": true, 22 | "optional": true, 23 | "os": [ 24 | "android" 25 | ], 26 | "engines": { 27 | "node": ">=12" 28 | } 29 | }, 30 | "node_modules/@esbuild/linux-loong64": { 31 | "version": "0.15.15", 32 | "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.15.15.tgz", 33 | "integrity": "sha512-lhz6UNPMDXUhtXSulw8XlFAtSYO26WmHQnCi2Lg2p+/TMiJKNLtZCYUxV4wG6rZMzXmr8InGpNwk+DLT2Hm0PA==", 34 | "cpu": [ 35 | "loong64" 36 | ], 37 | "dev": true, 38 | "optional": true, 39 | "os": [ 40 | "linux" 41 | ], 42 | "engines": { 43 | "node": ">=12" 44 | } 45 | }, 46 | "node_modules/esbuild": { 47 | "version": "0.15.15", 48 | "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.15.15.tgz", 49 | "integrity": "sha512-TEw/lwK4Zzld9x3FedV6jy8onOUHqcEX3ADFk4k+gzPUwrxn8nWV62tH0udo8jOtjFodlEfc4ypsqX3e+WWO6w==", 50 | "dev": true, 51 | "hasInstallScript": true, 52 | "bin": { 53 | "esbuild": "bin/esbuild" 54 | }, 55 | "engines": { 56 | "node": ">=12" 57 | }, 58 | "optionalDependencies": { 59 | "@esbuild/android-arm": "0.15.15", 60 | "@esbuild/linux-loong64": "0.15.15", 61 | "esbuild-android-64": "0.15.15", 62 | "esbuild-android-arm64": "0.15.15", 63 | "esbuild-darwin-64": "0.15.15", 64 | "esbuild-darwin-arm64": "0.15.15", 65 | "esbuild-freebsd-64": "0.15.15", 66 | "esbuild-freebsd-arm64": "0.15.15", 67 | "esbuild-linux-32": "0.15.15", 68 | "esbuild-linux-64": "0.15.15", 69 | "esbuild-linux-arm": "0.15.15", 70 | "esbuild-linux-arm64": "0.15.15", 71 | "esbuild-linux-mips64le": "0.15.15", 72 | "esbuild-linux-ppc64le": "0.15.15", 73 | "esbuild-linux-riscv64": "0.15.15", 74 | "esbuild-linux-s390x": "0.15.15", 75 | "esbuild-netbsd-64": "0.15.15", 76 | "esbuild-openbsd-64": "0.15.15", 77 | "esbuild-sunos-64": "0.15.15", 78 | "esbuild-windows-32": "0.15.15", 79 | "esbuild-windows-64": "0.15.15", 80 | "esbuild-windows-arm64": "0.15.15" 81 | } 82 | }, 83 | "node_modules/esbuild-android-64": { 84 | "version": "0.15.15", 85 | "resolved": "https://registry.npmjs.org/esbuild-android-64/-/esbuild-android-64-0.15.15.tgz", 86 | "integrity": "sha512-F+WjjQxO+JQOva3tJWNdVjouFMLK6R6i5gjDvgUthLYJnIZJsp1HlF523k73hELY20WPyEO8xcz7aaYBVkeg5Q==", 87 | "cpu": [ 88 | "x64" 89 | ], 90 | "dev": true, 91 | "optional": true, 92 | "os": [ 93 | "android" 94 | ], 95 | "engines": { 96 | "node": ">=12" 97 | } 98 | }, 99 | "node_modules/esbuild-android-arm64": { 100 | "version": "0.15.15", 101 | "resolved": "https://registry.npmjs.org/esbuild-android-arm64/-/esbuild-android-arm64-0.15.15.tgz", 102 | "integrity": "sha512-attlyhD6Y22jNyQ0fIIQ7mnPvDWKw7k6FKnsXlBvQE6s3z6s6cuEHcSgoirquQc7TmZgVCK5fD/2uxmRN+ZpcQ==", 103 | "cpu": [ 104 | "arm64" 105 | ], 106 | "dev": true, 107 | "optional": true, 108 | "os": [ 109 | "android" 110 | ], 111 | "engines": { 112 | "node": ">=12" 113 | } 114 | }, 115 | "node_modules/esbuild-darwin-64": { 116 | "version": "0.15.15", 117 | "resolved": "https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-0.15.15.tgz", 118 | "integrity": "sha512-ohZtF8W1SHJ4JWldsPVdk8st0r9ExbAOSrBOh5L+Mq47i696GVwv1ab/KlmbUoikSTNoXEhDzVpxUR/WIO19FQ==", 119 | "cpu": [ 120 | "x64" 121 | ], 122 | "dev": true, 123 | "optional": true, 124 | "os": [ 125 | "darwin" 126 | ], 127 | "engines": { 128 | "node": ">=12" 129 | } 130 | }, 131 | "node_modules/esbuild-darwin-arm64": { 132 | "version": "0.15.15", 133 | "resolved": "https://registry.npmjs.org/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.15.15.tgz", 134 | "integrity": "sha512-P8jOZ5zshCNIuGn+9KehKs/cq5uIniC+BeCykvdVhx/rBXSxmtj3CUIKZz4sDCuESMbitK54drf/2QX9QHG5Ag==", 135 | "cpu": [ 136 | "arm64" 137 | ], 138 | "dev": true, 139 | "optional": true, 140 | "os": [ 141 | "darwin" 142 | ], 143 | "engines": { 144 | "node": ">=12" 145 | } 146 | }, 147 | "node_modules/esbuild-freebsd-64": { 148 | "version": "0.15.15", 149 | "resolved": "https://registry.npmjs.org/esbuild-freebsd-64/-/esbuild-freebsd-64-0.15.15.tgz", 150 | "integrity": "sha512-KkTg+AmDXz1IvA9S1gt8dE24C8Thx0X5oM0KGF322DuP+P3evwTL9YyusHAWNsh4qLsR80nvBr/EIYs29VSwuA==", 151 | "cpu": [ 152 | "x64" 153 | ], 154 | "dev": true, 155 | "optional": true, 156 | "os": [ 157 | "freebsd" 158 | ], 159 | "engines": { 160 | "node": ">=12" 161 | } 162 | }, 163 | "node_modules/esbuild-freebsd-arm64": { 164 | "version": "0.15.15", 165 | "resolved": "https://registry.npmjs.org/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.15.15.tgz", 166 | "integrity": "sha512-FUcML0DRsuyqCMfAC+HoeAqvWxMeq0qXvclZZ/lt2kLU6XBnDA5uKTLUd379WYEyVD4KKFctqWd9tTuk8C/96g==", 167 | "cpu": [ 168 | "arm64" 169 | ], 170 | "dev": true, 171 | "optional": true, 172 | "os": [ 173 | "freebsd" 174 | ], 175 | "engines": { 176 | "node": ">=12" 177 | } 178 | }, 179 | "node_modules/esbuild-linux-32": { 180 | "version": "0.15.15", 181 | "resolved": "https://registry.npmjs.org/esbuild-linux-32/-/esbuild-linux-32-0.15.15.tgz", 182 | "integrity": "sha512-q28Qn5pZgHNqug02aTkzw5sW9OklSo96b5nm17Mq0pDXrdTBcQ+M6Q9A1B+dalFeynunwh/pvfrNucjzwDXj+Q==", 183 | "cpu": [ 184 | "ia32" 185 | ], 186 | "dev": true, 187 | "optional": true, 188 | "os": [ 189 | "linux" 190 | ], 191 | "engines": { 192 | "node": ">=12" 193 | } 194 | }, 195 | "node_modules/esbuild-linux-64": { 196 | "version": "0.15.15", 197 | "resolved": "https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.15.15.tgz", 198 | "integrity": "sha512-217KPmWMirkf8liO+fj2qrPwbIbhNTGNVtvqI1TnOWJgcMjUWvd677Gq3fTzXEjilkx2yWypVnTswM2KbXgoAg==", 199 | "cpu": [ 200 | "x64" 201 | ], 202 | "dev": true, 203 | "optional": true, 204 | "os": [ 205 | "linux" 206 | ], 207 | "engines": { 208 | "node": ">=12" 209 | } 210 | }, 211 | "node_modules/esbuild-linux-arm": { 212 | "version": "0.15.15", 213 | "resolved": "https://registry.npmjs.org/esbuild-linux-arm/-/esbuild-linux-arm-0.15.15.tgz", 214 | "integrity": "sha512-RYVW9o2yN8yM7SB1yaWr378CwrjvGCyGybX3SdzPHpikUHkME2AP55Ma20uNwkNyY2eSYFX9D55kDrfQmQBR4w==", 215 | "cpu": [ 216 | "arm" 217 | ], 218 | "dev": true, 219 | "optional": true, 220 | "os": [ 221 | "linux" 222 | ], 223 | "engines": { 224 | "node": ">=12" 225 | } 226 | }, 227 | "node_modules/esbuild-linux-arm64": { 228 | "version": "0.15.15", 229 | "resolved": "https://registry.npmjs.org/esbuild-linux-arm64/-/esbuild-linux-arm64-0.15.15.tgz", 230 | "integrity": "sha512-/ltmNFs0FivZkYsTzAsXIfLQX38lFnwJTWCJts0IbCqWZQe+jjj0vYBNbI0kmXLb3y5NljiM5USVAO1NVkdh2g==", 231 | "cpu": [ 232 | "arm64" 233 | ], 234 | "dev": true, 235 | "optional": true, 236 | "os": [ 237 | "linux" 238 | ], 239 | "engines": { 240 | "node": ">=12" 241 | } 242 | }, 243 | "node_modules/esbuild-linux-mips64le": { 244 | "version": "0.15.15", 245 | "resolved": "https://registry.npmjs.org/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.15.15.tgz", 246 | "integrity": "sha512-PksEPb321/28GFFxtvL33yVPfnMZihxkEv5zME2zapXGp7fA1X2jYeiTUK+9tJ/EGgcNWuwvtawPxJG7Mmn86A==", 247 | "cpu": [ 248 | "mips64el" 249 | ], 250 | "dev": true, 251 | "optional": true, 252 | "os": [ 253 | "linux" 254 | ], 255 | "engines": { 256 | "node": ">=12" 257 | } 258 | }, 259 | "node_modules/esbuild-linux-ppc64le": { 260 | "version": "0.15.15", 261 | "resolved": "https://registry.npmjs.org/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.15.15.tgz", 262 | "integrity": "sha512-ek8gJBEIhcpGI327eAZigBOHl58QqrJrYYIZBWQCnH3UnXoeWMrMZLeeZL8BI2XMBhP+sQ6ERctD5X+ajL/AIA==", 263 | "cpu": [ 264 | "ppc64" 265 | ], 266 | "dev": true, 267 | "optional": true, 268 | "os": [ 269 | "linux" 270 | ], 271 | "engines": { 272 | "node": ">=12" 273 | } 274 | }, 275 | "node_modules/esbuild-linux-riscv64": { 276 | "version": "0.15.15", 277 | "resolved": "https://registry.npmjs.org/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.15.15.tgz", 278 | "integrity": "sha512-H5ilTZb33/GnUBrZMNJtBk7/OXzDHDXjIzoLXHSutwwsLxSNaLxzAaMoDGDd/keZoS+GDBqNVxdCkpuiRW4OSw==", 279 | "cpu": [ 280 | "riscv64" 281 | ], 282 | "dev": true, 283 | "optional": true, 284 | "os": [ 285 | "linux" 286 | ], 287 | "engines": { 288 | "node": ">=12" 289 | } 290 | }, 291 | "node_modules/esbuild-linux-s390x": { 292 | "version": "0.15.15", 293 | "resolved": "https://registry.npmjs.org/esbuild-linux-s390x/-/esbuild-linux-s390x-0.15.15.tgz", 294 | "integrity": "sha512-jKaLUg78mua3rrtrkpv4Or2dNTJU7bgHN4bEjT4OX4GR7nLBSA9dfJezQouTxMmIW7opwEC5/iR9mpC18utnxQ==", 295 | "cpu": [ 296 | "s390x" 297 | ], 298 | "dev": true, 299 | "optional": true, 300 | "os": [ 301 | "linux" 302 | ], 303 | "engines": { 304 | "node": ">=12" 305 | } 306 | }, 307 | "node_modules/esbuild-netbsd-64": { 308 | "version": "0.15.15", 309 | "resolved": "https://registry.npmjs.org/esbuild-netbsd-64/-/esbuild-netbsd-64-0.15.15.tgz", 310 | "integrity": "sha512-aOvmF/UkjFuW6F36HbIlImJTTx45KUCHJndtKo+KdP8Dhq3mgLRKW9+6Ircpm8bX/RcS3zZMMmaBLkvGY06Gvw==", 311 | "cpu": [ 312 | "x64" 313 | ], 314 | "dev": true, 315 | "optional": true, 316 | "os": [ 317 | "netbsd" 318 | ], 319 | "engines": { 320 | "node": ">=12" 321 | } 322 | }, 323 | "node_modules/esbuild-openbsd-64": { 324 | "version": "0.15.15", 325 | "resolved": "https://registry.npmjs.org/esbuild-openbsd-64/-/esbuild-openbsd-64-0.15.15.tgz", 326 | "integrity": "sha512-HFFX+WYedx1w2yJ1VyR1Dfo8zyYGQZf1cA69bLdrHzu9svj6KH6ZLK0k3A1/LFPhcEY9idSOhsB2UyU0tHPxgQ==", 327 | "cpu": [ 328 | "x64" 329 | ], 330 | "dev": true, 331 | "optional": true, 332 | "os": [ 333 | "openbsd" 334 | ], 335 | "engines": { 336 | "node": ">=12" 337 | } 338 | }, 339 | "node_modules/esbuild-sunos-64": { 340 | "version": "0.15.15", 341 | "resolved": "https://registry.npmjs.org/esbuild-sunos-64/-/esbuild-sunos-64-0.15.15.tgz", 342 | "integrity": "sha512-jOPBudffG4HN8yJXcK9rib/ZTFoTA5pvIKbRrt3IKAGMq1EpBi4xoVoSRrq/0d4OgZLaQbmkHp8RO9eZIn5atA==", 343 | "cpu": [ 344 | "x64" 345 | ], 346 | "dev": true, 347 | "optional": true, 348 | "os": [ 349 | "sunos" 350 | ], 351 | "engines": { 352 | "node": ">=12" 353 | } 354 | }, 355 | "node_modules/esbuild-windows-32": { 356 | "version": "0.15.15", 357 | "resolved": "https://registry.npmjs.org/esbuild-windows-32/-/esbuild-windows-32-0.15.15.tgz", 358 | "integrity": "sha512-MDkJ3QkjnCetKF0fKxCyYNBnOq6dmidcwstBVeMtXSgGYTy8XSwBeIE4+HuKiSsG6I/mXEb++px3IGSmTN0XiA==", 359 | "cpu": [ 360 | "ia32" 361 | ], 362 | "dev": true, 363 | "optional": true, 364 | "os": [ 365 | "win32" 366 | ], 367 | "engines": { 368 | "node": ">=12" 369 | } 370 | }, 371 | "node_modules/esbuild-windows-64": { 372 | "version": "0.15.15", 373 | "resolved": "https://registry.npmjs.org/esbuild-windows-64/-/esbuild-windows-64-0.15.15.tgz", 374 | "integrity": "sha512-xaAUIB2qllE888SsMU3j9nrqyLbkqqkpQyWVkfwSil6BBPgcPk3zOFitTTncEKCLTQy3XV9RuH7PDj3aJDljWA==", 375 | "cpu": [ 376 | "x64" 377 | ], 378 | "dev": true, 379 | "optional": true, 380 | "os": [ 381 | "win32" 382 | ], 383 | "engines": { 384 | "node": ">=12" 385 | } 386 | }, 387 | "node_modules/esbuild-windows-arm64": { 388 | "version": "0.15.15", 389 | "resolved": "https://registry.npmjs.org/esbuild-windows-arm64/-/esbuild-windows-arm64-0.15.15.tgz", 390 | "integrity": "sha512-ttuoCYCIJAFx4UUKKWYnFdrVpoXa3+3WWkXVI6s09U+YjhnyM5h96ewTq/WgQj9LFSIlABQvadHSOQyAVjW5xQ==", 391 | "cpu": [ 392 | "arm64" 393 | ], 394 | "dev": true, 395 | "optional": true, 396 | "os": [ 397 | "win32" 398 | ], 399 | "engines": { 400 | "node": ">=12" 401 | } 402 | }, 403 | "node_modules/fsevents": { 404 | "version": "2.3.2", 405 | "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", 406 | "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", 407 | "dev": true, 408 | "hasInstallScript": true, 409 | "optional": true, 410 | "os": [ 411 | "darwin" 412 | ], 413 | "engines": { 414 | "node": "^8.16.0 || ^10.6.0 || >=11.0.0" 415 | } 416 | }, 417 | "node_modules/function-bind": { 418 | "version": "1.1.1", 419 | "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", 420 | "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==", 421 | "dev": true 422 | }, 423 | "node_modules/has": { 424 | "version": "1.0.3", 425 | "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", 426 | "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==", 427 | "dev": true, 428 | "dependencies": { 429 | "function-bind": "^1.1.1" 430 | }, 431 | "engines": { 432 | "node": ">= 0.4.0" 433 | } 434 | }, 435 | "node_modules/is-core-module": { 436 | "version": "2.11.0", 437 | "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.11.0.tgz", 438 | "integrity": "sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==", 439 | "dev": true, 440 | "dependencies": { 441 | "has": "^1.0.3" 442 | }, 443 | "funding": { 444 | "url": "https://github.com/sponsors/ljharb" 445 | } 446 | }, 447 | "node_modules/nanoid": { 448 | "version": "3.3.4", 449 | "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz", 450 | "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==", 451 | "dev": true, 452 | "bin": { 453 | "nanoid": "bin/nanoid.cjs" 454 | }, 455 | "engines": { 456 | "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" 457 | } 458 | }, 459 | "node_modules/path-parse": { 460 | "version": "1.0.7", 461 | "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", 462 | "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==", 463 | "dev": true 464 | }, 465 | "node_modules/picocolors": { 466 | "version": "1.0.0", 467 | "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", 468 | "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==", 469 | "dev": true 470 | }, 471 | "node_modules/postcss": { 472 | "version": "8.4.19", 473 | "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.19.tgz", 474 | "integrity": "sha512-h+pbPsyhlYj6N2ozBmHhHrs9DzGmbaarbLvWipMRO7RLS+v4onj26MPFXA5OBYFxyqYhUJK456SwDcY9H2/zsA==", 475 | "dev": true, 476 | "funding": [ 477 | { 478 | "type": "opencollective", 479 | "url": "https://opencollective.com/postcss/" 480 | }, 481 | { 482 | "type": "tidelift", 483 | "url": "https://tidelift.com/funding/github/npm/postcss" 484 | } 485 | ], 486 | "dependencies": { 487 | "nanoid": "^3.3.4", 488 | "picocolors": "^1.0.0", 489 | "source-map-js": "^1.0.2" 490 | }, 491 | "engines": { 492 | "node": "^10 || ^12 || >=14" 493 | } 494 | }, 495 | "node_modules/resolve": { 496 | "version": "1.22.1", 497 | "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz", 498 | "integrity": "sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==", 499 | "dev": true, 500 | "dependencies": { 501 | "is-core-module": "^2.9.0", 502 | "path-parse": "^1.0.7", 503 | "supports-preserve-symlinks-flag": "^1.0.0" 504 | }, 505 | "bin": { 506 | "resolve": "bin/resolve" 507 | }, 508 | "funding": { 509 | "url": "https://github.com/sponsors/ljharb" 510 | } 511 | }, 512 | "node_modules/rollup": { 513 | "version": "2.79.1", 514 | "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz", 515 | "integrity": "sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==", 516 | "dev": true, 517 | "bin": { 518 | "rollup": "dist/bin/rollup" 519 | }, 520 | "engines": { 521 | "node": ">=10.0.0" 522 | }, 523 | "optionalDependencies": { 524 | "fsevents": "~2.3.2" 525 | } 526 | }, 527 | "node_modules/source-map-js": { 528 | "version": "1.0.2", 529 | "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", 530 | "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", 531 | "dev": true, 532 | "engines": { 533 | "node": ">=0.10.0" 534 | } 535 | }, 536 | "node_modules/supports-preserve-symlinks-flag": { 537 | "version": "1.0.0", 538 | "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", 539 | "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==", 540 | "dev": true, 541 | "engines": { 542 | "node": ">= 0.4" 543 | }, 544 | "funding": { 545 | "url": "https://github.com/sponsors/ljharb" 546 | } 547 | }, 548 | "node_modules/vite": { 549 | "version": "3.2.4", 550 | "resolved": "https://registry.npmjs.org/vite/-/vite-3.2.4.tgz", 551 | "integrity": "sha512-Z2X6SRAffOUYTa+sLy3NQ7nlHFU100xwanq1WDwqaiFiCe+25zdxP1TfCS5ojPV2oDDcXudHIoPnI1Z/66B7Yw==", 552 | "dev": true, 553 | "dependencies": { 554 | "esbuild": "^0.15.9", 555 | "postcss": "^8.4.18", 556 | "resolve": "^1.22.1", 557 | "rollup": "^2.79.1" 558 | }, 559 | "bin": { 560 | "vite": "bin/vite.js" 561 | }, 562 | "engines": { 563 | "node": "^14.18.0 || >=16.0.0" 564 | }, 565 | "optionalDependencies": { 566 | "fsevents": "~2.3.2" 567 | }, 568 | "peerDependencies": { 569 | "@types/node": ">= 14", 570 | "less": "*", 571 | "sass": "*", 572 | "stylus": "*", 573 | "sugarss": "*", 574 | "terser": "^5.4.0" 575 | }, 576 | "peerDependenciesMeta": { 577 | "@types/node": { 578 | "optional": true 579 | }, 580 | "less": { 581 | "optional": true 582 | }, 583 | "sass": { 584 | "optional": true 585 | }, 586 | "stylus": { 587 | "optional": true 588 | }, 589 | "sugarss": { 590 | "optional": true 591 | }, 592 | "terser": { 593 | "optional": true 594 | } 595 | } 596 | } 597 | }, 598 | "dependencies": { 599 | "@esbuild/android-arm": { 600 | "version": "0.15.15", 601 | "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.15.15.tgz", 602 | "integrity": "sha512-JJjZjJi2eBL01QJuWjfCdZxcIgot+VoK6Fq7eKF9w4YHm9hwl7nhBR1o2Wnt/WcANk5l9SkpvrldW1PLuXxcbw==", 603 | "dev": true, 604 | "optional": true 605 | }, 606 | "@esbuild/linux-loong64": { 607 | "version": "0.15.15", 608 | "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.15.15.tgz", 609 | "integrity": "sha512-lhz6UNPMDXUhtXSulw8XlFAtSYO26WmHQnCi2Lg2p+/TMiJKNLtZCYUxV4wG6rZMzXmr8InGpNwk+DLT2Hm0PA==", 610 | "dev": true, 611 | "optional": true 612 | }, 613 | "esbuild": { 614 | "version": "0.15.15", 615 | "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.15.15.tgz", 616 | "integrity": "sha512-TEw/lwK4Zzld9x3FedV6jy8onOUHqcEX3ADFk4k+gzPUwrxn8nWV62tH0udo8jOtjFodlEfc4ypsqX3e+WWO6w==", 617 | "dev": true, 618 | "requires": { 619 | "@esbuild/android-arm": "0.15.15", 620 | "@esbuild/linux-loong64": "0.15.15", 621 | "esbuild-android-64": "0.15.15", 622 | "esbuild-android-arm64": "0.15.15", 623 | "esbuild-darwin-64": "0.15.15", 624 | "esbuild-darwin-arm64": "0.15.15", 625 | "esbuild-freebsd-64": "0.15.15", 626 | "esbuild-freebsd-arm64": "0.15.15", 627 | "esbuild-linux-32": "0.15.15", 628 | "esbuild-linux-64": "0.15.15", 629 | "esbuild-linux-arm": "0.15.15", 630 | "esbuild-linux-arm64": "0.15.15", 631 | "esbuild-linux-mips64le": "0.15.15", 632 | "esbuild-linux-ppc64le": "0.15.15", 633 | "esbuild-linux-riscv64": "0.15.15", 634 | "esbuild-linux-s390x": "0.15.15", 635 | "esbuild-netbsd-64": "0.15.15", 636 | "esbuild-openbsd-64": "0.15.15", 637 | "esbuild-sunos-64": "0.15.15", 638 | "esbuild-windows-32": "0.15.15", 639 | "esbuild-windows-64": "0.15.15", 640 | "esbuild-windows-arm64": "0.15.15" 641 | } 642 | }, 643 | "esbuild-android-64": { 644 | "version": "0.15.15", 645 | "resolved": "https://registry.npmjs.org/esbuild-android-64/-/esbuild-android-64-0.15.15.tgz", 646 | "integrity": "sha512-F+WjjQxO+JQOva3tJWNdVjouFMLK6R6i5gjDvgUthLYJnIZJsp1HlF523k73hELY20WPyEO8xcz7aaYBVkeg5Q==", 647 | "dev": true, 648 | "optional": true 649 | }, 650 | "esbuild-android-arm64": { 651 | "version": "0.15.15", 652 | "resolved": "https://registry.npmjs.org/esbuild-android-arm64/-/esbuild-android-arm64-0.15.15.tgz", 653 | "integrity": "sha512-attlyhD6Y22jNyQ0fIIQ7mnPvDWKw7k6FKnsXlBvQE6s3z6s6cuEHcSgoirquQc7TmZgVCK5fD/2uxmRN+ZpcQ==", 654 | "dev": true, 655 | "optional": true 656 | }, 657 | "esbuild-darwin-64": { 658 | "version": "0.15.15", 659 | "resolved": "https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-0.15.15.tgz", 660 | "integrity": "sha512-ohZtF8W1SHJ4JWldsPVdk8st0r9ExbAOSrBOh5L+Mq47i696GVwv1ab/KlmbUoikSTNoXEhDzVpxUR/WIO19FQ==", 661 | "dev": true, 662 | "optional": true 663 | }, 664 | "esbuild-darwin-arm64": { 665 | "version": "0.15.15", 666 | "resolved": "https://registry.npmjs.org/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.15.15.tgz", 667 | "integrity": "sha512-P8jOZ5zshCNIuGn+9KehKs/cq5uIniC+BeCykvdVhx/rBXSxmtj3CUIKZz4sDCuESMbitK54drf/2QX9QHG5Ag==", 668 | "dev": true, 669 | "optional": true 670 | }, 671 | "esbuild-freebsd-64": { 672 | "version": "0.15.15", 673 | "resolved": "https://registry.npmjs.org/esbuild-freebsd-64/-/esbuild-freebsd-64-0.15.15.tgz", 674 | "integrity": "sha512-KkTg+AmDXz1IvA9S1gt8dE24C8Thx0X5oM0KGF322DuP+P3evwTL9YyusHAWNsh4qLsR80nvBr/EIYs29VSwuA==", 675 | "dev": true, 676 | "optional": true 677 | }, 678 | "esbuild-freebsd-arm64": { 679 | "version": "0.15.15", 680 | "resolved": "https://registry.npmjs.org/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.15.15.tgz", 681 | "integrity": "sha512-FUcML0DRsuyqCMfAC+HoeAqvWxMeq0qXvclZZ/lt2kLU6XBnDA5uKTLUd379WYEyVD4KKFctqWd9tTuk8C/96g==", 682 | "dev": true, 683 | "optional": true 684 | }, 685 | "esbuild-linux-32": { 686 | "version": "0.15.15", 687 | "resolved": "https://registry.npmjs.org/esbuild-linux-32/-/esbuild-linux-32-0.15.15.tgz", 688 | "integrity": "sha512-q28Qn5pZgHNqug02aTkzw5sW9OklSo96b5nm17Mq0pDXrdTBcQ+M6Q9A1B+dalFeynunwh/pvfrNucjzwDXj+Q==", 689 | "dev": true, 690 | "optional": true 691 | }, 692 | "esbuild-linux-64": { 693 | "version": "0.15.15", 694 | "resolved": "https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.15.15.tgz", 695 | "integrity": "sha512-217KPmWMirkf8liO+fj2qrPwbIbhNTGNVtvqI1TnOWJgcMjUWvd677Gq3fTzXEjilkx2yWypVnTswM2KbXgoAg==", 696 | "dev": true, 697 | "optional": true 698 | }, 699 | "esbuild-linux-arm": { 700 | "version": "0.15.15", 701 | "resolved": "https://registry.npmjs.org/esbuild-linux-arm/-/esbuild-linux-arm-0.15.15.tgz", 702 | "integrity": "sha512-RYVW9o2yN8yM7SB1yaWr378CwrjvGCyGybX3SdzPHpikUHkME2AP55Ma20uNwkNyY2eSYFX9D55kDrfQmQBR4w==", 703 | "dev": true, 704 | "optional": true 705 | }, 706 | "esbuild-linux-arm64": { 707 | "version": "0.15.15", 708 | "resolved": "https://registry.npmjs.org/esbuild-linux-arm64/-/esbuild-linux-arm64-0.15.15.tgz", 709 | "integrity": "sha512-/ltmNFs0FivZkYsTzAsXIfLQX38lFnwJTWCJts0IbCqWZQe+jjj0vYBNbI0kmXLb3y5NljiM5USVAO1NVkdh2g==", 710 | "dev": true, 711 | "optional": true 712 | }, 713 | "esbuild-linux-mips64le": { 714 | "version": "0.15.15", 715 | "resolved": "https://registry.npmjs.org/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.15.15.tgz", 716 | "integrity": "sha512-PksEPb321/28GFFxtvL33yVPfnMZihxkEv5zME2zapXGp7fA1X2jYeiTUK+9tJ/EGgcNWuwvtawPxJG7Mmn86A==", 717 | "dev": true, 718 | "optional": true 719 | }, 720 | "esbuild-linux-ppc64le": { 721 | "version": "0.15.15", 722 | "resolved": "https://registry.npmjs.org/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.15.15.tgz", 723 | "integrity": "sha512-ek8gJBEIhcpGI327eAZigBOHl58QqrJrYYIZBWQCnH3UnXoeWMrMZLeeZL8BI2XMBhP+sQ6ERctD5X+ajL/AIA==", 724 | "dev": true, 725 | "optional": true 726 | }, 727 | "esbuild-linux-riscv64": { 728 | "version": "0.15.15", 729 | "resolved": "https://registry.npmjs.org/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.15.15.tgz", 730 | "integrity": "sha512-H5ilTZb33/GnUBrZMNJtBk7/OXzDHDXjIzoLXHSutwwsLxSNaLxzAaMoDGDd/keZoS+GDBqNVxdCkpuiRW4OSw==", 731 | "dev": true, 732 | "optional": true 733 | }, 734 | "esbuild-linux-s390x": { 735 | "version": "0.15.15", 736 | "resolved": "https://registry.npmjs.org/esbuild-linux-s390x/-/esbuild-linux-s390x-0.15.15.tgz", 737 | "integrity": "sha512-jKaLUg78mua3rrtrkpv4Or2dNTJU7bgHN4bEjT4OX4GR7nLBSA9dfJezQouTxMmIW7opwEC5/iR9mpC18utnxQ==", 738 | "dev": true, 739 | "optional": true 740 | }, 741 | "esbuild-netbsd-64": { 742 | "version": "0.15.15", 743 | "resolved": "https://registry.npmjs.org/esbuild-netbsd-64/-/esbuild-netbsd-64-0.15.15.tgz", 744 | "integrity": "sha512-aOvmF/UkjFuW6F36HbIlImJTTx45KUCHJndtKo+KdP8Dhq3mgLRKW9+6Ircpm8bX/RcS3zZMMmaBLkvGY06Gvw==", 745 | "dev": true, 746 | "optional": true 747 | }, 748 | "esbuild-openbsd-64": { 749 | "version": "0.15.15", 750 | "resolved": "https://registry.npmjs.org/esbuild-openbsd-64/-/esbuild-openbsd-64-0.15.15.tgz", 751 | "integrity": "sha512-HFFX+WYedx1w2yJ1VyR1Dfo8zyYGQZf1cA69bLdrHzu9svj6KH6ZLK0k3A1/LFPhcEY9idSOhsB2UyU0tHPxgQ==", 752 | "dev": true, 753 | "optional": true 754 | }, 755 | "esbuild-sunos-64": { 756 | "version": "0.15.15", 757 | "resolved": "https://registry.npmjs.org/esbuild-sunos-64/-/esbuild-sunos-64-0.15.15.tgz", 758 | "integrity": "sha512-jOPBudffG4HN8yJXcK9rib/ZTFoTA5pvIKbRrt3IKAGMq1EpBi4xoVoSRrq/0d4OgZLaQbmkHp8RO9eZIn5atA==", 759 | "dev": true, 760 | "optional": true 761 | }, 762 | "esbuild-windows-32": { 763 | "version": "0.15.15", 764 | "resolved": "https://registry.npmjs.org/esbuild-windows-32/-/esbuild-windows-32-0.15.15.tgz", 765 | "integrity": "sha512-MDkJ3QkjnCetKF0fKxCyYNBnOq6dmidcwstBVeMtXSgGYTy8XSwBeIE4+HuKiSsG6I/mXEb++px3IGSmTN0XiA==", 766 | "dev": true, 767 | "optional": true 768 | }, 769 | "esbuild-windows-64": { 770 | "version": "0.15.15", 771 | "resolved": "https://registry.npmjs.org/esbuild-windows-64/-/esbuild-windows-64-0.15.15.tgz", 772 | "integrity": "sha512-xaAUIB2qllE888SsMU3j9nrqyLbkqqkpQyWVkfwSil6BBPgcPk3zOFitTTncEKCLTQy3XV9RuH7PDj3aJDljWA==", 773 | "dev": true, 774 | "optional": true 775 | }, 776 | "esbuild-windows-arm64": { 777 | "version": "0.15.15", 778 | "resolved": "https://registry.npmjs.org/esbuild-windows-arm64/-/esbuild-windows-arm64-0.15.15.tgz", 779 | "integrity": "sha512-ttuoCYCIJAFx4UUKKWYnFdrVpoXa3+3WWkXVI6s09U+YjhnyM5h96ewTq/WgQj9LFSIlABQvadHSOQyAVjW5xQ==", 780 | "dev": true, 781 | "optional": true 782 | }, 783 | "fsevents": { 784 | "version": "2.3.2", 785 | "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", 786 | "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", 787 | "dev": true, 788 | "optional": true 789 | }, 790 | "function-bind": { 791 | "version": "1.1.1", 792 | "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", 793 | "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==", 794 | "dev": true 795 | }, 796 | "has": { 797 | "version": "1.0.3", 798 | "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", 799 | "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==", 800 | "dev": true, 801 | "requires": { 802 | "function-bind": "^1.1.1" 803 | } 804 | }, 805 | "is-core-module": { 806 | "version": "2.11.0", 807 | "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.11.0.tgz", 808 | "integrity": "sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==", 809 | "dev": true, 810 | "requires": { 811 | "has": "^1.0.3" 812 | } 813 | }, 814 | "nanoid": { 815 | "version": "3.3.4", 816 | "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz", 817 | "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==", 818 | "dev": true 819 | }, 820 | "path-parse": { 821 | "version": "1.0.7", 822 | "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", 823 | "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==", 824 | "dev": true 825 | }, 826 | "picocolors": { 827 | "version": "1.0.0", 828 | "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", 829 | "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==", 830 | "dev": true 831 | }, 832 | "postcss": { 833 | "version": "8.4.19", 834 | "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.19.tgz", 835 | "integrity": "sha512-h+pbPsyhlYj6N2ozBmHhHrs9DzGmbaarbLvWipMRO7RLS+v4onj26MPFXA5OBYFxyqYhUJK456SwDcY9H2/zsA==", 836 | "dev": true, 837 | "requires": { 838 | "nanoid": "^3.3.4", 839 | "picocolors": "^1.0.0", 840 | "source-map-js": "^1.0.2" 841 | } 842 | }, 843 | "resolve": { 844 | "version": "1.22.1", 845 | "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz", 846 | "integrity": "sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==", 847 | "dev": true, 848 | "requires": { 849 | "is-core-module": "^2.9.0", 850 | "path-parse": "^1.0.7", 851 | "supports-preserve-symlinks-flag": "^1.0.0" 852 | } 853 | }, 854 | "rollup": { 855 | "version": "2.79.1", 856 | "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz", 857 | "integrity": "sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==", 858 | "dev": true, 859 | "requires": { 860 | "fsevents": "~2.3.2" 861 | } 862 | }, 863 | "source-map-js": { 864 | "version": "1.0.2", 865 | "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", 866 | "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", 867 | "dev": true 868 | }, 869 | "supports-preserve-symlinks-flag": { 870 | "version": "1.0.0", 871 | "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", 872 | "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==", 873 | "dev": true 874 | }, 875 | "vite": { 876 | "version": "3.2.4", 877 | "resolved": "https://registry.npmjs.org/vite/-/vite-3.2.4.tgz", 878 | "integrity": "sha512-Z2X6SRAffOUYTa+sLy3NQ7nlHFU100xwanq1WDwqaiFiCe+25zdxP1TfCS5ojPV2oDDcXudHIoPnI1Z/66B7Yw==", 879 | "dev": true, 880 | "requires": { 881 | "esbuild": "^0.15.9", 882 | "fsevents": "~2.3.2", 883 | "postcss": "^8.4.18", 884 | "resolve": "^1.22.1", 885 | "rollup": "^2.79.1" 886 | } 887 | } 888 | } 889 | } 890 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "http-app", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "devDependencies": { 12 | "vite": "^3.2.3" 13 | } 14 | } -------------------------------------------------------------------------------- /public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/breakingbad/breakingbad-app.js: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * @returns {Promise} quote information 4 | */ 5 | const fetchQuote = async() => { 6 | 7 | const res = await fetch('https://www.breakingbadapi.com/api/quote/random'); 8 | const data = await res.json(); 9 | 10 | console.log(data[0]); 11 | return data[0]; 12 | } 13 | 14 | 15 | 16 | /** 17 | * 18 | * @param {HTMLDivElement} element 19 | */ 20 | export const BreakingbadApp = async( element ) => { 21 | document.querySelector('#app-title').innerHTML = 'Breakingbad App'; 22 | element.innerHTML = 'Loading...'; 23 | // await fetchQuote(); 24 | 25 | const quoteLabel = document.createElement('blockquote'); 26 | const authoLabel = document.createElement('h3'); 27 | const nextQuoteButton = document.createElement('button'); 28 | nextQuoteButton.innerText = 'Next Quote'; 29 | 30 | 31 | const renderQuote = ( data ) => { 32 | quoteLabel.innerHTML = data.quote; 33 | authoLabel.innerHTML = data.author; 34 | element.replaceChildren( quoteLabel, authoLabel, nextQuoteButton ); 35 | } 36 | 37 | // Añadir listener 38 | nextQuoteButton.addEventListener('click', async() => { 39 | element.innerHTML = 'Loading...'; 40 | const quote = await fetchQuote(); 41 | renderQuote( quote ); 42 | }) 43 | 44 | 45 | fetchQuote() 46 | .then( renderQuote ); 47 | } -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: Inter, Avenir, Helvetica, Arial, sans-serif; 3 | font-size: 16px; 4 | line-height: 24px; 5 | font-weight: 400; 6 | 7 | color-scheme: light dark; 8 | color: rgba(255, 255, 255, 0.87); 9 | background-color: #242424; 10 | 11 | font-synthesis: none; 12 | text-rendering: optimizeLegibility; 13 | -webkit-font-smoothing: antialiased; 14 | -moz-osx-font-smoothing: grayscale; 15 | -webkit-text-size-adjust: 100%; 16 | } 17 | 18 | a { 19 | font-weight: 500; 20 | color: #646cff; 21 | text-decoration: inherit; 22 | } 23 | a:hover { 24 | color: #535bf2; 25 | } 26 | 27 | body { 28 | margin: 0; 29 | display: flex; 30 | place-items: center; 31 | min-width: 320px; 32 | min-height: 100vh; 33 | } 34 | 35 | h1 { 36 | font-size: 2em; 37 | line-height: 1.1; 38 | } 39 | 40 | #app { 41 | max-width: 1280px; 42 | margin: 0 auto; 43 | padding: 2rem; 44 | text-align: center; 45 | } 46 | 47 | .logo { 48 | height: 3em; 49 | padding: 1.5em; 50 | will-change: filter; 51 | } 52 | .logo:hover { 53 | filter: drop-shadow(0 0 2em #646cffaa); 54 | } 55 | .logo.vanilla:hover { 56 | filter: drop-shadow(0 0 2em #f7df1eaa); 57 | } 58 | 59 | .card { 60 | padding: 2em; 61 | } 62 | 63 | .read-the-docs { 64 | color: #888; 65 | } 66 | 67 | button { 68 | border-radius: 8px; 69 | border: 1px solid transparent; 70 | padding: 0.6em 1.2em; 71 | font-size: 1em; 72 | font-weight: 500; 73 | font-family: inherit; 74 | background-color: #1a1a1a; 75 | cursor: pointer; 76 | transition: border-color 0.25s; 77 | } 78 | button:hover { 79 | border-color: #646cff; 80 | } 81 | button:focus, 82 | button:focus-visible { 83 | outline: 4px auto -webkit-focus-ring-color; 84 | } 85 | 86 | @media (prefers-color-scheme: light) { 87 | :root { 88 | color: #213547; 89 | background-color: #ffffff; 90 | } 91 | a:hover { 92 | color: #747bff; 93 | } 94 | button { 95 | background-color: #f9f9f9; 96 | } 97 | } --------------------------------------------------------------------------------