05_react/unterricht/tag44/01_react-api-with-hooks/package-lock.json

@@ -1,11 +1,11 @@
 {
-  "name": "01_components-with-hooks",
+  "name": "01_react-api-with-hooks",
   "version": "0.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "01_components-with-hooks",
+      "name": "01_react-api-with-hooks",
       "version": "0.0.0",
       "dependencies": {
         "axios": "^1.19.0",
@@ -18,7 +18,7 @@
         "@types/react-dom": "^19.2.4",
         "@vitejs/plugin-react": "^6.0.5",
         "oxlint": "^1.78.0",
-        "sass-embedded": "^1.100.0",
+        "sass-embedded": "^1.102.0",
         "vite": "^8.2.1"
       }
     },
@@ -1062,11 +1062,15 @@
       }
     },
     "node_modules/colorjs.io": {
-      "version": "0.5.2",
+      "version": "0.7.1",
-      "resolved": "https://registry.npmjs.org/colorjs.io/-/colorjs.io-0.5.2.tgz",
+      "resolved": "https://registry.npmjs.org/colorjs.io/-/colorjs.io-0.7.1.tgz",
-      "integrity": "sha512-twmVoizEW7ylZSN32OgKdXRmo1qg+wT5/6C3xu5b9QsWzSFAhHLn2xd8ro0diCsKfCj1RdaTP/nrcW+vAoQPIw==",
+      "integrity": "sha512-LY7OHnJZxHwT5UlzNa9bbhHHDbzB6yE5+3MIPwJEQKRvSCt/T4G7epsj+9j2BExUIIfXFIJGsIXUKdfrK9Q5tA==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/color"
+      }
     },
     "node_modules/combined-stream": {
       "version": "1.0.8",
@@ -1935,9 +1939,9 @@
       }
     },
     "node_modules/sass": {
-      "version": "1.100.0",
+      "version": "1.102.0",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.100.0.tgz",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.102.0.tgz",
-      "integrity": "sha512-B5j0rYMlinhhOo9tjQebMVVn0TfyXAF+wB3b2ggZUuJ/is/Y+7+JGjirAMxHZ9Z3hIP98NPfamlAkBHa1lAaXQ==",
+      "integrity": "sha512-NSOyTnaQF7rTAEOtI2fwb386vL+akyiQLBZu8Na7hXCb+umJy0GAqlcMIaqACZ6Z1VgTBS4K9PG6B3IdjHGJsw==",
       "dev": true,
       "license": "MIT",
       "optional": true,
@@ -1957,14 +1961,14 @@
       }
     },
     "node_modules/sass-embedded": {
-      "version": "1.100.0",
+      "version": "1.102.0",
-      "resolved": "https://registry.npmjs.org/sass-embedded/-/sass-embedded-1.100.0.tgz",
+      "resolved": "https://registry.npmjs.org/sass-embedded/-/sass-embedded-1.102.0.tgz",
-      "integrity": "sha512-Ut8wlQSk19tm7jMK6mz6cF1+e+E7tUnW2tM02zQDPnOTcVbV8qCQG8UWxZkkNlY50+hV3hqP24OOkUlMz8xBpw==",
+      "integrity": "sha512-7xZ7jbsGTpA+oRIJ3HKeiYy+RIrwHltIjKMdnRTAZiPpqvKzwy80zZqR532yk5bpHn1lTqWdZ6Fh4KI+GWSsKA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@bufbuild/protobuf": "^2.5.0",
-        "colorjs.io": "^0.5.0",
+        "colorjs.io": "^0.7.0",
         "immutable": "^5.1.5",
         "rxjs": "^7.4.0",
         "supports-color": "^8.1.1",
@@ -1975,33 +1979,33 @@
         "sass": "dist/bin/sass.js"
       },
       "engines": {
-        "node": ">=16.0.0"
+        "node": ">=20.19.0"
       },
       "optionalDependencies": {
-        "sass-embedded-all-unknown": "1.100.0",
+        "sass-embedded-all-unknown": "1.102.0",
-        "sass-embedded-android-arm": "1.100.0",
+        "sass-embedded-android-arm": "1.102.0",
-        "sass-embedded-android-arm64": "1.100.0",
+        "sass-embedded-android-arm64": "1.102.0",
-        "sass-embedded-android-riscv64": "1.100.0",
+        "sass-embedded-android-riscv64": "1.102.0",
-        "sass-embedded-android-x64": "1.100.0",
+        "sass-embedded-android-x64": "1.102.0",
-        "sass-embedded-darwin-arm64": "1.100.0",
+        "sass-embedded-darwin-arm64": "1.102.0",
-        "sass-embedded-darwin-x64": "1.100.0",
+        "sass-embedded-darwin-x64": "1.102.0",
-        "sass-embedded-linux-arm": "1.100.0",
+        "sass-embedded-linux-arm": "1.102.0",
-        "sass-embedded-linux-arm64": "1.100.0",
+        "sass-embedded-linux-arm64": "1.102.0",
-        "sass-embedded-linux-musl-arm": "1.100.0",
+        "sass-embedded-linux-musl-arm": "1.102.0",
-        "sass-embedded-linux-musl-arm64": "1.100.0",
+        "sass-embedded-linux-musl-arm64": "1.102.0",
-        "sass-embedded-linux-musl-riscv64": "1.100.0",
+        "sass-embedded-linux-musl-riscv64": "1.102.0",
-        "sass-embedded-linux-musl-x64": "1.100.0",
+        "sass-embedded-linux-musl-x64": "1.102.0",
-        "sass-embedded-linux-riscv64": "1.100.0",
+        "sass-embedded-linux-riscv64": "1.102.0",
-        "sass-embedded-linux-x64": "1.100.0",
+        "sass-embedded-linux-x64": "1.102.0",
-        "sass-embedded-unknown-all": "1.100.0",
+        "sass-embedded-unknown-all": "1.102.0",
-        "sass-embedded-win32-arm64": "1.100.0",
+        "sass-embedded-win32-arm64": "1.102.0",
-        "sass-embedded-win32-x64": "1.100.0"
+        "sass-embedded-win32-x64": "1.102.0"
       }
     },
     "node_modules/sass-embedded-all-unknown": {
-      "version": "1.100.0",
+      "version": "1.102.0",
-      "resolved": "https://registry.npmjs.org/sass-embedded-all-unknown/-/sass-embedded-all-unknown-1.100.0.tgz",
+      "resolved": "https://registry.npmjs.org/sass-embedded-all-unknown/-/sass-embedded-all-unknown-1.102.0.tgz",
-      "integrity": "sha512-auFtXY/kwYILmSVjtBDwyj0axcLbYYiffOKWoaXHnI5bsYwiRbBh3EneR1rpbX2ZIZCrwX93i5pxKLTZF/662Q==",
+      "integrity": "sha512-BpaRCODYILywdCOI8++Q63+/ptsnWdwYuKyD5gMH0cJblXj85EePdeTTOM7Hl2PP6d4dIojg8GS9fIZhD2x8qA==",
       "cpu": [
         "!arm",
         "!arm64",
@@ -2012,13 +2016,13 @@
       "license": "MIT",
       "optional": true,
       "dependencies": {
-        "sass": "1.100.0"
+        "sass": "1.102.0"
       }
     },
     "node_modules/sass-embedded-android-arm": {
-      "version": "1.100.0",
+      "version": "1.102.0",
-      "resolved": "https://registry.npmjs.org/sass-embedded-android-arm/-/sass-embedded-android-arm-1.100.0.tgz",
+      "resolved": "https://registry.npmjs.org/sass-embedded-android-arm/-/sass-embedded-android-arm-1.102.0.tgz",
-      "integrity": "sha512-70f3HgX2pFNmzpGQ86n5e6QfWn2fP4QUQGfFQK0P1XH73ZLIzLo2YqygrGKGKeeqtc5eU2Wl1/xQzhzuKnO4kw==",
+      "integrity": "sha512-QM6sPMUtUvFopVR15qXWdobSTYW/sPrXJLxa7eaIbqr/0EtNBZirEXdiOFdDNcsFIEFX3NeZjDq8ZkBAQrxR1w==",
       "cpu": [
         "arm"
       ],
@@ -2033,9 +2037,9 @@
       }
     },
     "node_modules/sass-embedded-android-arm64": {
-      "version": "1.100.0",
+      "version": "1.102.0",
-      "resolved": "https://registry.npmjs.org/sass-embedded-android-arm64/-/sass-embedded-android-arm64-1.100.0.tgz",
+      "resolved": "https://registry.npmjs.org/sass-embedded-android-arm64/-/sass-embedded-android-arm64-1.102.0.tgz",
-      "integrity": "sha512-W+Ru9JwTnfU0UX3jSZcbqFdtKFMcYdfFwytc57h2DgnqCOIiAqI2E06mABZBZC+r3LwXCBuS5GbXAGeVgvVDkA==",
+      "integrity": "sha512-p34iJl04ksTA/6/NZNKv4Bda710hvpoUNUK6vgHKe53tTGhL5XOfYyTjX95lpKPSvGm4BlPEVSSo6CBhyNSDpw==",
       "cpu": [
         "arm64"
       ],
@@ -2050,9 +2054,9 @@
       }
     },
     "node_modules/sass-embedded-android-riscv64": {
-      "version": "1.100.0",
+      "version": "1.102.0",
-      "resolved": "https://registry.npmjs.org/sass-embedded-android-riscv64/-/sass-embedded-android-riscv64-1.100.0.tgz",
+      "resolved": "https://registry.npmjs.org/sass-embedded-android-riscv64/-/sass-embedded-android-riscv64-1.102.0.tgz",
-      "integrity": "sha512-icU3o0V/uCSytSpf+tX5Lf51BvyQEbLzDUJfUi9etSauYBGHpPKkdtdZH0si4v98phq11Kl8rSV1SggksxF1Hg==",
+      "integrity": "sha512-wcT5N3B6fIwCKCicDcUP6Jol+e1R3WxHMGU7Swp9Ds9VV8di7HYOKIFcasT25dKJv4l17SA7x5Oum0FlRnMPkg==",
       "cpu": [
         "riscv64"
       ],
@@ -2067,9 +2071,9 @@
       }
     },
     "node_modules/sass-embedded-android-x64": {
-      "version": "1.100.0",
+      "version": "1.102.0",
-      "resolved": "https://registry.npmjs.org/sass-embedded-android-x64/-/sass-embedded-android-x64-1.100.0.tgz",
+      "resolved": "https://registry.npmjs.org/sass-embedded-android-x64/-/sass-embedded-android-x64-1.102.0.tgz",
-      "integrity": "sha512-mevF9VQk6gEYByy8+jusaHGmd7Usb2ytX/DsEOd0JtOGCtcf1kh575xJ6OUBDIcJ15uLnbau/0iy1eP6WVBvWA==",
+      "integrity": "sha512-IF4eJmoM4uzOborahHp8D4PlCIvumr6IGEbe1XkedwE57qRdk/GENiYZjGwYUQP0uy+pfb+WfvTNhMxkD2VhJg==",
       "cpu": [
         "x64"
       ],
@@ -2084,9 +2088,9 @@
       }
     },
     "node_modules/sass-embedded-darwin-arm64": {
-      "version": "1.100.0",
+      "version": "1.102.0",
-      "resolved": "https://registry.npmjs.org/sass-embedded-darwin-arm64/-/sass-embedded-darwin-arm64-1.100.0.tgz",
+      "resolved": "https://registry.npmjs.org/sass-embedded-darwin-arm64/-/sass-embedded-darwin-arm64-1.102.0.tgz",
-      "integrity": "sha512-1PVlYi61POo93IT/FfrG1mc1tAHxeSTyUALF2aOFmXGWjVXr3bQzEQiBGCOvQbj/ix+5hNyXFXcEMEyKvtUJJA==",
+      "integrity": "sha512-txaURnQp3L/5mGgSkg6zFrI/H1BgwPxH+7fv/HMuFT1fTXGi7i5++OJNCFVPL7gFB50WFmpf02bCvgec3/gxMA==",
       "cpu": [
         "arm64"
       ],
@@ -2101,9 +2105,9 @@
       }
     },
     "node_modules/sass-embedded-darwin-x64": {
-      "version": "1.100.0",
+      "version": "1.102.0",
-      "resolved": "https://registry.npmjs.org/sass-embedded-darwin-x64/-/sass-embedded-darwin-x64-1.100.0.tgz",
+      "resolved": "https://registry.npmjs.org/sass-embedded-darwin-x64/-/sass-embedded-darwin-x64-1.102.0.tgz",
-      "integrity": "sha512-x97o3JnGyImZNCIVs9wQHJUE5QCvmVIKaH1cwrz/5dK7OT1FpeNiW+u9TUomP9hG6Ekjd8EL8NBHpxTfIhdjmg==",
+      "integrity": "sha512-KXs/y/bCVTxRy6NbgC2kK2JwmYnu4+EcDu+DVpHHIfiRgClTca++jYEqcxkthqK9ufkCgwMmrhb3tllyw5l1dw==",
       "cpu": [
         "x64"
       ],
@@ -2118,9 +2122,9 @@
       }
     },
     "node_modules/sass-embedded-linux-arm": {
-      "version": "1.100.0",
+      "version": "1.102.0",
-      "resolved": "https://registry.npmjs.org/sass-embedded-linux-arm/-/sass-embedded-linux-arm-1.100.0.tgz",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-arm/-/sass-embedded-linux-arm-1.102.0.tgz",
-      "integrity": "sha512-9Ul7O1eKrc5YlhwWjkp8tZPSe3UEwSZ1uwUZOQom1HL0pRlBA6F/IlGZYFTLwnHMIP1fc77MMNaBRfc05mKMpw==",
+      "integrity": "sha512-1nqC2lrn91fjEsf6gSr/KigU15FrhUSDGWdSWowLXvNG8KbYUNRKjfypn+8u4P0SrL+R/v4VSVZguZiVVTI94A==",
       "cpu": [
         "arm"
       ],
@@ -2136,9 +2140,9 @@
       }
     },
     "node_modules/sass-embedded-linux-arm64": {
-      "version": "1.100.0",
+      "version": "1.102.0",
-      "resolved": "https://registry.npmjs.org/sass-embedded-linux-arm64/-/sass-embedded-linux-arm64-1.100.0.tgz",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-arm64/-/sass-embedded-linux-arm64-1.102.0.tgz",
-      "integrity": "sha512-Dwjmj8Z6VRy7rAi53JAdEwIyUjpfl7PhpSc2/LpQPQx+aO5Dp7Spaipkax0ufJl1SoDUdchCsM4y/88YaluorQ==",
+      "integrity": "sha512-Yg3Ga1deV+igVqjyK5gHMKbC6fdtKkVYBnzkPVbn/W2/DeActR2JFBfMwVtZJdLpNneMye3dRzOVO2QFegsTbQ==",
       "cpu": [
         "arm64"
       ],
@@ -2154,9 +2158,9 @@
       }
     },
     "node_modules/sass-embedded-linux-musl-arm": {
-      "version": "1.100.0",
+      "version": "1.102.0",
-      "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-arm/-/sass-embedded-linux-musl-arm-1.100.0.tgz",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-arm/-/sass-embedded-linux-musl-arm-1.102.0.tgz",
-      "integrity": "sha512-sl0JgbGloPyJg66XXx5UDSDScZ0oU85DpMQU4JU/sCUCFj1Z8zZ69SJWKTCNE4/jwnce7WI2zPCV5AG+RHOZJw==",
+      "integrity": "sha512-WULwlrLbhHsJzGBcfztoXK47VyJugcWDmLXF893+yrMj6dF4/zJP6JqootT3EmAx9JAUdAppXI6ma7aGlnV8jw==",
       "cpu": [
         "arm"
       ],
@@ -2172,9 +2176,9 @@
       }
     },
     "node_modules/sass-embedded-linux-musl-arm64": {
-      "version": "1.100.0",
+      "version": "1.102.0",
-      "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-arm64/-/sass-embedded-linux-musl-arm64-1.100.0.tgz",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-arm64/-/sass-embedded-linux-musl-arm64-1.102.0.tgz",
-      "integrity": "sha512-XpACJB2KjSLjf2e9uuvGVdOURsoNrFqgRiihhXyUHK9W0t3LIHb7z5MA/7XGPIT9bWSOO2zyw+rH/FHtDV/Yrg==",
+      "integrity": "sha512-UFvRNJcYFOqo0X525vXG3Buue+waoqiG58xx7J6tMHSj5K/38t+9YbbgppKGLRoKoAwZTIdW8pxPA8qBSzQC6Q==",
       "cpu": [
         "arm64"
       ],
@@ -2190,9 +2194,9 @@
       }
     },
     "node_modules/sass-embedded-linux-musl-riscv64": {
-      "version": "1.100.0",
+      "version": "1.102.0",
-      "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-riscv64/-/sass-embedded-linux-musl-riscv64-1.100.0.tgz",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-riscv64/-/sass-embedded-linux-musl-riscv64-1.102.0.tgz",
-      "integrity": "sha512-ShvI0Kx04mwoCARwZ0UjiT97isQvzO80tAt91zmFyHLN9kelc/IrQi940farSm2xQVPCKdeVyeG0ekBsokSpYQ==",
+      "integrity": "sha512-7EmAMt5cX0SEN/qTNHD4VBHyjJXmFMAGuNR9R4YJR/SWGj/OZJw9VWryMfzEnMgNbG6HykiIttGfr9CyNKmZbA==",
       "cpu": [
         "riscv64"
       ],
@@ -2208,9 +2212,9 @@
       }
     },
     "node_modules/sass-embedded-linux-musl-x64": {
-      "version": "1.100.0",
+      "version": "1.102.0",
-      "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-x64/-/sass-embedded-linux-musl-x64-1.100.0.tgz",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-x64/-/sass-embedded-linux-musl-x64-1.102.0.tgz",
-      "integrity": "sha512-TDBCRWNuS4RDLQXvRc1gjZlWiWTWaWGp0Bwu/IKwJxov81lsvrCs3TihTyNXtW7V5aoN4Ky3r0QOkNb3mwmBnA==",
+      "integrity": "sha512-HHzU5/g/MT1edbHfDzZleKcX19l6LMGk0KhZFLy66cxQl1iRLUaL22jfGstmHOdRUmVzWF3VevjSflSGvAjr4Q==",
       "cpu": [
         "x64"
       ],
@@ -2226,9 +2230,9 @@
       }
     },
     "node_modules/sass-embedded-linux-riscv64": {
-      "version": "1.100.0",
+      "version": "1.102.0",
-      "resolved": "https://registry.npmjs.org/sass-embedded-linux-riscv64/-/sass-embedded-linux-riscv64-1.100.0.tgz",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-riscv64/-/sass-embedded-linux-riscv64-1.102.0.tgz",
-      "integrity": "sha512-j4ENJGOheO+fm3j/yorLxCjBP6/XskrZx7dTLlT+lXYwN/qqCqoA/gsNLI0McS3DFM6GBwPiffzWsdWS8t6sEQ==",
+      "integrity": "sha512-AUc4wHQ7IUo9/0mcZQn7Xkl1t1+NZlTF+v5i3GX93HNoQUGIFic7q6qjSERLkdwQ0dLnWrMqe8KhV98V8v0ZoA==",
       "cpu": [
         "riscv64"
       ],
@@ -2244,9 +2248,9 @@
       }
     },
     "node_modules/sass-embedded-linux-x64": {
-      "version": "1.100.0",
+      "version": "1.102.0",
-      "resolved": "https://registry.npmjs.org/sass-embedded-linux-x64/-/sass-embedded-linux-x64-1.100.0.tgz",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-x64/-/sass-embedded-linux-x64-1.102.0.tgz",
-      "integrity": "sha512-0vUSN8j0WGtCJIOPh//EmUvYGHW0QOe5iul8qyhPk50MAcw49MA0r34AhftjDdx94ILPF6vApFs0gwHPQRlpVA==",
+      "integrity": "sha512-CxfhMwwbQFBCTjGysByvOw4PIOCYZ/jtz9uBU0UR5sfHtQvqqnsNyb1fVCIUsZ7piimxQAwcLV5H3Skj96QiVg==",
       "cpu": [
         "x64"
       ],
@@ -2262,9 +2266,9 @@
       }
     },
     "node_modules/sass-embedded-unknown-all": {
-      "version": "1.100.0",
+      "version": "1.102.0",
-      "resolved": "https://registry.npmjs.org/sass-embedded-unknown-all/-/sass-embedded-unknown-all-1.100.0.tgz",
+      "resolved": "https://registry.npmjs.org/sass-embedded-unknown-all/-/sass-embedded-unknown-all-1.102.0.tgz",
-      "integrity": "sha512-c+naBgWId4MIpToXcI0DgqetjdAkwTTAxFAuOaBz7HUXLdyG1oZRrEvSsbe41nEdQOKH0vgofVFCeSQgoXOG9A==",
+      "integrity": "sha512-qhqfvFD/7X0c6e5rwvzABkGlaYJju1G+hDPCiB0HdK+S7JF+YDDb9XpRYJ9+tGIopWzEHhoNnJDPtPs9IX1lOQ==",
       "dev": true,
       "license": "MIT",
       "optional": true,
@@ -2275,13 +2279,13 @@
         "!win32"
       ],
       "dependencies": {
-        "sass": "1.100.0"
+        "sass": "1.102.0"
       }
     },
     "node_modules/sass-embedded-win32-arm64": {
-      "version": "1.100.0",
+      "version": "1.102.0",
-      "resolved": "https://registry.npmjs.org/sass-embedded-win32-arm64/-/sass-embedded-win32-arm64-1.100.0.tgz",
+      "resolved": "https://registry.npmjs.org/sass-embedded-win32-arm64/-/sass-embedded-win32-arm64-1.102.0.tgz",
-      "integrity": "sha512-iE+yxj+hUXwwbqpHkXxgAWTzeRfcWxJ7SSTQEPMk48lwq3oCrWLlz5sQuWHbuTK/i0GKQfROdP+hOmPi89yjUg==",
+      "integrity": "sha512-EQOTKStMf7ervyhe3AX10Pa6F7CQMN3IgmpBkfgjy9HQG4Iyt34zCl/4vNJLVBWLW03b7/KJacy2I9SRz26X9g==",
       "cpu": [
         "arm64"
       ],
@@ -2296,9 +2300,9 @@
       }
     },
     "node_modules/sass-embedded-win32-x64": {
-      "version": "1.100.0",
+      "version": "1.102.0",
-      "resolved": "https://registry.npmjs.org/sass-embedded-win32-x64/-/sass-embedded-win32-x64-1.100.0.tgz",
+      "resolved": "https://registry.npmjs.org/sass-embedded-win32-x64/-/sass-embedded-win32-x64-1.102.0.tgz",
-      "integrity": "sha512-qI4F8MI7/KYoy9NdjJfhSspG42WPkADSNDvwEV7qWvCSFC83koJssRsKO2/PfY+niZz6BG65Ic/D+A11h959hw==",
+      "integrity": "sha512-e+26mgR+O4g/m7r+WGuvygsjgZEsfgWntIOgaNhkSa9b7vVas70l2RB/SipUM4zGXQk1jX06aOEz0w0Pq1pprQ==",
       "cpu": [
         "x64"
       ],

05_react/unterricht/tag44/01_react-api-with-hooks/package.json

@@ -20,7 +20,7 @@
     "@types/react-dom": "^19.2.4",
     "@vitejs/plugin-react": "^6.0.5",
     "oxlint": "^1.78.0",
-    "sass-embedded": "^1.100.0",
+    "sass-embedded": "^1.102.0",
     "vite": "^8.2.1"
   }
 }

