V.d.burns

Assets/CSS/location.css

@@ -85,10 +85,10 @@ body, html{
 }
 
 .playMusicBtn {
-        width: 100px;
-        height: 30px;
-        margin-left: 5px;
-        border-radius: 15px;
+    width: 100px;
+    height: 30px;
+    margin-left: 5px;
+    border-radius: 15px;
 }
 
 .saveHikeBtn {
@@ -98,24 +98,32 @@ body, html{
     border-radius: 15px;
 }
 
-/* Card Design*/
+.addressBtn {
+    width: 100px;
+    height: 30px;
+    margin-left: 5px;
+    border-radius: 15px;
+}
+
+/* Card Design */
+#cards {
+    display:flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    padding:15px;
+} 
+
+
 .modal-card {
     border-radius:15px;
     padding: 20px;
     background-color:#666;
     color: #fff;
     height: 300px;
     width: 300px;
+
 }
 
- #cards {
-    display:flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    padding:15px;
-
-} 
-
 .modal-title {
     padding:20px;
     font-size: 30px;
@@ -162,5 +170,4 @@ body, html{
     display: none;
 }
 
-
-/* Need Mobile styling*/
+/* Need mobile styling */

Assets/CSS/savedhikes.css

@@ -47,24 +47,40 @@ p {
     justify-content:center;
 }
 
-.savedHikes {
-    display: flex;
+#cards {
+    display:flex;
+    flex-direction: row;
     flex-wrap: wrap;
-    align-items: center;
-    justify-content: center;
-
-}
+    padding:15px;
+} 
+
 
 .modal-card {
-     background-color: #f4f4f4;
-     height: 400px;
-     width: 400px;
-     display:flex;
-     justify-content: center;
-     align-items: center;
+    border-radius:15px;
+    padding: 20px;
+    background-color:#666;
+    color: #fff;
+    height: 300px;
+    width: 300px;
+
 }
 
