Created DateElement

Test
2023-05-02 14:22:14 +02:00 · 2023-04-27 15:42:37 +02:00
4 changed files with 47 additions and 14 deletions
@@ -25,6 +25,7 @@
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
+    <script src="../src/index.js"></script>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
@@ -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;
+}
@@ -1,23 +1,11 @@
 import logo from './logo.svg';
 import './App.css';
+import DateElement from './DateElement'

 function App() {
  return (
    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <DateElement count={0} />
    </div>
  );
 }
@@ -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 (
+        <>
+            <div className="container">
+                <p className="dateElement">{startDateString} - {endDateString}</p>
+            </div>
+        </>
+    );
+}
Author	SHA1	Message	Date
AlexE030	55dcd50659	Created DateElement	2023-05-02 14:22:14 +02:00
AlexE030	7867cf2a65	Test	2023-04-27 15:42:37 +02:00