05_react/unterricht/tag44/01_react-api-with-hooks/src/App.jsx

@@ -1,3 +1,4 @@
+import ChuckNorrisJokes from './components/jokes/ChuckNorrisJokes';
 import ListTodo from './components/lists/ListTodo';
 import ListUser from './components/lists/ListUser';
 
@@ -7,6 +8,9 @@ function App(props) {
   return (
     <>
       <main>
+        {/* <section className="section-jokes">
+          <ChuckNorrisJokes />
+        </section> */}
         <div className="container py-3">
           <h1>API auslesen in React</h1>
           <hr />

05_react/unterricht/tag44/01_react-api-with-hooks/src/components/jokes/ChuckNorrisJokes.jsx

@@ -0,0 +1,42 @@
+import { useEffect, useState } from 'react';
+
+const ChuckNorrisJokes = (props) => {
+  // const { } = props;
+
+  const [joke, setJoke] = useState('');
+  const getJoke = async () => {
+    await fetch('https://api.chucknorris.io/jokes/random')
+      .then((res) => res.json())
+      .then((data) => {
+        setJoke(data.value);
+        console.log('1');
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+
+  useEffect(() => {
+    getJoke();
+
+    return () => {
+      // controller.abort();
+    };
+  }, []);
+
+  // Event-Handler ===========
+  const onClickJoke = () => {
+    getJoke();
+  };
+
+  return (
+    <div className="chuck-norris-jokes">
+      <blockquote className="joke-text">{joke}</blockquote>
+      <button className="btn btn-dark button-get-joke" onClick={onClickJoke}>
+        Get Joke
+      </button>
+    </div>
+  );
+};
+
+export default ChuckNorrisJokes;

05_react/unterricht/tag44/01_react-api-with-hooks/src/styles/02_fonts/_index.scss

@@ -1,3 +1,3 @@
-// @import 'playfair-display-v40-latin';
+@import 'playfair-display-v40-latin';
-// @import 'source-sans-3-v19-latin';
+@import 'source-sans-3-v19-latin';
-@import 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.3.0/css/all.min.css';
+@import 'special-elite-v20-latin';

05_react/unterricht/tag44/01_react-api-with-hooks/src/styles/02_fonts/_playfair-display-v40-latin.scss

@@ -4,7 +4,7 @@
   font-family: 'Playfair Display';
   font-style: normal;
   font-weight: 400;
-  src: url('../fonts/playfair-display-v40-latin/playfair-display-v40-latin-regular.woff2') format('woff2');
+  src: url('/fonts/playfair-display-v40-latin/playfair-display-v40-latin-regular.woff2') format('woff2');
 }
 // playfair-display-italic - latin
 @font-face {
@@ -12,7 +12,7 @@
   font-family: 'Playfair Display';
   font-style: italic;
   font-weight: 400;
-  src: url('../fonts/playfair-display-v40-latin/playfair-display-v40-latin-italic.woff2') format('woff2');
+  src: url('/fonts/playfair-display-v40-latin/playfair-display-v40-latin-italic.woff2') format('woff2');
 }
 // playfair-display-500 - latin
 @font-face {
@@ -20,7 +20,7 @@
   font-family: 'Playfair Display';
   font-style: normal;
   font-weight: 500;
-  src: url('../fonts/playfair-display-v40-latin/playfair-display-v40-latin-500.woff2') format('woff2');
+  src: url('/fonts/playfair-display-v40-latin/playfair-display-v40-latin-500.woff2') format('woff2');
 }
 // playfair-display-500italic - latin
 @font-face {
@@ -28,7 +28,7 @@
   font-family: 'Playfair Display';
   font-style: italic;
   font-weight: 500;
-  src: url('../fonts/playfair-display-v40-latin/playfair-display-v40-latin-500italic.woff2') format('woff2');
+  src: url('/fonts/playfair-display-v40-latin/playfair-display-v40-latin-500italic.woff2') format('woff2');
 }
 // playfair-display-600 - latin
 @font-face {
@@ -36,7 +36,7 @@
   font-family: 'Playfair Display';
   font-style: normal;
   font-weight: 600;
-  src: url('../fonts/playfair-display-v40-latin/playfair-display-v40-latin-600.woff2') format('woff2');
+  src: url('/fonts/playfair-display-v40-latin/playfair-display-v40-latin-600.woff2') format('woff2');
 }
 // playfair-display-600italic - latin
 @font-face {
@@ -44,7 +44,7 @@
   font-family: 'Playfair Display';
   font-style: italic;
   font-weight: 600;
-  src: url('../fonts/playfair-display-v40-latin/playfair-display-v40-latin-600italic.woff2') format('woff2');
+  src: url('/fonts/playfair-display-v40-latin/playfair-display-v40-latin-600italic.woff2') format('woff2');
 }
 // playfair-display-700 - latin
 @font-face {
@@ -52,7 +52,7 @@
   font-family: 'Playfair Display';
   font-style: normal;
   font-weight: 700;
-  src: url('../fonts/playfair-display-v40-latin/playfair-display-v40-latin-700.woff2') format('woff2');
+  src: url('/fonts/playfair-display-v40-latin/playfair-display-v40-latin-700.woff2') format('woff2');
 }
 // playfair-display-700italic - latin
 @font-face {
@@ -60,7 +60,7 @@
   font-family: 'Playfair Display';
   font-style: italic;
   font-weight: 700;
-  src: url('../fonts/playfair-display-v40-latin/playfair-display-v40-latin-700italic.woff2') format('woff2');
+  src: url('/fonts/playfair-display-v40-latin/playfair-display-v40-latin-700italic.woff2') format('woff2');
 }
 // playfair-display-800 - latin
 @font-face {
@@ -68,7 +68,7 @@
   font-family: 'Playfair Display';
   font-style: normal;
   font-weight: 800;
-  src: url('../fonts/playfair-display-v40-latin/playfair-display-v40-latin-800.woff2') format('woff2');
+  src: url('/fonts/playfair-display-v40-latin/playfair-display-v40-latin-800.woff2') format('woff2');
 }
 // playfair-display-800italic - latin
 @font-face {
@@ -76,7 +76,7 @@
   font-family: 'Playfair Display';
   font-style: italic;
   font-weight: 800;
-  src: url('../fonts/playfair-display-v40-latin/playfair-display-v40-latin-800italic.woff2') format('woff2');
+  src: url('/fonts/playfair-display-v40-latin/playfair-display-v40-latin-800italic.woff2') format('woff2');
 }
 // playfair-display-900 - latin
 @font-face {
@@ -84,7 +84,7 @@
   font-family: 'Playfair Display';
   font-style: normal;
   font-weight: 900;
-  src: url('../fonts/playfair-display-v40-latin/playfair-display-v40-latin-900.woff2') format('woff2');
+  src: url('/fonts/playfair-display-v40-latin/playfair-display-v40-latin-900.woff2') format('woff2');
 }
 // playfair-display-900italic - latin
 @font-face {
@@ -92,5 +92,5 @@
   font-family: 'Playfair Display';
   font-style: italic;
   font-weight: 900;
-  src: url('../fonts/playfair-display-v40-latin/playfair-display-v40-latin-900italic.woff2') format('woff2');
+  src: url('/fonts/playfair-display-v40-latin/playfair-display-v40-latin-900italic.woff2') format('woff2');
 }

05_react/unterricht/tag44/01_react-api-with-hooks/src/styles/02_fonts/_source-sans-3-v19-latin.scss

@@ -4,7 +4,7 @@
   font-family: 'Source Sans 3';
   font-style: normal;
   font-weight: 200;
-  src: url('../fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-200.woff2') format('woff2');
+  src: url('/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-200.woff2') format('woff2');
 }
 
 // source-sans-3-200italic - latin
@@ -13,7 +13,7 @@
   font-family: 'Source Sans 3';
   font-style: italic;
   font-weight: 200;
-  src: url('../fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-200italic.woff2') format('woff2');
+  src: url('/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-200italic.woff2') format('woff2');
 }
 
 // source-sans-3-300 - latin
@@ -22,7 +22,7 @@
   font-family: 'Source Sans 3';
   font-style: normal;
   font-weight: 300;
-  src: url('../fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-300.woff2') format('woff2');
+  src: url('/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-300.woff2') format('woff2');
 }
 
 // source-sans-3-300italic - latin
@@ -31,7 +31,7 @@
   font-family: 'Source Sans 3';
   font-style: italic;
   font-weight: 300;
-  src: url('../fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-300italic.woff2') format('woff2');
+  src: url('/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-300italic.woff2') format('woff2');
 }
 
 // source-sans-3-regular - latin
