cis3296f23 · amyollomani1 · Mar 15, 2024 · Mar 19, 2024 · Mar 20, 2024 · Mar 20, 2024
diff --git a/exploring-national-parks/docs/ParkSearch_Components_ParkSearchWelcome.jsx.html b/exploring-national-parks/docs/ParkSearch_Components_ParkSearchWelcome.jsx.html
@@ -20,10 +20,6 @@
     <h1 class="page-title">Source: ParkSearch/Components/ParkSearchWelcome.jsx</h1>
 
 
-
-
-
-
     <section>
         <article>
             <pre class="prettyprint source linenums"><code>import React from 'react'

diff --git a/exploring-national-parks/package-lock.json b/exploring-national-parks/package-lock.json
diff --git a/exploring-national-parks/package.json b/exploring-national-parks/package.json
@@ -3,14 +3,17 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@googlemaps/js-api-loader": "^1.16.6",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/react-router-dom": "^5.3.3",
+    "google-map-react": "^2.2.1",
     "moment": "^2.29.4",
     "rc-footer": "^0.6.8",
     "react": "^18.2.0",
     "react-calendar": "^4.6.1",
+    "react-datepicker": "^6.4.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.18.0",
     "react-scripts": "5.0.1",

diff --git a/exploring-national-parks/public/index.html b/exploring-national-parks/public/index.html
@@ -3,10 +3,22 @@
   <head>
     <meta charset="utf-8" />
     <title>Exploring National Parks</title>
-
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
   </body>
+  <script>window.twttr = (function(d, s, id) {
+    var js, fjs = d.getElementsByTagName(s)[0],  t = window.twttr || {};
+    if (d.getElementById(id)) return t;
+    js = d.createElement(s); js.id = id;
+    js.src = "https://platform.twitter.com/widgets.js";
+    fjs.parentNode.insertBefore(js, fjs);
+    t._e = []; t.ready = function(f) {
+      t._e.push(f);
+    };
+    return t;
+  }(document, "script", "twitter-wjs"));
+  </script>
+
 </html>
diff --git a/exploring-national-parks/src/GlobalComponents/Navbar.jsx b/exploring-national-parks/src/GlobalComponents/Navbar.jsx
@@ -31,6 +31,12 @@ const Navbar = () => {
                 <li>
                     <NavLink to="/ParkPlan">Park Planner</NavLink>
                 </li>
+                <li>
+                    <NavLink to="/TUNews">TUNews</NavLink>
+                </li>
+                <li>
+                    <NavLink to="/Maps">Maps</NavLink>
+                </li>
             </ul>
         </nav>
     )

