diff --git a/05_react/unterricht/tag44/01_react-api-with-hooks.zip b/05_react/unterricht/tag44/01_react-api-with-hooks.zip deleted file mode 100644 index 900307a..0000000 Binary files a/05_react/unterricht/tag44/01_react-api-with-hooks.zip and /dev/null differ diff --git a/05_react/unterricht/tag44/01_react-api-with-hooks/package-lock.json b/05_react/unterricht/tag44/01_react-api-with-hooks/package-lock.json index 9135da4..764a4b6 100644 --- a/05_react/unterricht/tag44/01_react-api-with-hooks/package-lock.json +++ b/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", - "resolved": "https://registry.npmjs.org/colorjs.io/-/colorjs.io-0.5.2.tgz", - "integrity": "sha512-twmVoizEW7ylZSN32OgKdXRmo1qg+wT5/6C3xu5b9QsWzSFAhHLn2xd8ro0diCsKfCj1RdaTP/nrcW+vAoQPIw==", + "version": "0.7.1", + "resolved": "https://registry.npmjs.org/colorjs.io/-/colorjs.io-0.7.1.tgz", + "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", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.100.0.tgz", - "integrity": "sha512-B5j0rYMlinhhOo9tjQebMVVn0TfyXAF+wB3b2ggZUuJ/is/Y+7+JGjirAMxHZ9Z3hIP98NPfamlAkBHa1lAaXQ==", + "version": "1.102.0", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.102.0.tgz", + "integrity": "sha512-NSOyTnaQF7rTAEOtI2fwb386vL+akyiQLBZu8Na7hXCb+umJy0GAqlcMIaqACZ6Z1VgTBS4K9PG6B3IdjHGJsw==", "dev": true, "license": "MIT", "optional": true, @@ -1957,14 +1961,14 @@ } }, "node_modules/sass-embedded": { - "version": "1.100.0", - "resolved": "https://registry.npmjs.org/sass-embedded/-/sass-embedded-1.100.0.tgz", - "integrity": "sha512-Ut8wlQSk19tm7jMK6mz6cF1+e+E7tUnW2tM02zQDPnOTcVbV8qCQG8UWxZkkNlY50+hV3hqP24OOkUlMz8xBpw==", + "version": "1.102.0", + "resolved": "https://registry.npmjs.org/sass-embedded/-/sass-embedded-1.102.0.tgz", + "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-android-arm": "1.100.0", - "sass-embedded-android-arm64": "1.100.0", - "sass-embedded-android-riscv64": "1.100.0", - "sass-embedded-android-x64": "1.100.0", - "sass-embedded-darwin-arm64": "1.100.0", - "sass-embedded-darwin-x64": "1.100.0", - "sass-embedded-linux-arm": "1.100.0", - "sass-embedded-linux-arm64": "1.100.0", - "sass-embedded-linux-musl-arm": "1.100.0", - "sass-embedded-linux-musl-arm64": "1.100.0", - "sass-embedded-linux-musl-riscv64": "1.100.0", - "sass-embedded-linux-musl-x64": "1.100.0", - "sass-embedded-linux-riscv64": "1.100.0", - "sass-embedded-linux-x64": "1.100.0", - "sass-embedded-unknown-all": "1.100.0", - "sass-embedded-win32-arm64": "1.100.0", - "sass-embedded-win32-x64": "1.100.0" + "sass-embedded-all-unknown": "1.102.0", + "sass-embedded-android-arm": "1.102.0", + "sass-embedded-android-arm64": "1.102.0", + "sass-embedded-android-riscv64": "1.102.0", + "sass-embedded-android-x64": "1.102.0", + "sass-embedded-darwin-arm64": "1.102.0", + "sass-embedded-darwin-x64": "1.102.0", + "sass-embedded-linux-arm": "1.102.0", + "sass-embedded-linux-arm64": "1.102.0", + "sass-embedded-linux-musl-arm": "1.102.0", + "sass-embedded-linux-musl-arm64": "1.102.0", + "sass-embedded-linux-musl-riscv64": "1.102.0", + "sass-embedded-linux-musl-x64": "1.102.0", + "sass-embedded-linux-riscv64": "1.102.0", + "sass-embedded-linux-x64": "1.102.0", + "sass-embedded-unknown-all": "1.102.0", + "sass-embedded-win32-arm64": "1.102.0", + "sass-embedded-win32-x64": "1.102.0" } }, "node_modules/sass-embedded-all-unknown": { - "version": "1.100.0", - "resolved": "https://registry.npmjs.org/sass-embedded-all-unknown/-/sass-embedded-all-unknown-1.100.0.tgz", - "integrity": "sha512-auFtXY/kwYILmSVjtBDwyj0axcLbYYiffOKWoaXHnI5bsYwiRbBh3EneR1rpbX2ZIZCrwX93i5pxKLTZF/662Q==", + "version": "1.102.0", + "resolved": "https://registry.npmjs.org/sass-embedded-all-unknown/-/sass-embedded-all-unknown-1.102.0.tgz", + "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", - "resolved": "https://registry.npmjs.org/sass-embedded-android-arm/-/sass-embedded-android-arm-1.100.0.tgz", - "integrity": "sha512-70f3HgX2pFNmzpGQ86n5e6QfWn2fP4QUQGfFQK0P1XH73ZLIzLo2YqygrGKGKeeqtc5eU2Wl1/xQzhzuKnO4kw==", + "version": "1.102.0", + "resolved": "https://registry.npmjs.org/sass-embedded-android-arm/-/sass-embedded-android-arm-1.102.0.tgz", + "integrity": "sha512-QM6sPMUtUvFopVR15qXWdobSTYW/sPrXJLxa7eaIbqr/0EtNBZirEXdiOFdDNcsFIEFX3NeZjDq8ZkBAQrxR1w==", "cpu": [ "arm" ], @@ -2033,9 +2037,9 @@ } }, "node_modules/sass-embedded-android-arm64": { - "version": "1.100.0", - "resolved": "https://registry.npmjs.org/sass-embedded-android-arm64/-/sass-embedded-android-arm64-1.100.0.tgz", - "integrity": "sha512-W+Ru9JwTnfU0UX3jSZcbqFdtKFMcYdfFwytc57h2DgnqCOIiAqI2E06mABZBZC+r3LwXCBuS5GbXAGeVgvVDkA==", + "version": "1.102.0", + "resolved": "https://registry.npmjs.org/sass-embedded-android-arm64/-/sass-embedded-android-arm64-1.102.0.tgz", + "integrity": "sha512-p34iJl04ksTA/6/NZNKv4Bda710hvpoUNUK6vgHKe53tTGhL5XOfYyTjX95lpKPSvGm4BlPEVSSo6CBhyNSDpw==", "cpu": [ "arm64" ], @@ -2050,9 +2054,9 @@ } }, "node_modules/sass-embedded-android-riscv64": { - "version": "1.100.0", - "resolved": "https://registry.npmjs.org/sass-embedded-android-riscv64/-/sass-embedded-android-riscv64-1.100.0.tgz", - "integrity": "sha512-icU3o0V/uCSytSpf+tX5Lf51BvyQEbLzDUJfUi9etSauYBGHpPKkdtdZH0si4v98phq11Kl8rSV1SggksxF1Hg==", + "version": "1.102.0", + "resolved": "https://registry.npmjs.org/sass-embedded-android-riscv64/-/sass-embedded-android-riscv64-1.102.0.tgz", + "integrity": "sha512-wcT5N3B6fIwCKCicDcUP6Jol+e1R3WxHMGU7Swp9Ds9VV8di7HYOKIFcasT25dKJv4l17SA7x5Oum0FlRnMPkg==", "cpu": [ "riscv64" ], @@ -2067,9 +2071,9 @@ } }, "node_modules/sass-embedded-android-x64": { - "version": "1.100.0", - "resolved": "https://registry.npmjs.org/sass-embedded-android-x64/-/sass-embedded-android-x64-1.100.0.tgz", - "integrity": "sha512-mevF9VQk6gEYByy8+jusaHGmd7Usb2ytX/DsEOd0JtOGCtcf1kh575xJ6OUBDIcJ15uLnbau/0iy1eP6WVBvWA==", + "version": "1.102.0", + "resolved": "https://registry.npmjs.org/sass-embedded-android-x64/-/sass-embedded-android-x64-1.102.0.tgz", + "integrity": "sha512-IF4eJmoM4uzOborahHp8D4PlCIvumr6IGEbe1XkedwE57qRdk/GENiYZjGwYUQP0uy+pfb+WfvTNhMxkD2VhJg==", "cpu": [ "x64" ], @@ -2084,9 +2088,9 @@ } }, "node_modules/sass-embedded-darwin-arm64": { - "version": "1.100.0", - "resolved": "https://registry.npmjs.org/sass-embedded-darwin-arm64/-/sass-embedded-darwin-arm64-1.100.0.tgz", - "integrity": "sha512-1PVlYi61POo93IT/FfrG1mc1tAHxeSTyUALF2aOFmXGWjVXr3bQzEQiBGCOvQbj/ix+5hNyXFXcEMEyKvtUJJA==", + "version": "1.102.0", + "resolved": "https://registry.npmjs.org/sass-embedded-darwin-arm64/-/sass-embedded-darwin-arm64-1.102.0.tgz", + "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", - "resolved": "https://registry.npmjs.org/sass-embedded-darwin-x64/-/sass-embedded-darwin-x64-1.100.0.tgz", - "integrity": "sha512-x97o3JnGyImZNCIVs9wQHJUE5QCvmVIKaH1cwrz/5dK7OT1FpeNiW+u9TUomP9hG6Ekjd8EL8NBHpxTfIhdjmg==", + "version": "1.102.0", + "resolved": "https://registry.npmjs.org/sass-embedded-darwin-x64/-/sass-embedded-darwin-x64-1.102.0.tgz", + "integrity": "sha512-KXs/y/bCVTxRy6NbgC2kK2JwmYnu4+EcDu+DVpHHIfiRgClTca++jYEqcxkthqK9ufkCgwMmrhb3tllyw5l1dw==", "cpu": [ "x64" ], @@ -2118,9 +2122,9 @@ } }, "node_modules/sass-embedded-linux-arm": { - "version": "1.100.0", - "resolved": "https://registry.npmjs.org/sass-embedded-linux-arm/-/sass-embedded-linux-arm-1.100.0.tgz", - "integrity": "sha512-9Ul7O1eKrc5YlhwWjkp8tZPSe3UEwSZ1uwUZOQom1HL0pRlBA6F/IlGZYFTLwnHMIP1fc77MMNaBRfc05mKMpw==", + "version": "1.102.0", + "resolved": "https://registry.npmjs.org/sass-embedded-linux-arm/-/sass-embedded-linux-arm-1.102.0.tgz", + "integrity": "sha512-1nqC2lrn91fjEsf6gSr/KigU15FrhUSDGWdSWowLXvNG8KbYUNRKjfypn+8u4P0SrL+R/v4VSVZguZiVVTI94A==", "cpu": [ "arm" ], @@ -2136,9 +2140,9 @@ } }, "node_modules/sass-embedded-linux-arm64": { - "version": "1.100.0", - "resolved": "https://registry.npmjs.org/sass-embedded-linux-arm64/-/sass-embedded-linux-arm64-1.100.0.tgz", - "integrity": "sha512-Dwjmj8Z6VRy7rAi53JAdEwIyUjpfl7PhpSc2/LpQPQx+aO5Dp7Spaipkax0ufJl1SoDUdchCsM4y/88YaluorQ==", + "version": "1.102.0", + "resolved": "https://registry.npmjs.org/sass-embedded-linux-arm64/-/sass-embedded-linux-arm64-1.102.0.tgz", + "integrity": "sha512-Yg3Ga1deV+igVqjyK5gHMKbC6fdtKkVYBnzkPVbn/W2/DeActR2JFBfMwVtZJdLpNneMye3dRzOVO2QFegsTbQ==", "cpu": [ "arm64" ], @@ -2154,9 +2158,9 @@ } }, "node_modules/sass-embedded-linux-musl-arm": { - "version": "1.100.0", - "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-arm/-/sass-embedded-linux-musl-arm-1.100.0.tgz", - "integrity": "sha512-sl0JgbGloPyJg66XXx5UDSDScZ0oU85DpMQU4JU/sCUCFj1Z8zZ69SJWKTCNE4/jwnce7WI2zPCV5AG+RHOZJw==", + "version": "1.102.0", + "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-arm/-/sass-embedded-linux-musl-arm-1.102.0.tgz", + "integrity": "sha512-WULwlrLbhHsJzGBcfztoXK47VyJugcWDmLXF893+yrMj6dF4/zJP6JqootT3EmAx9JAUdAppXI6ma7aGlnV8jw==", "cpu": [ "arm" ], @@ -2172,9 +2176,9 @@ } }, "node_modules/sass-embedded-linux-musl-arm64": { - "version": "1.100.0", - "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-arm64/-/sass-embedded-linux-musl-arm64-1.100.0.tgz", - "integrity": "sha512-XpACJB2KjSLjf2e9uuvGVdOURsoNrFqgRiihhXyUHK9W0t3LIHb7z5MA/7XGPIT9bWSOO2zyw+rH/FHtDV/Yrg==", + "version": "1.102.0", + "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-arm64/-/sass-embedded-linux-musl-arm64-1.102.0.tgz", + "integrity": "sha512-UFvRNJcYFOqo0X525vXG3Buue+waoqiG58xx7J6tMHSj5K/38t+9YbbgppKGLRoKoAwZTIdW8pxPA8qBSzQC6Q==", "cpu": [ "arm64" ], @@ -2190,9 +2194,9 @@ } }, "node_modules/sass-embedded-linux-musl-riscv64": { - "version": "1.100.0", - "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-riscv64/-/sass-embedded-linux-musl-riscv64-1.100.0.tgz", - "integrity": "sha512-ShvI0Kx04mwoCARwZ0UjiT97isQvzO80tAt91zmFyHLN9kelc/IrQi940farSm2xQVPCKdeVyeG0ekBsokSpYQ==", + "version": "1.102.0", + "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-riscv64/-/sass-embedded-linux-musl-riscv64-1.102.0.tgz", + "integrity": "sha512-7EmAMt5cX0SEN/qTNHD4VBHyjJXmFMAGuNR9R4YJR/SWGj/OZJw9VWryMfzEnMgNbG6HykiIttGfr9CyNKmZbA==", "cpu": [ "riscv64" ], @@ -2208,9 +2212,9 @@ } }, "node_modules/sass-embedded-linux-musl-x64": { - "version": "1.100.0", - "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-x64/-/sass-embedded-linux-musl-x64-1.100.0.tgz", - "integrity": "sha512-TDBCRWNuS4RDLQXvRc1gjZlWiWTWaWGp0Bwu/IKwJxov81lsvrCs3TihTyNXtW7V5aoN4Ky3r0QOkNb3mwmBnA==", + "version": "1.102.0", + "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-x64/-/sass-embedded-linux-musl-x64-1.102.0.tgz", + "integrity": "sha512-HHzU5/g/MT1edbHfDzZleKcX19l6LMGk0KhZFLy66cxQl1iRLUaL22jfGstmHOdRUmVzWF3VevjSflSGvAjr4Q==", "cpu": [ "x64" ], @@ -2226,9 +2230,9 @@ } }, "node_modules/sass-embedded-linux-riscv64": { - "version": "1.100.0", - "resolved": "https://registry.npmjs.org/sass-embedded-linux-riscv64/-/sass-embedded-linux-riscv64-1.100.0.tgz", - "integrity": "sha512-j4ENJGOheO+fm3j/yorLxCjBP6/XskrZx7dTLlT+lXYwN/qqCqoA/gsNLI0McS3DFM6GBwPiffzWsdWS8t6sEQ==", + "version": "1.102.0", + "resolved": "https://registry.npmjs.org/sass-embedded-linux-riscv64/-/sass-embedded-linux-riscv64-1.102.0.tgz", + "integrity": "sha512-AUc4wHQ7IUo9/0mcZQn7Xkl1t1+NZlTF+v5i3GX93HNoQUGIFic7q6qjSERLkdwQ0dLnWrMqe8KhV98V8v0ZoA==", "cpu": [ "riscv64" ], @@ -2244,9 +2248,9 @@ } }, "node_modules/sass-embedded-linux-x64": { - "version": "1.100.0", - "resolved": "https://registry.npmjs.org/sass-embedded-linux-x64/-/sass-embedded-linux-x64-1.100.0.tgz", - "integrity": "sha512-0vUSN8j0WGtCJIOPh//EmUvYGHW0QOe5iul8qyhPk50MAcw49MA0r34AhftjDdx94ILPF6vApFs0gwHPQRlpVA==", + "version": "1.102.0", + "resolved": "https://registry.npmjs.org/sass-embedded-linux-x64/-/sass-embedded-linux-x64-1.102.0.tgz", + "integrity": "sha512-CxfhMwwbQFBCTjGysByvOw4PIOCYZ/jtz9uBU0UR5sfHtQvqqnsNyb1fVCIUsZ7piimxQAwcLV5H3Skj96QiVg==", "cpu": [ "x64" ], @@ -2262,9 +2266,9 @@ } }, "node_modules/sass-embedded-unknown-all": { - "version": "1.100.0", - "resolved": "https://registry.npmjs.org/sass-embedded-unknown-all/-/sass-embedded-unknown-all-1.100.0.tgz", - "integrity": "sha512-c+naBgWId4MIpToXcI0DgqetjdAkwTTAxFAuOaBz7HUXLdyG1oZRrEvSsbe41nEdQOKH0vgofVFCeSQgoXOG9A==", + "version": "1.102.0", + "resolved": "https://registry.npmjs.org/sass-embedded-unknown-all/-/sass-embedded-unknown-all-1.102.0.tgz", + "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", - "resolved": "https://registry.npmjs.org/sass-embedded-win32-arm64/-/sass-embedded-win32-arm64-1.100.0.tgz", - "integrity": "sha512-iE+yxj+hUXwwbqpHkXxgAWTzeRfcWxJ7SSTQEPMk48lwq3oCrWLlz5sQuWHbuTK/i0GKQfROdP+hOmPi89yjUg==", + "version": "1.102.0", + "resolved": "https://registry.npmjs.org/sass-embedded-win32-arm64/-/sass-embedded-win32-arm64-1.102.0.tgz", + "integrity": "sha512-EQOTKStMf7ervyhe3AX10Pa6F7CQMN3IgmpBkfgjy9HQG4Iyt34zCl/4vNJLVBWLW03b7/KJacy2I9SRz26X9g==", "cpu": [ "arm64" ], @@ -2296,9 +2300,9 @@ } }, "node_modules/sass-embedded-win32-x64": { - "version": "1.100.0", - "resolved": "https://registry.npmjs.org/sass-embedded-win32-x64/-/sass-embedded-win32-x64-1.100.0.tgz", - "integrity": "sha512-qI4F8MI7/KYoy9NdjJfhSspG42WPkADSNDvwEV7qWvCSFC83koJssRsKO2/PfY+niZz6BG65Ic/D+A11h959hw==", + "version": "1.102.0", + "resolved": "https://registry.npmjs.org/sass-embedded-win32-x64/-/sass-embedded-win32-x64-1.102.0.tgz", + "integrity": "sha512-e+26mgR+O4g/m7r+WGuvygsjgZEsfgWntIOgaNhkSa9b7vVas70l2RB/SipUM4zGXQk1jX06aOEz0w0Pq1pprQ==", "cpu": [ "x64" ], diff --git a/05_react/unterricht/tag44/01_react-api-with-hooks/package.json b/05_react/unterricht/tag44/01_react-api-with-hooks/package.json index a46b258..165f5dd 100644 --- a/05_react/unterricht/tag44/01_react-api-with-hooks/package.json +++ b/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" } } diff --git a/05_react/unterricht/tag44/01_react-api-with-hooks/public/bg-concrete.jpg b/05_react/unterricht/tag44/01_react-api-with-hooks/public/bg-concrete.jpg new file mode 100644 index 0000000..56b8bf1 Binary files /dev/null and b/05_react/unterricht/tag44/01_react-api-with-hooks/public/bg-concrete.jpg differ diff --git a/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/playfair-display-v40-latin/playfair-display-v40-latin-500.woff2 b/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/playfair-display-v40-latin/playfair-display-v40-latin-500.woff2 new file mode 100644 index 0000000..64d6e11 Binary files /dev/null and b/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/playfair-display-v40-latin/playfair-display-v40-latin-500.woff2 differ diff --git a/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/playfair-display-v40-latin/playfair-display-v40-latin-500italic.woff2 b/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/playfair-display-v40-latin/playfair-display-v40-latin-500italic.woff2 new file mode 100644 index 0000000..8e3e680 Binary files /dev/null and b/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/playfair-display-v40-latin/playfair-display-v40-latin-500italic.woff2 differ diff --git a/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/playfair-display-v40-latin/playfair-display-v40-latin-600.woff2 b/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/playfair-display-v40-latin/playfair-display-v40-latin-600.woff2 new file mode 100644 index 0000000..c19fbc1 Binary files /dev/null and b/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/playfair-display-v40-latin/playfair-display-v40-latin-600.woff2 differ diff --git a/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/playfair-display-v40-latin/playfair-display-v40-latin-600italic.woff2 b/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/playfair-display-v40-latin/playfair-display-v40-latin-600italic.woff2 new file mode 100644 index 0000000..78abff9 Binary files /dev/null and b/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/playfair-display-v40-latin/playfair-display-v40-latin-600italic.woff2 differ diff --git a/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/playfair-display-v40-latin/playfair-display-v40-latin-700.woff2 b/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/playfair-display-v40-latin/playfair-display-v40-latin-700.woff2 new file mode 100644 index 0000000..39eefe0 Binary files /dev/null and b/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/playfair-display-v40-latin/playfair-display-v40-latin-700.woff2 differ diff --git a/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/playfair-display-v40-latin/playfair-display-v40-latin-700italic.woff2 b/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/playfair-display-v40-latin/playfair-display-v40-latin-700italic.woff2 new file mode 100644 index 0000000..d7f6b28 Binary files /dev/null and b/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/playfair-display-v40-latin/playfair-display-v40-latin-700italic.woff2 differ diff --git a/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/playfair-display-v40-latin/playfair-display-v40-latin-800.woff2 b/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/playfair-display-v40-latin/playfair-display-v40-latin-800.woff2 new file mode 100644 index 0000000..1128d50 Binary files /dev/null and b/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/playfair-display-v40-latin/playfair-display-v40-latin-800.woff2 differ diff --git a/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/playfair-display-v40-latin/playfair-display-v40-latin-800italic.woff2 b/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/playfair-display-v40-latin/playfair-display-v40-latin-800italic.woff2 new file mode 100644 index 0000000..dc86c01 Binary files /dev/null and b/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/playfair-display-v40-latin/playfair-display-v40-latin-800italic.woff2 differ diff --git a/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/playfair-display-v40-latin/playfair-display-v40-latin-900.woff2 b/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/playfair-display-v40-latin/playfair-display-v40-latin-900.woff2 new file mode 100644 index 0000000..87eff24 Binary files /dev/null and b/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/playfair-display-v40-latin/playfair-display-v40-latin-900.woff2 differ diff --git a/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/playfair-display-v40-latin/playfair-display-v40-latin-900italic.woff2 b/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/playfair-display-v40-latin/playfair-display-v40-latin-900italic.woff2 new file mode 100644 index 0000000..61fa874 Binary files /dev/null and b/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/playfair-display-v40-latin/playfair-display-v40-latin-900italic.woff2 differ diff --git a/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/playfair-display-v40-latin/playfair-display-v40-latin-italic.woff2 b/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/playfair-display-v40-latin/playfair-display-v40-latin-italic.woff2 new file mode 100644 index 0000000..30828de Binary files /dev/null and b/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/playfair-display-v40-latin/playfair-display-v40-latin-italic.woff2 differ diff --git a/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/playfair-display-v40-latin/playfair-display-v40-latin-regular.woff2 b/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/playfair-display-v40-latin/playfair-display-v40-latin-regular.woff2 new file mode 100644 index 0000000..141ea84 Binary files /dev/null and b/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/playfair-display-v40-latin/playfair-display-v40-latin-regular.woff2 differ diff --git a/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-200.woff2 b/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-200.woff2 new file mode 100644 index 0000000..1a88824 Binary files /dev/null and b/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-200.woff2 differ diff --git a/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-200italic.woff2 b/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-200italic.woff2 new file mode 100644 index 0000000..24c53f0 Binary files /dev/null and b/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-200italic.woff2 differ diff --git a/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-300.woff2 b/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-300.woff2 new file mode 100644 index 0000000..b47991a Binary files /dev/null and b/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-300.woff2 differ diff --git a/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-300italic.woff2 b/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-300italic.woff2 new file mode 100644 index 0000000..e24cd5a Binary files /dev/null and b/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-300italic.woff2 differ diff --git a/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-500.woff2 b/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-500.woff2 new file mode 100644 index 0000000..5918916 Binary files /dev/null and b/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-500.woff2 differ diff --git a/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-500italic.woff2 b/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-500italic.woff2 new file mode 100644 index 0000000..0706a1f Binary files /dev/null and b/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-500italic.woff2 differ diff --git a/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-600.woff2 b/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-600.woff2 new file mode 100644 index 0000000..9351177 Binary files /dev/null and b/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-600.woff2 differ diff --git a/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-600italic.woff2 b/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-600italic.woff2 new file mode 100644 index 0000000..b216f26 Binary files /dev/null and b/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-600italic.woff2 differ diff --git a/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-700.woff2 b/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-700.woff2 new file mode 100644 index 0000000..3cb944c Binary files /dev/null and b/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-700.woff2 differ diff --git a/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-700italic.woff2 b/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-700italic.woff2 new file mode 100644 index 0000000..f9a6d5f Binary files /dev/null and b/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-700italic.woff2 differ diff --git a/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-800.woff2 b/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-800.woff2 new file mode 100644 index 0000000..cd37781 Binary files /dev/null and b/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-800.woff2 differ diff --git a/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-800italic.woff2 b/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-800italic.woff2 new file mode 100644 index 0000000..7f43c11 Binary files /dev/null and b/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-800italic.woff2 differ diff --git a/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-900.woff2 b/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-900.woff2 new file mode 100644 index 0000000..c3ac211 Binary files /dev/null and b/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-900.woff2 differ diff --git a/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-900italic.woff2 b/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-900italic.woff2 new file mode 100644 index 0000000..cc339ed Binary files /dev/null and b/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-900italic.woff2 differ diff --git a/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-italic.woff2 b/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-italic.woff2 new file mode 100644 index 0000000..515b6b3 Binary files /dev/null and b/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-italic.woff2 differ diff --git a/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-regular.woff2 b/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-regular.woff2 new file mode 100644 index 0000000..0c4242e Binary files /dev/null and b/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-regular.woff2 differ diff --git a/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/special-elite-v20-latin/special-elite-v20-latin-regular.woff2 b/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/special-elite-v20-latin/special-elite-v20-latin-regular.woff2 new file mode 100644 index 0000000..569a27e Binary files /dev/null and b/05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/special-elite-v20-latin/special-elite-v20-latin-regular.woff2 differ diff --git a/05_react/unterricht/tag44/01_react-api-with-hooks/src/App.jsx b/05_react/unterricht/tag44/01_react-api-with-hooks/src/App.jsx index 2b311cd..0fde633 100644 --- a/05_react/unterricht/tag44/01_react-api-with-hooks/src/App.jsx +++ b/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 ( <>
+ {/*
+ +
*/}