@@ -40,7 +40,7 @@
   font-family: 'Source Sans 3';
   font-style: normal;
   font-weight: 400;
-  src: url('../fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-regular.woff2') format('woff2');
+  src: url('/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-regular.woff2') format('woff2');
 }
 
 // source-sans-3-italic - latin
@@ -49,7 +49,7 @@
   font-family: 'Source Sans 3';
   font-style: italic;
   font-weight: 400;
-  src: url('../fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-italic.woff2') format('woff2');
+  src: url('/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-italic.woff2') format('woff2');
 }
 // source-sans-3-500 - latin
 @font-face {
@@ -57,7 +57,7 @@
   font-family: 'Source Sans 3';
   font-style: normal;
   font-weight: 500;
-  src: url('../fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-500.woff2') format('woff2');
+  src: url('/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-500.woff2') format('woff2');
 }
 // source-sans-3-500italic - latin
 @font-face {
@@ -65,7 +65,7 @@
   font-family: 'Source Sans 3';
   font-style: italic;
   font-weight: 500;
-  src: url('../fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-500italic.woff2') format('woff2');
+  src: url('/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-500italic.woff2') format('woff2');
 }
 
 // source-sans-3-600 - latin
@@ -74,7 +74,7 @@
   font-family: 'Source Sans 3';
   font-style: normal;
   font-weight: 600;
