diff --git a/README.md b/README.md index 7ed589e..84fa828 100644 --- a/README.md +++ b/README.md @@ -2,106 +2,40 @@ -### Description -* In this Skill-based Assessment, you will be creating a small website and you get to pick what is the website about. The main purpose of this SBA is to test your skills in implementing a clean HTML structure that follows the methodologies of visual design, and styling your site so that it is user-friendly. +### General Description & Navigation -* You have the entire day for this SBA. Make sure to check in with your instructor for approval of your idea. Your work will be graded based on the below technical requirements. Also, creativity always works in your favor. +* GitHub Pages link: https://ghassannasr.github.io/sba.javascript_3-page-website/ -* Since this is your first time creating a 3 page website, keep it simple. Keeping it simple is very important. It ensures that you can complete this project within the given time and also gives you a better idea of what can you get done in the given time if you were to do it again with more requirements. +* For this assignment I implemented a 3-page mini website as a celebration of parks in Charleston, SC, and parks in general. -* Once you got your idea, think in the user’s perspective when creating the website.  You like your users to have a good experience when interacting with your site. This gives you a better chance of users trusting your site and coming back for more. For this SBA, don’t worry too much about the content. There are many places you can get free content to display on your site. Concentrate more on the web site's structure and grid system. +* I wanted the look and feel of the pages to reflect the vibrance of spring in Charleston ... beautiful blue skies and the colors of cherry and almond blossoms. +* The entry page is simple. It has a fully-responsive navbar and content, including a little footer. I spent some time experimenting with ways of laying out text on the blue sky, trying to immitate the feel of clouds. -* Some resources for free content: - * Photos: `https://www.pexels.com/search/template/` - * Text: `https://www.lipsum.com/` - * GIFs: `https://www.motionelements.com/stock-image-10116013-business-and-startup-4k` +* There are two navigation links at the top that link to other pages: 1) A "Register" link to a page for signing up for a newsletter, and 2) a link in the dropdown to the "Parks" page that provides an interface to an API endpoint at the National Park Service here: https://www.nps.gov/subjects/developer/api-documentation.htm#/visitorcenters/getVisitorCenters . The other links are provided but not implemented. -* Useful API sites: - * https://rapidapi.com/ (Links to an external site.) - * https://any-api.com/ (Links to an external site.) - * https://github.com/toddmotto/public-apis#public-apis- (Links to an external site.) - * https://apilist.fun/ + * The nav bar at the top has identical html on every page of the website. I therefore produce the nav bar html in a utility script residing in header-functions.js, and I call that function from withing + - - - - + + + + + + +
+ +
+
+
+ - - - + Just filler for now, hardcoded the height of 600px +
+ --> - The quickest of brown foxes. +
+
+

+ Spring in
     Charleston.
      A thing + to
      Remember +

