California Tourism

A single tourism page for people visiting California using Google Maps & Places API as well as OpenWeather API

UX

I created this website to help tourist to California who are looking to learn a bit more about each area and help decide where to visit. I made it so users who would be visiting the area would have the information they needed and nothing else.

User Story 1: John Doe is in the area and wants to know the current weather. He can do so by click the areas "details" button.

User Story 2: Jane Doe wants to know what there is to do in the area. She can do so by clicking the "things to do" button.

User Story 3: Jeff Doe wants to read more about the team that made this site. he can do so by clicking "team" in the nav bar.

User Story 4: Jerry Doe wants to add an event to his calendar. He can do this by clicking on the "things to do" button and clicking the "add to calendar" button at the top of the modal.

User Story 5: Jeff Doe wants to read more about Yosemite. He can do so by clicking on the "details" button.

User Story 6: John Doe wants to read more about Golden State Travel. He can do so by clicking "About" in the nav bar.

User Story 7: Jane Doe wants to see what accomadations are in the area if any. She can do so by clicking the "accomedations" button for each area.

User Story 8: Jeff wants to read more about an area. He can do so by clicking on a map marker and clicking "More Information".

Features

User is able to view the local weather by clicking the details button for the specific area.
User is able to read about the area by clicking the details button for each area.
User is able to view local events by clicking the events button for each area.
User is able to use google maps by scrolling to the bottom of the page.
User is able to contact by clicking the contact button in the navigation bar.
User is able to read about the team by clicking the team button in the navigation bar.
User is able to read about the company by clicking the about button in the navigation bar.
User is able to see local accomadations by clicking the accomedations button for each area.
User is able to click on map markers to read a bit about the area and see a small picture.
User is able to read more about an area by clicking on a map marker and clicking "More Information".

Technologies Used

HTML
CSS
Bootstrap - The project uses bootstrap for the navbar, modals, and responsiveness.
jQuery - The project uses JQuery to simplify DOM manipulation.
Google Fonts - The project uses Google fonts in order to use the Roboto Font.
Font Awesome - The project uses Font Awesome in order to display various icons for social media and the hamburger menu in mobile view.
Google Maps - The project uses the google maps API to display a map of the local area and a search bar with auto complete.
Open Weather - The project uses open weather API to display the local weather.

Testing

I tested this out the old fashion way. One page at a time using a visual studio extension called Live Server. This extension lets you view a page as it would be displayed online.

This site was tested across various browsers and browser sizes. Multiple times I used W3 validator to debug and remove extra tags in my code. Using the contact page with an invalid email address you will get an message to correct it. Using a correct email and submitting will simply reset the form.

Deployment

This website was deployed through Github Pages directly from the master branch. In order to run the code locally simply download the files, start up Visual Studio Code or your IDE of choice to check it out. The difference between the development version and deployment version are little to none.

Things to do in the Future

I would like to evenutally make this site exclusivly for national parks in California. I would remove the cities and add the MANY parks large and small that California has to offer. Browings the National Parks Service website gave me this idea as it is a great souce of information for all the parks in the United States.