Merge pull request #12 from TartejBrothers/Changes

Project page added

package.json

@@ -7,7 +7,9 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
+    "react-datepicker": "^4.25.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.21.1",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

src/App.js

@@ -1,8 +1,17 @@
 import HomePage from "./components/home";
+import ProjectPage from "./components/project";
+import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
+
 function App() {
   return (
     <div className="App">
-      <HomePage />
+      <Router>
+        <Routes>
+          <Route path="/" element={<HomePage />} />
+          <Route path="/project" element={<ProjectPage />} />
+          <Route path="/home" element={<HomePage />} />
+        </Routes>
+      </Router>
     </div>
   );
 }

src/components/home.jsx

@@ -6,6 +6,7 @@ import homeright from "./images/homeright.png";
 import vector1 from "./images/vectors/vector1.png";
 import vector2 from "./images/vectors/vector2.png";
 import vector3 from "./images/vectors/vector3.png";
+import { Link } from "react-router-dom";
 export default function homepage() {
   const changeType = () => {
     var passwordfield = document.getElementById("password");
@@ -55,9 +56,11 @@ export default function homepage() {
                 <input type="checkbox" name="remember" />
                 <p>Remember Me</p>
               </div>
-              <button type="submit" className="loginbutton">
-                Login
-              </button>
+              <Link to="/project">
+                <button type="submit" className="loginbutton">
+                  Login
+                </button>
+              </Link>
             </div>
           </form>
         </div>

src/components/project.jsx

@@ -0,0 +1,41 @@
+import React, { useState } from "react";
+import DatePicker from "react-datepicker";
+import "./styles/project.css";
+import "react-datepicker/dist/react-datepicker.css";
+import "./styles/global.css";
+export default function ProjectPage() {
+  const [startDate, setStartDate] = useState(new Date());
+  const [endDate, setEndDate] = useState(null);
+
+  return (
+    <div className="projectbody">
+      <h1>
+        SRM ATTEND<font color="#00ADB5">EASE</font>
+      </h1>
+      <h5>Pick a single date or add a range</h5>
+      <div>
+        <div className="dateform">
+          <DatePicker
+            wrapperClassName="date"
+            selected={startDate}
+            selectsStart
+            startDate={startDate}
+            placeholderText="Select Start Date"
+            endDate={endDate}
+            onChange={(date) => setStartDate(date)}
+          />
+          <DatePicker
+            wrapperClassName="date"
+            selected={endDate}
+            selectsEnd
+            startDate={startDate}
+            placeholderText="Select End Date"
+            endDate={endDate}
+            minDate={startDate}
+            onChange={(date) => setEndDate(date)}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/styles/global.css

@@ -0,0 +1,11 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap");
+* {
+  font-family: "Poppins", sans-serif;
+}
+html {
+  overflow-x: hidden;
+  color: #fff;
+}
+a {
+  text-decoration: none;
+}

src/components/styles/home.css

@@ -1,10 +1,4 @@
-@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap");
-* {
-  font-family: "Poppins", sans-serif;
-}
-html {
-  overflow-x: hidden;
-}
+
 .homecontent {
   display: flex;
   height: 100vh;

src/components/styles/project.css

@@ -0,0 +1,5 @@
+html {
+  background-image: url("../images/projectpage/Background.png");
+  padding: 20px;
+
+}