diff --git a/exploring-national-parks/src/Maps.js b/exploring-national-parks/src/Maps.js
@@ -0,0 +1,31 @@
+import React from "react";
+import GoogleMapReact from 'google-map-react';
+
+const AnyReactComponent = ({ text }) => <div>{text}</div>;
+
+export default function Maps(){
+  const defaultProps = {
+    center: {
+      lat: 39.9812,
+      lng: -75.1554
+    },
+    zoom: 11
+  };
+
+  return (
+    // Important! Always set the container height explicitly
+    <div style={{ height: '100vh', width: '100%' }}>
+      <GoogleMapReact
+        bootstrapURLKeys={{ key: "" }}
+        defaultCenter={defaultProps.center}
+        defaultZoom={defaultProps.zoom}
+      >
+        <AnyReactComponent
+          lat={39.9812}
+          lng={-75.1554}
+          text="My Marker"
+        />
+      </GoogleMapReact>
+    </div>
+  );
+}
diff --git a/exploring-national-parks/src/ParkInfo/Components/ParkInfoComponent.jsx b/exploring-national-parks/src/ParkInfo/Components/ParkInfoComponent.jsx
@@ -122,7 +122,8 @@ function ParkInfoComponent() {
                                         </ul>
                                         <br></br>
                                         <p>{park.description}</p>
-                                        <a href={park.url} target="_blank" rel="noreferrer">For More Information</a>
+                                        <a href={park.url}><button className="park-info-button" target="_blank" rel="noreferrer">For More Information</button></a>
+
                                         <br></br>
                                         <br></br>
                                         <br></br>

diff --git a/exploring-national-parks/src/ParkPlan/Components/Filtering.jsx b/exploring-national-parks/src/ParkPlan/Components/Filtering.jsx
@@ -105,14 +105,22 @@ const Filtering = ({updateParkCode, updateDates, updateActivities}) => {
             <div className="plan-calendar-background">
             <div className="plan-calendar">
                 <h2 id="date-range-title">Select a Date Range</h2>
+                <div><label for="userInput">Enter Start Date: </label></div>
+
+                <input type="date" id="userInput"></input>
+                <button onclick="getDate()">Submit</button>
+                <div><label for="userInput">Enter End Date: </label></div>
+                <input type="date" id="userInput"></input>
+                <button onclick="getDate()">Submit</button>
+
                 <Calendar 
                     selectRange={true}
                     hover={true}
                     allowPartialRange={true}
                     defaultValue={[new Date(), new Date()]}
                     returnValue={"start"}
                     onChange={setStartDate}
-                //    max date should be 7 days from the selected start date
+                //  max date should be 7 days from the selected start date
 
                 /> 
             </div>

diff --git a/exploring-national-parks/src/ParkPlan/Components/Schedule.jsx b/exploring-national-parks/src/ParkPlan/Components/Schedule.jsx
@@ -10,6 +10,8 @@
  */
 import React, { useEffect } from 'react'
 import { useState } from 'react'
+import DatePicker from 'react-datepicker';
+
 import { FetchForecast } from '../Functions/FetchForecast';
 import { act } from 'react-dom/test-utils';
 import { FetchThingsToDo } from '../Functions/FetchThingsToDo';
@@ -18,7 +20,11 @@ import { FetchPlaces } from '../Functions/FetchPlaces';
 import { FetchPeople } from '../Functions/FetchPeople';
 import '../../Style/parkPlanning.css';
 
+
+
 const Schedule = ({ dates, parkCode, activities}) => {
+
+
     const [startDate, setStartDate] = useState();
     const [endDate, setEndDate] = useState();
     const [datesArray, setDatesArray] = useState([]);
@@ -54,8 +60,6 @@ const Schedule = ({ dates, parkCode, activities}) => {
         }
         if (dates !== null) {
             try {
-
-
                 setStartDate(dates[0].toLocaleDateString());
                 if (dates[1]) {
                     setEndDate(dates[1].toLocaleDateString());

diff --git a/exploring-national-parks/src/ParkPlan/Functions/getDate.js b/exploring-national-parks/src/ParkPlan/Functions/getDate.js
@@ -0,0 +1,4 @@
+function getDate() {
+    var date = document.getElementById('userInput').value;
+    console.log(date);
+}
diff --git a/exploring-national-parks/src/Style/Maps.css b/exploring-national-parks/src/Style/Maps.css
diff --git a/exploring-national-parks/src/Style/tuNews.css b/exploring-national-parks/src/Style/tuNews.css
@@ -0,0 +1,5 @@
+.tuNews-parent{
+    margin-top: 5.5rem;
+    display: flex;
+    justify-content: center;
+}
diff --git a/exploring-national-parks/src/TUNews.js b/exploring-national-parks/src/TUNews.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import './Style/tuNews.css';
+
+const Twitter = () => (
+    <a href="https://twitter.com/TempleUniv?ref_src=twsrc%5Etfw"
+      className="twitter-timeline"
+      data-tweet-limit="1"
+      data-height="700"
+      data-width="700"
+    >
+        tweet from TempleUniv
+    </a>
+  );
+
+function TUNews(){
+    return(
+        <div className='tuNews-parent'>
+            {Twitter()} 
+        </div>
+    );
+}
+export default TUNews;