2026-08-07 11:24:07 +02:00
parent 2c47aa98b8
commit 70a9d3ca08
273 changed files with 26737 additions and 38 deletions
--- a/05_react/uebungen/u08_badge-2/src/App.jsx
+++ b/05_react/uebungen/u08_badge-2/src/App.jsx
@@ -1,12 +1,16 @@
+import Badge from './components/Badge';
+
 function App() {
  return (
    <main>
      <div className="container py-5">
        <h1>Badges</h1>
-        {/* <Badge text="Neu" variant="success" />
+        <Badge text="Neu" variant="success" />
        <Badge text="Oh oh" variant="danger" />
        <Badge text="new idea" variant="info" />
-        <Badge text="Rabatt" variant="warning" /> */}
+        <Badge text="Rabatt" variant="warning" />
+        <Badge text="Mega" color="tomato" />
+        <Badge text="Mega" color="#17537b" />
      </div>
    </main>
  );
--- a/05_react/uebungen/u08_badge-2/src/components/Badge.jsx
+++ b/05_react/uebungen/u08_badge-2/src/components/Badge.jsx
@@ -0,0 +1,11 @@
+const Badge = (props) => {
+  const { text = '', variant = 'secondary', color = '' } = props;
+
+  return (
+    <span className={`badge ${!color ? `text-bg-${variant}` : ''} mx-1`} style={{ backgroundColor: color }}>
+      {text}
+    </span>
+  );
+  // <span className={`badge text-bg-${variant}`}>{text};</span>
+};
+export default Badge;
--- a/05_react/uebungen/u09_react-icons/package-lock.json
+++ b/05_react/uebungen/u09_react-icons/package-lock.json
@@ -1,16 +1,17 @@
 {
-  "name": "02_reusable-components",
+  "name": "u09_react-icons",
  "version": "0.0.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
-      "name": "02_reusable-components",
+      "name": "u09_react-icons",
      "version": "0.0.0",
      "dependencies": {
        "bootstrap": "^5.3.8",
        "react": "^19.2.8",
-        "react-dom": "^19.2.8"
+        "react-dom": "^19.2.8",
+        "react-icons": "^5.7.0"
      },
      "devDependencies": {
        "@types/react": "^19.2.17",
@@ -1622,6 +1623,15 @@
        "react": "^19.2.8"
      }
    },
+    "node_modules/react-icons": {
+      "version": "5.7.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.7.0.tgz",
+      "integrity": "sha512-LBLy340Rzqy6+/yVhZKT3B/QpP1BZaesGqasf09HPOBzRarcDIFH0WwXlXQfE7q7ipxK4MSiC5DIBWURCny6fw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
    "node_modules/readdirp": {
      "version": "5.1.1",
      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-5.1.1.tgz",
--- a/05_react/uebungen/u09_react-icons/package.json
+++ b/05_react/uebungen/u09_react-icons/package.json
@@ -12,7 +12,8 @@
  "dependencies": {
    "bootstrap": "^5.3.8",
    "react": "^19.2.8",
-    "react-dom": "^19.2.8"
+    "react-dom": "^19.2.8",
+    "react-icons": "^5.7.0"
  },
  "devDependencies": {
    "@types/react": "^19.2.17",
--- a/05_react/uebungen/u09_react-icons/src/components/inputs/InputAmount.jsx
+++ b/05_react/uebungen/u09_react-icons/src/components/inputs/InputAmount.jsx
@@ -1,3 +1,5 @@
+import { FaMinus, FaPlus } from 'react-icons/fa6';
+// npm install react-icons  | Auf der npm Seite mit --save, ist nicht mehr nötig
 const InputAmount = (props) => {
  // const { } = props;

@@ -5,14 +7,14 @@ const InputAmount = (props) => {
    <div className="m-input-amount input-amount">
      <div className="input-group mb-3">
        <span className="input-group-text">
-          <button className="btn btn-dark button-decrease">
-            -<span className="visually-hidden">Decrease Amount</span>
+          <button className="btn btn-dark button-decrease" aria-label="Decrease Amount">
+            <FaMinus />
          </button>
        </span>
        <input type="number" name="amount" placeholder="0" aria-label="Amount" className="form-control input-amount" />
        <span className="input-group-text">
-          <button className="btn btn-dark button-increase">
-            +<span className="visually-hidden">Increase Amount</span>
+          <button className="btn btn-dark button-increase" aria-label="Increase Amount">
+            <FaPlus />
          </button>
        </span>
      </div>
--- a/05_react/uebungen/u10_input-price/package-lock.json
+++ b/05_react/uebungen/u10_input-price/package-lock.json
@@ -1,16 +1,17 @@
 {
-  "name": "02_reusable-components",
+  "name": "u10_input-price",
  "version": "0.0.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
-      "name": "02_reusable-components",
+      "name": "u10_input-price",
      "version": "0.0.0",
      "dependencies": {
        "bootstrap": "^5.3.8",
        "react": "^19.2.8",
-        "react-dom": "^19.2.8"
+        "react-dom": "^19.2.8",
+        "react-icons": "^5.7.0"
      },
      "devDependencies": {
        "@types/react": "^19.2.17",
@@ -1622,6 +1623,15 @@
        "react": "^19.2.8"
      }
    },
+    "node_modules/react-icons": {
+      "version": "5.7.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.7.0.tgz",
+      "integrity": "sha512-LBLy340Rzqy6+/yVhZKT3B/QpP1BZaesGqasf09HPOBzRarcDIFH0WwXlXQfE7q7ipxK4MSiC5DIBWURCny6fw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
    "node_modules/readdirp": {
      "version": "5.1.1",
      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-5.1.1.tgz",
--- a/05_react/uebungen/u10_input-price/package.json
+++ b/05_react/uebungen/u10_input-price/package.json
@@ -12,7 +12,8 @@
  "dependencies": {
    "bootstrap": "^5.3.8",
    "react": "^19.2.8",
-    "react-dom": "^19.2.8"
+    "react-dom": "^19.2.8",
+    "react-icons": "^5.7.0"
  },
  "devDependencies": {
    "@types/react": "^19.2.17",
--- a/05_react/uebungen/u10_input-price/src/App.jsx
+++ b/05_react/uebungen/u10_input-price/src/App.jsx
@@ -1,4 +1,5 @@
 import InputAmount from './components/inputs/InputAmount';
+import InputPrice from './components/inputs/InputPrice';

 function App(props) {
  // const { } = props;
@@ -6,6 +7,10 @@ function App(props) {
  return (
    <div className="container py-5">
      <InputAmount />
+      <InputPrice />
+      <InputPrice currency="€" price={10.5} />
+      <InputPrice currency="$" price={19.5} />
+      <InputPrice currency="¥" price={21.5} />
    </div>
  );
 }
--- a/05_react/uebungen/u10_input-price/src/components/inputs/InputPrice.jsx
+++ b/05_react/uebungen/u10_input-price/src/components/inputs/InputPrice.jsx
@@ -0,0 +1,36 @@
+import { FaDollarSign, FaEuroSign, FaYenSign } from 'react-icons/fa6';
+
+const InputPrice = (props) => {
+  const { currency = '$' } = props;
+
+  return (
+    <div className="m-input-price input-price">
+      <div className="input-group mb-3">
+        {currency === '$' && (
+          <span className="input-group-text">
+            <FaDollarSign />
+          </span>
+        )}
+        <input
+          type="number"
+          name="price"
+          placeholder="0.00"
+          aria-label="Price"
+          className="form-control input-price"
+          step="0.01"
+        />
+        {currency === '€' && (
+          <span className="input-group-text">
+            <FaEuroSign />
+          </span>
+        )}
+        {currency === '¥' && (
+          <span className="input-group-text">
+            <FaYenSign />
+          </span>
+        )}
+      </div>
+    </div>
+  );
+};
+export default InputPrice;
--- a/05_react/uebungen/u10_input-price/src/styles/05_modules/_index.scss
+++ b/05_react/uebungen/u10_input-price/src/styles/05_modules/_index.scss
@@ -5,3 +5,4 @@
 // @import 'product-manager';
@import 'button';
@import 'inputAmount';
+@import 'inputPrice';
--- a/05_react/uebungen/u10_input-price/src/styles/05_modules/_inputPrice.scss
+++ b/05_react/uebungen/u10_input-price/src/styles/05_modules/_inputPrice.scss
@@ -0,0 +1,6 @@
+.m-input-price {
+  max-width: 200px;
+  input {
+    text-align: center;
+  }
+}
--- a/05_react/uebungen/u11_footer-main/package-lock.json
+++ b/05_react/uebungen/u11_footer-main/package-lock.json
@@ -1,16 +1,17 @@
 {
-  "name": "02_reusable-components",
+  "name": "u11_footer-main",
  "version": "0.0.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
-      "name": "02_reusable-components",
+      "name": "u11_footer-main",
      "version": "0.0.0",
      "dependencies": {
        "bootstrap": "^5.3.8",
        "react": "^19.2.8",
-        "react-dom": "^19.2.8"
+        "react-dom": "^19.2.8",
+        "react-icons": "^5.7.0"
      },
      "devDependencies": {
        "@types/react": "^19.2.17",
@@ -1622,6 +1623,15 @@
        "react": "^19.2.8"
      }
    },
+    "node_modules/react-icons": {
+      "version": "5.7.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.7.0.tgz",
+      "integrity": "sha512-LBLy340Rzqy6+/yVhZKT3B/QpP1BZaesGqasf09HPOBzRarcDIFH0WwXlXQfE7q7ipxK4MSiC5DIBWURCny6fw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
    "node_modules/readdirp": {
      "version": "5.1.1",
      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-5.1.1.tgz",
--- a/05_react/uebungen/u11_footer-main/package.json
+++ b/05_react/uebungen/u11_footer-main/package.json
@@ -12,7 +12,8 @@
  "dependencies": {
    "bootstrap": "^5.3.8",
    "react": "^19.2.8",
-    "react-dom": "^19.2.8"
+    "react-dom": "^19.2.8",
+    "react-icons": "^5.7.0"
  },
  "devDependencies": {
    "@types/react": "^19.2.17",
--- a/05_react/uebungen/u11_footer-main/src/App.jsx
+++ b/05_react/uebungen/u11_footer-main/src/App.jsx
@@ -1,12 +1,16 @@
+import FooterMain from './components/footers/FooterMain';
 import InputAmount from './components/inputs/InputAmount';

 function App(props) {
  // const { } = props;

  return (
-    <div className="container py-5">
-      <InputAmount />
-    </div>
+    <>
+      <div className="container py-5">
+        <InputAmount />
+      </div>
+      <FooterMain />
+    </>
  );
 }

--- a/05_react/uebungen/u11_footer-main/src/components/footers/FooterMain.jsx
+++ b/05_react/uebungen/u11_footer-main/src/components/footers/FooterMain.jsx
@@ -0,0 +1,38 @@
+const FooterMain = (props) => {
+  // const { } = props;
+
+  return (
+    <footer className="m-footer-main footer-main">
+      <div className="container">
+        <div className="row">
+          <div className="col-12 col-sm">
+            <div className="mb-3">
+              <h3>Address</h3>
+            </div>
+          </div>
+          <div className="col-12 col-sm">
+            <div className="mb-3">
+              <h3>Links</h3>
+              <nav className="menu-footer">
+                <ul className="list">
+                  <li>
+                    <a href="#">Imprint</a>
+                  </li>
+                  <li>
+                    <a href="#">Legal Policy</a>
+                  </li>
+                </ul>
+              </nav>
+            </div>
+          </div>
+          <div className="col-12 col-sm">
+            <div className="mb-3">
+              <h3>Socials</h3>
+            </div>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+};
+export default FooterMain;
--- a/05_react/uebungen/u11_footer-main/src/styles/05_modules/_footer-main.scss
+++ b/05_react/uebungen/u11_footer-main/src/styles/05_modules/_footer-main.scss
@@ -1,8 +1,8 @@
-.footer-main {
+.m-footer-main {
  background: $color-dark-blue; // Fallback für ältere Browser
  background: $linear-gradient-dark;
-  padding: 2rem 0;
-  .col {
+  padding: 3rem 0;
+  [class^='col'] {
    color: $color-white;
    h2,
    h3,
@@ -15,4 +15,23 @@
      letter-spacing: 2px;
    }
  }
+
+  .row {
+    flex-direction: column;
+    > div {
+      &:nth-child(1) {
+        order: 2;
+      }
+      &:nth-child(2) {
+        order: 1;
+      }
+    }
+  }
+
+  // @media (min-width:576px) {
+  @include media-breakpoint-up(sm) {
+    .row {
+      flex-direction: row;
+    }
+  }
 }
--- a/05_react/uebungen/u11_footer-main/src/styles/05_modules/_index.scss
+++ b/05_react/uebungen/u11_footer-main/src/styles/05_modules/_index.scss
@@ -1,4 +1,4 @@
-// @import 'footer-main';
+@import 'footer-main';
 // @import 'header-main';
 // @import 'logo-main';
 // @import 'menu-main';