diff --git a/projekt/public/index.html b/projekt/public/index.html index aa069f2..3bb39c0 100644 --- a/projekt/public/index.html +++ b/projekt/public/index.html @@ -25,6 +25,7 @@ Learn how to configure a non-root public URL by running `npm run build`. --> React App + diff --git a/projekt/src/App.css b/projekt/src/App.css index 74b5e05..a5b2e86 100644 --- a/projekt/src/App.css +++ b/projekt/src/App.css @@ -1,3 +1,7 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + .App { text-align: center; } @@ -36,3 +40,18 @@ transform: rotate(360deg); } } + +.container { + width: 100%; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; +} + +.dateElement { + background-color: chartreuse; + border-radius: 5px; + border-width: 0px; + width: 200px; +} diff --git a/projekt/src/App.js b/projekt/src/App.js index 3784575..bd08885 100644 --- a/projekt/src/App.js +++ b/projekt/src/App.js @@ -1,23 +1,11 @@ import logo from './logo.svg'; import './App.css'; +import DateElement from './DateElement' function App() { return (
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
+
); } diff --git a/projekt/src/DateElement.jsx b/projekt/src/DateElement.jsx new file mode 100644 index 0000000..9bf35d8 --- /dev/null +++ b/projekt/src/DateElement.jsx @@ -0,0 +1,25 @@ +function addDays(date, days) { + let result = new Date(date); + result.setDate(result.getDate() + days); + return result; +} + +export default function DateElement(props){ + let startDate; + let endDate; + const currDate = new Date(); + + startDate = addDays(currDate, (currDate.getDay()-1)*-1); //berechnet den Montag der aktuellen Woche + startDate = addDays(startDate, props.count*7); //erhöht das Datum um 7 Tage für jede Woche, die weiter geklickt wurde. + endDate = addDays(startDate, 7); + + const startDateString = `${startDate.getDate()}.${startDate.getMonth()+1}.${startDate.getFullYear()}`; + const endDateString = `${endDate.getDate()}.${endDate.getMonth()+1}.${endDate.getFullYear()}`; + return ( + <> +
+

{startDateString} - {endDateString}

+
+ + ); +} diff --git a/projekt/src/Test.jsx b/projekt/src/Test.jsx deleted file mode 100644 index e69de29..0000000