From c10e879bb529177d4dc1936822b0251b6ea42d10 Mon Sep 17 00:00:00 2001 From: Dauphine Burns Date: Fri, 11 Jun 2021 16:46:09 -0400 Subject: [PATCH 1/5] idk what this is --- Assets/.DS_Store | Bin 6148 -> 6148 bytes Assets/script/script.js | 7 ++++--- location.html | 3 ++- 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/Assets/.DS_Store b/Assets/.DS_Store index 57650ad22bbb86e779f8de40b83c960abd9042dc..48fa655d2f8a4ecfe6074e74635e3f3afbbd6567 100644 GIT binary patch delta 27 jcmZoMXfc@J&&aniU^g=(-)0^bd*+EHdp5Ik{N)D#cb^Ek delta 73 zcmZoMXfc@J&&ahGNg0{N$vZ{3Hej W1_2 - + + \ No newline at end of file From 094e11674b5557817331176fad136a3985d83a49 Mon Sep 17 00:00:00 2001 From: Dauphine Burns Date: Sat, 12 Jun 2021 10:04:23 -0400 Subject: [PATCH 2/5] working local storage --- .DS_Store | Bin 8196 -> 8196 bytes Assets/.DS_Store | Bin 6148 -> 8196 bytes Assets/CSS/location.css | 81 ++++++++++++++++++------------ Assets/CSS/savedhikes.css | 46 +++++++++++------ Assets/script/player.js | 8 +++ Assets/script/savedhikes.js | 19 +++++++ Assets/script/script.js | 96 +++++++++++++++++------------------- README.md | 8 ++- location.html | 8 ++- savedhikes.html | 2 + 10 files changed, 169 insertions(+), 99 deletions(-) create mode 100644 Assets/script/savedhikes.js diff --git a/.DS_Store b/.DS_Store index 24c23b27ccc3c5ad8273c2db98784a33d50b10e8..3a669f2972ae272e0eff930bd3e30c51b9eefdd4 100644 GIT binary patch delta 105 zcmZp1XmQwZT7dE7MG%O%9HZYS{5gh@SlXVdv0hqIu5m5uP?Hm^a Lk#G#N2N?Ya^oSAQ diff --git a/Assets/.DS_Store b/Assets/.DS_Store index 48fa655d2f8a4ecfe6074e74635e3f3afbbd6567..2b7d4ba25ed8af578ce4e0b5f1354e91c17633d3 100644 GIT binary patch delta 185 zcmZoMXmOBWU|?W$DortDU;r^WfEYvza8E20o2aMAD6lbLH}hr%jz7$c**Q2SHn1=X zZ02FHXO?7RC}v1zC}PNDC}1c_DlaZb%E?ax>O495E^7m~M0K^XiGhxSp{e2Ii!8E? zGbg`ik(ZqXlt response.json()) @@ -49,42 +43,45 @@ function places() { var title = document.createElement('h1'); title.textContent = res.data[i].title; infoCard.appendChild(title); + title.classList.add("modal-title"); var listingDescription = document.createElement('p'); listingDescription.textContent = res.data[i].listingDescription; infoCard.appendChild(listingDescription); - title.classList.add("modal-title"); listingDescription.classList.add("modal-description"); //Buttons var playMusicBtn = document.createElement('button'); playMusicBtn.innerHTML = 'Soundtrack'; playMusicBtn.classList.add("playMusicBtn"); - cards.appendChild(playMusicBtn); + infoCard.appendChild(playMusicBtn); var saveHikeBtn = document.createElement('button'); saveHikeBtn.innerHTML = 'Save Hike'; saveHikeBtn.classList.add("saveHikeBtn"); - cards.appendChild(saveHikeBtn); - - var addressBtn = document.createElement('button'); - addressBtn.innerHTML = 'Address'; - addressBtn.classList.add("addressBtn"); - cards.appendChild(addressBtn); + infoCard.appendChild(saveHikeBtn); + - playMusicBtn.addEventListener('click', playYouTube) - saveHikeBtn.addEventListener + playMusicBtn.addEventListener("click", function () { + $.get("https://openwhyd.org/adrien/playlist/61/?format=links").done(function ( + data + ) { + playPlaylist(data.split("\n")); + }); + }); + + saveHikeBtn.addEventListener('click', saveHike); + console.log(saveHike + 'hello'); // $('.saveBtn').on('click', function () { // var input = $(this).siblings('.description').val(); // var time = $(this).parent().attr('id'); - + // localStorage.setItem(time, input); // }); - + } + }); +} - } - }); -}; @@ -95,59 +92,59 @@ function places() { //This function pulls parks across the U.S. //The address pulling is not working. Returning object function parks() { - // clearSearch; + + clearSearch; console.log('hello'); fetch('https://developer.nps.gov/api/v1/parks?stateCode=nc&api_key=HKetcGoDSbeBjngR2as3P2XiTS7jM8yuNceJ2roz') .then(response => response.json()) .then(res => { - for (i=0; i -
+
+
@@ -45,7 +49,9 @@ + + \ No newline at end of file diff --git a/savedhikes.html b/savedhikes.html index 6a8d466..d7b6b61 100644 --- a/savedhikes.html +++ b/savedhikes.html @@ -27,6 +27,8 @@
+ + \ No newline at end of file From 928bacf447853e83633d1dcdf1c35ca7ae16fb0e Mon Sep 17 00:00:00 2001 From: Dauphine Burns Date: Sat, 12 Jun 2021 11:40:18 -0400 Subject: [PATCH 3/5] css styling --- Assets/CSS/location.css | 25 ++++++++++++++++++------- Assets/script/script.js | 6 ++---- README.md | 8 +++++++- 3 files changed, 27 insertions(+), 12 deletions(-) diff --git a/Assets/CSS/location.css b/Assets/CSS/location.css index 32e98f1..84b2d41 100644 --- a/Assets/CSS/location.css +++ b/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,10 +98,23 @@ body, html{ border-radius: 15px; } +.addressBtn { + width: 100px; + height: 30px; + margin-left: 5px; + border-radius: 15px; +} + +.buttons { + display: flex; + flex-direction: row; + flex-wrap: wrap; +} + /* Card Design*/ .modal-card { border-radius:15px; - padding: 20px; + padding: 40px; background-color:#666; color: #fff; height: 300px; @@ -112,8 +125,6 @@ body, html{ display:flex; flex-direction: row; flex-wrap: wrap; - padding:15px; - } .modal-title { diff --git a/Assets/script/script.js b/Assets/script/script.js index 90fe40b..28cc24b 100644 --- a/Assets/script/script.js +++ b/Assets/script/script.js @@ -206,11 +206,9 @@ 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 -// Link hiking info to song data + + // Modal for hike information when clicked on diff --git a/README.md b/README.md index c6fc875..1f01a8b 100644 --- a/README.md +++ b/README.md @@ -1 +1,7 @@ -# Hiketunez \ No newline at end of file +# Hiketunez + +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. \ No newline at end of file From 963bcdcaad61a409b98a3b654df8e408e01d92f0 Mon Sep 17 00:00:00 2001 From: Dauphine Burns Date: Sat, 12 Jun 2021 14:47:29 -0400 Subject: [PATCH 4/5] Javascript updates --- Assets/script/script.js | 40 ++++++++++++++++++++++++++++++++++++++-- README.md | 3 +++ location.html | 13 ------------- 3 files changed, 41 insertions(+), 15 deletions(-) diff --git a/Assets/script/script.js b/Assets/script/script.js index 4e5dd12..fcda097 100644 --- a/Assets/script/script.js +++ b/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() { @@ -202,8 +210,36 @@ function parks() { }); } +// /Modal Info for Address +addressBtn.addEventListener('click', function () { + + var addresses = document.createElement("p"); + addresses.textContent = res.data[i].addresses[0]; + addresses.classList.add("modal-address"); + + 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); +}); // Modal for hike information when clicked on diff --git a/README.md b/README.md index 4f5c7a2..3e0325a 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,7 @@ # 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. diff --git a/location.html b/location.html index 1ae080e..8e84823 100644 --- a/location.html +++ b/location.html @@ -41,15 +41,7 @@ -<<<<<<< HEAD -======= -
- ->>>>>>> 094e11674b5557817331176fad136a3985d83a49
@@ -60,11 +52,6 @@ -<<<<<<< HEAD -======= - - ->>>>>>> 094e11674b5557817331176fad136a3985d83a49 \ No newline at end of file From 8e0f51597fc0e4d5f95e6b3d89802122cbe12e67 Mon Sep 17 00:00:00 2001 From: Dauphine Burns Date: Tue, 15 Jun 2021 15:25:31 -0400 Subject: [PATCH 5/5] dont merge --- .DS_Store | Bin 8196 -> 8196 bytes Assets/.DS_Store | Bin 8196 -> 8196 bytes Assets/CSS/.DS_Store | Bin 6148 -> 6148 bytes 3 files changed, 0 insertions(+), 0 deletions(-) diff --git a/.DS_Store b/.DS_Store index 3a669f2972ae272e0eff930bd3e30c51b9eefdd4..d39c6b9d02dd3a13d660e658adca45bd4cb127f4 100644 GIT binary patch delta 78 zcmZp1XmOa}&nUPtU^hRb;A9?wYIY6=69xkYlgR-h61+_53=9l<|G|J^adD&$PO_UA=qMPP8g6bEoWjh+=&&(Sig`1;#5b0W H8SKmeo23sk diff --git a/Assets/.DS_Store b/Assets/.DS_Store index 2b7d4ba25ed8af578ce4e0b5f1354e91c17633d3..2850f5a87438bd53008670d44d7778721e0924bb 100644 GIT binary patch delta 103 zcmZp1XmOa}&nUPtU^hRb;A9>F>&eN&t!##dItqpslP?I!P393%nJgrD3R75Z@=Brg nGM+j4$w@i+Nem1O0t^g{-9TFJKNv7DZ1xalV%%IM(!~t`F)JU_ delta 96 zcmZp1XmOa}&nU1lU^hRbz+@f)YsTY~?+Z3?id9z|>nIqT8BCTJk!74d`J;e5;T9~AOHXW diff --git a/Assets/CSS/.DS_Store b/Assets/CSS/.DS_Store index a648953c655dc581a9bf44fd63f5aa9ee6136370..cfb388b78b5f27c68dc6ab7ea1c03f03f81373a5 100644 GIT binary patch delta 73 zcmZoMXfc@JFUrEez`)4BAi%(o%uviw?3t6FoRl+pBja*zkPJJ634;NH$z%maF+Rp_ Wpn%?gFkoQV%)@w=Z8JN^Uw!~%L=%?) delta 47 zcmZoMXfc@JFUrioz`)4BAi%&-!jQ?3&ydHU$B;bvA>(pJ=FL`&XW1q;=xt`__{$Ff D?q>_C