+
+
+
+
+
+ +
- - - - - +
+ - - - + + + + + + + + + \ No newline at end of file diff --git a/js/footer-functions.js b/js/footer-functions.js index c7d6a2c..cb2bfbb 100644 --- a/js/footer-functions.js +++ b/js/footer-functions.js @@ -1,2 +1,44 @@ -w3IncludeHTML(); -document.write(''); + +loadBootstrapScripts(); + + +function loadBootstrapScripts() { + document.write(` + + + + `); + +} + + +//email field validation +let emailField = document.getElementById("inputEmail4"); +console.log(emailField); + +emailField.addEventListener('blur', validateEmail); + + +function validateEmail(e) { + console.log("Just lost focus"); + let regex = new RegExp(/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/); + let regex2 = new RegExp(/(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/); + + + let inputText = e.target.value; + if (inputText == "") { + console.log("You entered nothing"); + //alert("you entered nothing"); + } + if (inputText.match(regex2)) + alert("Great format!"); + else + alert("Incorrect email format!"); +} + diff --git a/js/header-functions.js b/js/header-functions.js index ff2614d..205ba90 100644 --- a/js/header-functions.js +++ b/js/header-functions.js @@ -1,11 +1,64 @@ -// import jquery-3.4.0 -document.write(''); -document.write(''); -// import `utils.js` -document.write(''); +loadCDNs(); + + +function writeNavbarHtml() { + + document.write(` + + `); +} + +function writeFooterHTML() { + document.write(` +
+ I'm a footer, but I'm proud -- Ghassan Nasr +
+ + `); +} + +function loadCDNs() { + document.write(` + + + + +`); +} -// import w3-include -document.write(''); diff --git a/js/parks.js b/js/parks.js new file mode 100644 index 0000000..b756c8d --- /dev/null +++ b/js/parks.js @@ -0,0 +1,44 @@ +let button = document.getElementById("gn-park-search"); +button.onclick = makeAsynchronousRequestToWebserver; + +querySearchCodes = { + "Parks": "parks", + "Things To DO": "thingstodo", + "Campgrounds": "campgrounds", + "Visitor Centers": "visitorcenter", +} + +function makeAsynchronousRequestToWebserver() { + let xmlhttp = new XMLHttpRequest(); + xmlhttp.onreadystatechange = function () { + if (this.readyState == 4 && this.status == 200) { + writeResultsToDiv(this.responseText); + } + }; + + let sc = document.getElementById("gn-outdoor-categories"); + let searchCategory = sc.options[sc.selectedIndex].text.split(" ").join("").toLowerCase(); + let ss = document.getElementById("gn-state-locations"); + let searchState = ss.options[ss.selectedIndex].text; + + let apiKey = "qYFp1dJ1RrZI22xXBoLNe6G1iipJubnyLnBfQ4yY"; + queryString = `https://developer.nps.gov/api/v1/${searchCategory}?stateCode=${searchState}&api_key=${apiKey}`; + + console.log(searchCategory, searchState); + + xmlhttp.open("GET", queryString, true); + xmlhttp.send(); +} + +function writeResultsToNewWindow(response) { + var newWindow = window.open("", "Test", "width=600,height=700,scrollbars=1,resizable=1"); + var html = `${response}`; + newWindow.document.open(); + newWindow.document.write(response); +} + +function writeResultsToDiv(response) { + let outputDiv = document.getElementById("gn-output-pane"); + outputDiv.style.height = "auto"; + outputDiv.innerHTML = response; +} diff --git a/js/parks_old.js b/js/parks_old.js new file mode 100644 index 0000000..27dff14 --- /dev/null +++ b/js/parks_old.js @@ -0,0 +1,48 @@ + + +let parkSearchButton = document.getElementById("gn-park-search"); +parkSearchButton.addEventListener('click', getParkInfo); + + +async function getParkInfo() { + let result; + try { + let parkInfo = await fetchParkInfoFromAPI2(); + //console.log(result); + //alert("success"); + result = parkInfo; + document.getElementById("gn-output-pane").innerHtml = result; + } + catch(err) { + //console.log(err); + result = `Sorry, the search returned an error: ${err}`; + //console.log(result); + //alert("success"); + document.getElementById("gn-output-pane").innerHtml = result; + } + + //console.log("here") + +} + +function fetchParkInfoFromAPI() { + const newLocal = "https://jsonplaceholder.typicode.com/todos/1"; + + //const newLocal = "https://developer.nps.gov/api/v1/parks?parkCode=acad&api_key=qYFp1dJ1RrZI22xXBoLNe6G1iipJubnyLnBfQ4yY"; + return fetch(newLocal) + .then(response => response.json()) + .then((result) => { + return result; + }) + .catch((err) => { + console.log(err); + + return Promise.reject('FAILURE'); + }); +} + +function fetchParkInfoFromAPI2() { +fetch('https://jsonplaceholder.typicode.com/todos/1') + .then(response => response.json()) + .then(json => console.log(json)) +} diff --git a/js/utils.js b/js/utils.js deleted file mode 100644 index bf0c12e..0000000 --- a/js/utils.js +++ /dev/null @@ -1,26 +0,0 @@ -// Utility JS functions are to be defined here -function resizeIFrameToFitContent( iFrame ) { - iFrame.width = iFrame.contentWindow.document.body.scrollWidth; - iFrame.height = iFrame.contentWindow.document.body.scrollHeight; -} - -// used to fetch all methods of an arbitrary object to display to client -function getAllMethodsOfObejct(obj) { - var result = []; - for (var id in obj) { - try { - if (typeof(obj[id]) == "function") { - result.push(id + ": " + obj[id].toString()); - } - } catch (err) { - result.push(id + ": inaccessible"); - } - } - return result; - } - - - -function loadHtml(elementId, fileName) { - $(elementId).html(''); -}; diff --git a/parks.html b/parks.html new file mode 100644 index 0000000..bdf9f61 --- /dev/null +++ b/parks.html @@ -0,0 +1,113 @@ + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ +
+ +
+ +
+ +
+

Outdoor Fun Infogrounds!

+
+
Search for parks, campgrounds, visitor centers, and things to do.
+

More coming soon ...

+ + + +
+ +
+
+
+
+ + +
+
+ + +
+ +
+
+ + +
+ + +
+

... Search will go here in JSON format, not so pretty for now! +
+ +
+
+
+ +
+ +
+ +
+ + + + + + + + + + + + + \ No newline at end of file diff --git a/register.html b/register.html new file mode 100644 index 0000000..013e2b4 --- /dev/null +++ b/register.html @@ -0,0 +1,126 @@ + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ + +
+
+
+
+
+
+

Register for Our Newsletter

+

Receive our monthly newsletter about our Charleston parks.

+
+
+
+
+ +
+ +
+ +
+
+
+
+
+ + +
+
+
+
+
+ + +
+
+ + +
+
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ + +
+ +
+
+
+ + +
+ +
+
+ + + + + + + + + + + + + + \ No newline at end of file