-  src: url('../fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-600.woff2') format('woff2');
+  src: url('/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-600.woff2') format('woff2');
 }
 // source-sans-3-600italic - latin
 @font-face {
@@ -82,7 +82,7 @@
   font-family: 'Source Sans 3';
   font-style: italic;
   font-weight: 600;
-  src: url('../fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-600italic.woff2') format('woff2');
+  src: url('/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-600italic.woff2') format('woff2');
 }
 // source-sans-3-700 - latin
 @font-face {
@@ -90,7 +90,7 @@
   font-family: 'Source Sans 3';
   font-style: normal;
   font-weight: 700;
-  src: url('../fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-700.woff2') format('woff2');
+  src: url('/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-700.woff2') format('woff2');
 }
 // source-sans-3-700italic - latin
 @font-face {
@@ -98,7 +98,7 @@
   font-family: 'Source Sans 3';
   font-style: italic;
   font-weight: 700;
-  src: url('../fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-700italic.woff2') format('woff2');
+  src: url('/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-700italic.woff2') format('woff2');
 }
 // source-sans-3-800 - latin
 @font-face {
@@ -106,7 +106,7 @@
   font-family: 'Source Sans 3';
   font-style: normal;
   font-weight: 800;
-  src: url('../fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-800.woff2') format('woff2');
+  src: url('/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-800.woff2') format('woff2');
 }
 // source-sans-3-800italic - latin
 @font-face {
@@ -114,7 +114,7 @@
   font-family: 'Source Sans 3';
   font-style: italic;
   font-weight: 800;
-  src: url('../fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-800italic.woff2') format('woff2');
+  src: url('/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-800italic.woff2') format('woff2');
 }
 // source-sans-3-900 - latin
 @font-face {
@@ -122,7 +122,7 @@
   font-family: 'Source Sans 3';
   font-style: normal;
   font-weight: 900;
-  src: url('../fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-900.woff2') format('woff2');
+  src: url('/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-900.woff2') format('woff2');
 }
 // source-sans-3-900italic - latin
 @font-face {
@@ -130,5 +130,5 @@
   font-family: 'Source Sans 3';
   font-style: italic;
   font-weight: 900;
-  src: url('../fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-900italic.woff2') format('woff2');
+  src: url('/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-900italic.woff2') format('woff2');
 }

