Merge pull request #31 from cis3296f23/Call_NPS_API_for_proof_of_concept

minimal styling
cis3296f23 · Nov 10, 2023 · 3008c72 · 3008c72
2 parents 2ab2e66 + 473117f
commit 3008c72
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 12 deletions.
diff --git a/exploring-national-parks/public/index.html b/exploring-national-parks/public/index.html
@@ -2,23 +2,17 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>React App</title>
+    <title>Exploring National Parks</title>
+    <link href="style.css" rel="stylesheet" type="text/css" media="all">
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
+
     <div id="activities" classname="activities">
-      <input type="text" placeholder="Search for activities..." id="activityInput">
+      <center><h1>Exploring National Parks</h1>
+      <input type="text" placeholder="Search for activities..." id="activityInput"></center>
+      <br>
       <div id="activitiesDropdown"></div>
     </div>
   </body>

diff --git a/exploring-national-parks/public/style.css b/exploring-national-parks/public/style.css
@@ -0,0 +1,19 @@
+body{
+    background-color: rgb(155, 184, 160);
+    color: rgb(19, 35, 19);
+    /*width: 100%; height: 100%; min-height:100vh;
+    display: flex; flex-direction: column;*/
+}
+
+#activities{
+    margin-left: auto;
+    margin-right: auto;
+    width: 30%;
+
+    /*min-width: 500px;*/
+}
+
+#activitiesDropdown{
+    color: black;
+}
+
diff --git a/exploring-national-parks/src/NPSAPI.js b/exploring-national-parks/src/NPSAPI.js
@@ -1,4 +1,5 @@
 import React, {useState, useEffect} from 'react';
+import './api.css';
 
 function Activities() {
     const [posts,setPosts] = useState([]);

diff --git a/exploring-national-parks/src/api.css b/exploring-national-parks/src/api.css
@@ -0,0 +1,26 @@
+
+button{
+    width: 50%;
+}
+
+a{
+    text-decoration: none;
+}
+
+a:hover{
+    text-decoration: underline;
+}
+
+.data-container{
+    padding: 10px 10px 10px 10px;
+    /*max-inline-size: 100px;*/
+    border-style: dotted;
+}
+
+.post-card{
+    height: 30px;
+    text-align: center;
+    margin-left: auto;
+    margin-right: auto;
+    width: 30%;
+}