-.playMusicBtn {
-    border-radius: 15px;
-    margin-top: 300px;
+.modal-title {
+    padding:20px;
+    font-size: 30px;
+    font-family: "lato", sans-serif;
+    line-height: 5px;
+}
+
+.modal-description {
+    font-size: 20px;
+    font-family: "lato", sans-serif;
+    line-height: 23px;
 }
+
+.modal-address {
+    font-size: 15px;
+    font-family: "lato", sans-serif;
+}
+
+/* Need mobile styling */

Assets/script/savedhikes.js

@@ -1,11 +1,12 @@
 var savedHikes = JSON.parse( localStorage.getItem( "HikeTunez Saved Hikes" ) );
 
 function saveHike(data) {
+    console.log("working?");
     if( savedHikes === null ) {
         savedHikes = [];
     }
     savedHikes.push(data);
     localStorage.setItem("HikeTunez Saved Hikes", JSON.stringify(savedHikes));
 }
 
-if (savedHikes) displayHikes(savedHikes);
+if (savedHikes) displayHikes(savedHikes);

Assets/script/script.js

@@ -27,12 +27,16 @@ function clearChildren( parent ) {
 
 function displayHikes(hikes){
     clearChildren(cards);
+    console.log(hikes);
     for (i = 0; i < hikes.length; i++) {
         //Building Card
         var infoCard = document.createElement("div");
         infoCard.setAttribute("id", `card${i}`);
         infoCard.setAttribute("class", "modal-card");
-        cards.appendChild(infoCard);
+        if (hikes[i].description !== "") {
+          cards.appendChild(infoCard);
+        }
+
 
         var title = document.createElement("h1");
         title.textContent = hikes[i].name;
@@ -61,7 +65,11 @@ function displayHikes(hikes){
             addressBtn.innerHTML = "Address";
             addressBtn.classList.add("addressBtn");
             infoCard.appendChild(addressBtn);
+
+
         }
+
+    }
 
 
         playMusicBtn.addEventListener("click", function () {
@@ -77,8 +85,8 @@ function displayHikes(hikes){
         }
         );
 
-    }
 }
+
 //this is the function for parks
 // link https://www.nps.gov/subjects/developer/api-documentation.htm#/
 function places() {
@@ -107,13 +115,9 @@ function places() {
     });
 }
 
-//  (res.data[i].listingDescription === null) {
-//     cards.style.display = "none"
 
-//This function pulls parks across the U.S.
-//The address pulling is not working. Returning object
 function parks() {
-  // clearSearch;
+
 
   console.log("hello");
   fetch(
@@ -206,18 +210,39 @@ function parks() {
     });
 }
 
-// if you want to use the forms value in the ns function.  You need to pass it in to the ns like this ns(elementname.value.trim()).
-// The ns function should have a parameter like this nps(search).  You can call the parameter whatever you want.  Just know that the parameter will take on the value of the argument that gets passed in.
-// elementname.value.trim() becomes search
+// /Modal Info for Address
 
-// Link hiking info to song data
 
-// Modal for hike information when clicked on
+addressBtn.addEventListener('click', function () {
 
-// Event listener for start hike button that prompts music to play
+        var addresses = document.createElement("p");
+        addresses.textContent = res.data[i].addresses[0];
+        addresses.classList.add("modal-address");
 
-// Local storage favorite hikes
+  var line1 = res.data[i].addresses[0].line1;
+  console.log(line1);
+  var city = res.data[i].addresses[0].city;
+  var state = res.data[i].addresses[0].stateCode;
+  var postal = res.data[i].addresses[0].postalCode;
+  console.log(line1 + ", " + city + ", " + state + ", " + postal);
+
+  line1 = document.createElement("p");
+  line1.classList.add("modal-address");
+  city = document.createElement("p");
+  city.classList.add("modal-address");
+  state = document.createElement("p");
+  state.classList.add("modal-address");
+  postal = document.createElement("p");
+  postal.classList.add("modal-address");
+
+  modalAddress.appendChild(line1);
+  modalAddress.appendChild(city);
+  modalAddress.appendChild(state);
+  modalAddress.appendChild(postal);
+});
 
-// Event listener for favorite hikes button
 
-// Page for favorite hikes
+// Modal for hike information when clicked on
+
+// Event listener for start hike button that prompts music to play
+

README.md

@@ -1 +1,10 @@
-# Hiketunez
+# Hiketunez
+https://github.com/Donchiz77/Hiketunez
+
+https://donchiz77.github.io/Hiketunez/savedhikes.html
+
+The website that we created is used to locating parks and places in North Caroline to hike at. The purpose of creating this site is to locate different hiking places plus have a soundtrack playing while you hike to get you feeling groovy.
+
+The front page is the about page and at the bottom there is a button to click on that will take you to the locator. On the locator page, you can either click the place, park or saved hikes buttons to then have the information generated in a custom card. Each card includes a button to save the hike to your favorites, a soundtrack button that plays the selected soundtrack for that hike, and an address button that will pop up a modal with the address of the park. The save hike button will save that hike infomation to the local storage to view later. If you click on the saved hikes button, it will take you to a page that will hold all the places you have saved.
+
+For the 2 API requirements, we used NPS.gov(for the park/places information) and Youtube (for the soundtracks). For the styling we did it from scratch and in some places used Bluma.

location.html

@@ -50,8 +50,8 @@
 
 
     <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
-    <script src="Assets/script/script.js"></script>
     <script src="Assets/script/player.js"></script>
     <script src="Assets/script/savedhikes.js"></script>
+    <script src="Assets/script/script.js"></script>
 </body>
 </html>

savedhikes.html

@@ -32,8 +32,13 @@
     <section class="address">
         <div class="modal-address"></div>
     </section>
+    <script src="Assets/script/savedhikes.js"></script>
     <script src="Assets/script/script.js"></script>
+<<<<<<< HEAD
     <script src="Assets/script/player.js"></script>
     <script src="Assets/script/savedhikes.js"></script>
+=======
+
+>>>>>>> 094e11674b5557817331176fad136a3985d83a49
 </body>
 </html>