05_react/unterricht/tag44/01_react-api-with-hooks/src/styles/02_fonts/_special-elite-v20-latin.scss

@@ -0,0 +1,8 @@
+// special-elite-regular - latin
+@font-face {
+  font-display: swap;
+  font-family: 'Special Elite';
+  font-style: normal;
+  font-weight: 400;
+  src: url('../../assets/fonts/special-elite-v20-latin/special-elite-v20-latin-regular.woff2') format('woff2');
+}

05_react/unterricht/tag44/01_react-api-with-hooks/src/styles/05_modules/_chuck-norris-jokes.scss

@@ -0,0 +1,20 @@
+.chuck-norris-jokes {
+  height: 100vh;
+  // background: #222 url('../../assets/img/bg-concrete.jpg') center no-repeat fixed;
+  background: #222 url('/bg-concrete.jpg') center no-repeat fixed;
+  background-size: cover;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+
+  .joke-text {
+    color: white;
+    font-family: 'Special Elite';
+    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
+    font-size: 3rem;
+    max-width: 80%;
+    min-height: 40vh;
+  }
+}

05_react/unterricht/tag44/01_react-api-with-hooks/src/styles/05_modules/_index.scss

@@ -1,4 +1,5 @@
 @import 'button';
+@import 'chuck-norris-jokes';
 @import 'footer-main';
 @import 'header-main';
 @import 'inputAmount';