ptorrel/JS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Browse Source
This commit is contained in:
Philippe Torrel
2026-08-13 10:50:31 +02:00
parent 839a9d1dd7
commit 7fdcbc0493
43 changed files with 200 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
05_react/unterricht/tag44/01_react-api-with-hooks.zip
View File

Binary file not shown.

182
05_react/unterricht/tag44/01_react-api-with-hooks/package-lock.json generated
View File

@@ -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"
],

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

@@ -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"
}
}

BIN
05_react/unterricht/tag44/01_react-api-with-hooks/public/bg-concrete.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 668 KiB

BIN
05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/playfair-display-v40-latin/playfair-display-v40-latin-500.woff2 Normal file
View File

Binary file not shown.

BIN
05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/playfair-display-v40-latin/playfair-display-v40-latin-500italic.woff2 Normal file
View File

Binary file not shown.

BIN
05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/playfair-display-v40-latin/playfair-display-v40-latin-600.woff2 Normal file
View File

Binary file not shown.

BIN
05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/playfair-display-v40-latin/playfair-display-v40-latin-600italic.woff2 Normal file
View File

Binary file not shown.

BIN
05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/playfair-display-v40-latin/playfair-display-v40-latin-700.woff2 Normal file
View File

Binary file not shown.

BIN
05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/playfair-display-v40-latin/playfair-display-v40-latin-700italic.woff2 Normal file
View File

Binary file not shown.

BIN
05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/playfair-display-v40-latin/playfair-display-v40-latin-800.woff2 Normal file
View File

Binary file not shown.

BIN
05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/playfair-display-v40-latin/playfair-display-v40-latin-800italic.woff2 Normal file
View File

Binary file not shown.

BIN
05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/playfair-display-v40-latin/playfair-display-v40-latin-900.woff2 Normal file
View File

Binary file not shown.

BIN
05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/playfair-display-v40-latin/playfair-display-v40-latin-900italic.woff2 Normal file
View File

Binary file not shown.

BIN
05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/playfair-display-v40-latin/playfair-display-v40-latin-italic.woff2 Normal file
View File

Binary file not shown.

BIN
05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/playfair-display-v40-latin/playfair-display-v40-latin-regular.woff2 Normal file
View File

Binary file not shown.

BIN
05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-200.woff2 Normal file
View File

Binary file not shown.

BIN
05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-200italic.woff2 Normal file
View File

Binary file not shown.

BIN
05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-300.woff2 Normal file
View File

Binary file not shown.

BIN
05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-300italic.woff2 Normal file
View File

Binary file not shown.

BIN
05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-500.woff2 Normal file
View File

Binary file not shown.

BIN
05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-500italic.woff2 Normal file
View File

Binary file not shown.

BIN
05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-600.woff2 Normal file
View File

Binary file not shown.

BIN
05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-600italic.woff2 Normal file
View File

Binary file not shown.

BIN
05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-700.woff2 Normal file
View File

Binary file not shown.

BIN
05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-700italic.woff2 Normal file
View File

Binary file not shown.

BIN
05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-800.woff2 Normal file
View File

Binary file not shown.

BIN
05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-800italic.woff2 Normal file
View File

Binary file not shown.

BIN
05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-900.woff2 Normal file
View File

Binary file not shown.

BIN
05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-900italic.woff2 Normal file
View File

Binary file not shown.

BIN
05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-italic.woff2 Normal file
View File

Binary file not shown.

BIN
05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-regular.woff2 Normal file
View File

Binary file not shown.

BIN
05_react/unterricht/tag44/01_react-api-with-hooks/public/fonts/special-elite-v20-latin/special-elite-v20-latin-regular.woff2 Normal file
View File

Binary file not shown.

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

@@ -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 />

BIN
05_react/unterricht/tag44/01_react-api-with-hooks/src/assets/fonts/special-elite-v20-latin/special-elite-v20-latin-regular.woff2 Normal file
View File

Binary file not shown.

BIN
05_react/unterricht/tag44/01_react-api-with-hooks/src/assets/img/bg-concrete.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 668 KiB

42
05_react/unterricht/tag44/01_react-api-with-hooks/src/components/jokes/ChuckNorrisJokes.jsx Normal file
View File

@@ -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;

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

@@ -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';

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

@@ -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');
}

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

@@ -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');
}

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

@@ -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');
}

20
05_react/unterricht/tag44/01_react-api-with-hooks/src/styles/05_modules/_chuck-norris-jokes.scss Normal file
View File

@@ -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;
}
}

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

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