API auslesen in React


diff --git a/05_react/unterricht/tag44/01_react-api-with-hooks/src/assets/fonts/special-elite-v20-latin/special-elite-v20-latin-regular.woff2 b/05_react/unterricht/tag44/01_react-api-with-hooks/src/assets/fonts/special-elite-v20-latin/special-elite-v20-latin-regular.woff2 new file mode 100644 index 0000000..569a27e Binary files /dev/null and b/05_react/unterricht/tag44/01_react-api-with-hooks/src/assets/fonts/special-elite-v20-latin/special-elite-v20-latin-regular.woff2 differ diff --git a/05_react/unterricht/tag44/01_react-api-with-hooks/src/assets/img/bg-concrete.jpg b/05_react/unterricht/tag44/01_react-api-with-hooks/src/assets/img/bg-concrete.jpg new file mode 100644 index 0000000..56b8bf1 Binary files /dev/null and b/05_react/unterricht/tag44/01_react-api-with-hooks/src/assets/img/bg-concrete.jpg differ diff --git a/05_react/unterricht/tag44/01_react-api-with-hooks/src/components/jokes/ChuckNorrisJokes.jsx b/05_react/unterricht/tag44/01_react-api-with-hooks/src/components/jokes/ChuckNorrisJokes.jsx new file mode 100644 index 0000000..84d04ca --- /dev/null +++ b/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 ( +
+
{joke}
+ +
+ ); +}; + +export default ChuckNorrisJokes; diff --git a/05_react/unterricht/tag44/01_react-api-with-hooks/src/styles/02_fonts/_index.scss b/05_react/unterricht/tag44/01_react-api-with-hooks/src/styles/02_fonts/_index.scss index 09929c7..b11cd23 100644 --- a/05_react/unterricht/tag44/01_react-api-with-hooks/src/styles/02_fonts/_index.scss +++ b/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 'source-sans-3-v19-latin'; -@import 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.3.0/css/all.min.css'; +@import 'playfair-display-v40-latin'; +@import 'source-sans-3-v19-latin'; +@import 'special-elite-v20-latin'; diff --git a/05_react/unterricht/tag44/01_react-api-with-hooks/src/styles/02_fonts/_playfair-display-v40-latin.scss b/05_react/unterricht/tag44/01_react-api-with-hooks/src/styles/02_fonts/_playfair-display-v40-latin.scss index 3069a6f..6f02c76 100644 --- a/05_react/unterricht/tag44/01_react-api-with-hooks/src/styles/02_fonts/_playfair-display-v40-latin.scss +++ b/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'); } diff --git a/05_react/unterricht/tag44/01_react-api-with-hooks/src/styles/02_fonts/_source-sans-3-v19-latin.scss b/05_react/unterricht/tag44/01_react-api-with-hooks/src/styles/02_fonts/_source-sans-3-v19-latin.scss index 21173b6..e3adc1a 100644 --- a/05_react/unterricht/tag44/01_react-api-with-hooks/src/styles/02_fonts/_source-sans-3-v19-latin.scss +++ b/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'); } diff --git a/05_react/unterricht/tag44/01_react-api-with-hooks/src/styles/02_fonts/_special-elite-v20-latin.scss b/05_react/unterricht/tag44/01_react-api-with-hooks/src/styles/02_fonts/_special-elite-v20-latin.scss new file mode 100644 index 0000000..232ccca --- /dev/null +++ b/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'); +} diff --git a/05_react/unterricht/tag44/01_react-api-with-hooks/src/styles/05_modules/_chuck-norris-jokes.scss b/05_react/unterricht/tag44/01_react-api-with-hooks/src/styles/05_modules/_chuck-norris-jokes.scss new file mode 100644 index 0000000..ceb7a15 --- /dev/null +++ b/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; + } +} diff --git a/05_react/unterricht/tag44/01_react-api-with-hooks/src/styles/05_modules/_index.scss b/05_react/unterricht/tag44/01_react-api-with-hooks/src/styles/05_modules/_index.scss index b336e44..97eb13a 100644 --- a/05_react/unterricht/tag44/01_react-api-with-hooks/src/styles/05_modules/_index.scss +++ b/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';