Skip to content
Vacation Planning Tool
Branch: master
Clone or download
Pull request Compare This branch is 4 commits behind Wai-Yan:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets
README.md
about.html
index.html
login.html

README.md

VAYCAYMODE

VAYCAYMODE is an application built for the traveller who can't take their mind off of their upcoming vacation. It gives the user a diversion from their every day tasks, and reminds them that better days are to come. It also serves as a planning tool, allowing the user to check the current weather forecast, create packing and to-do lists, and even organize their thoughts as a blog.

Motivation

This application was created both to satisfy a need for users, as well as to demonstrate our ability as full stack web developers. Our goal was to create a user experience that was simple, yet valuable. This project also allows for continuous development through sharability and increased integration with external services.

Code Style

Object-Oriented Programming (OOP).

Screenshots

Landing Page

Enter Trips

Technologies and frameworks used

Built with

Features

  • Each trip is tagged to the unique user, allowing all elements of the trip to persist upon reload
  • Users are able to store as many trips as they would like. They also have the ability to delete or remove trips
  • Flipclock allows users to determine to the second how far away a trip is. The flipping of the seconds also creates movement and a dynamic experience for the user
  • The current weather forecast allows users to plan for their trip days in advance
  • Google Maps allows a user to navigate the city they are attending to find destinations of interest
  • Packing list and blog allow users to organize their thoughts prior to departing
  • Responsive web application design allows different types of devices to access information.

Code Example

adds an item to the packing list

{noformat}

$("#addPackingItem").on("click", function(event) { event.preventDefault();

var itemValue = $("#packingListItem").val().trim();
if(!Array.isArray(packListArr)){
  packListArr = [];
}

$("#packingListItem").val("");

if (itemValue !== "") {
  packListArr.push(" " + itemValue);
  createPackingListObj(packListArr);
}

}); {noformat}

Installation

Requirements:

  • Web Browser
  • Web Developer Tools
  • Text Editor

API Reference

Open Weather API:

https://openweathermap.org/forecast5

Google Maps API:

https://developers.google.com/maps/documentation/javascript/3.exp/reference

Tests

Most tests for this application are run with a simple console.log()method. If the correct/expected information returns, then the team knows that the program is functioning.

$(document.body).on("click", ".edit-blog-button", function() {

var editCol = $(this).parent();
var wholeRow = editCol.parent()
var targetCol = wholeRow[0].childNodes[0];
var entryInfo = [targetCol.childNodes[0].innerText, targetCol.childNodes[2].innerText];

console.log(targetCol);
console.log(entryInfo[0]);
console.log(entryInfo[1]);

$("#myModal #blogPostTitle").val(entryInfo[0]);
$("#myModal #blogPostEntry").val(entryInfo[1]);

});

How to use?

The Website is divided into 7 main sections:

  1. Landing Page
  • First time visitors to the site can register by entering an existing google email address or by entering an email address and creating a new password
  • Firebase authentication allows verification of login data
  • A unique user is created in Firebase and all data generated throughout the application becomes associated with this unique user
  • returning users will remain logged in unless they explicitly click the log out button
  1. Google Autocomplete
  • Recommends cities based on proximity the user's current location
  • Returns metadata specific to the selected city which is then used to populate other components of the site
  • Ensures that the destination entered by the user exists and integrates with other API's
  1. Flipclock
  • Uses moment.js to calculate the difference in time between the destination date and the current time
  • Creates movement in the application to keep the user engaged
  1. Weather
  • Retrieves destination name from Firebase as entered by autocomplete
  • Provides a 5 day forecast at 24 hour intervals starting with the current time
  • The weather will be displayed as the day of the week, the temperature rounded to a whole number, and a representation of the weather as an image
  1. Packing List
  • An easy way for users to plan for their trips by creating a packing list in a place where they check frequently
  • List is saved in Firebase and attached to each individual trip allowing the user to create multiple lists
  • Users have the ability to add and delete items, as well as mark items as completed
  1. Google Maps API
  • Map of city autopopulates when a user creates a new trip
  • User can interact with the map based on Google Map built in functionality
  • Map takes in the latitude and longitude that is stored in Firebase and originates from the Google autocomplete object
  1. Blog
  • Custom created blog allows users to share their thoughts leading up to an after their trip
  • Blog is stored in Firebase and persists even after a user logs out
  • Blogs are destination specific, meaning each trip will have it's own series of blog posts
  • Blog entries display a title, the blog text, and the time the entry was submitted
  • Users have the ability to edit or delete an existing blog post

Credits

This application was built by Angela Kressin, Tak Nalut, Wai Yan, and Ali Kassam -- Full Stack Web Development Students at George Washington University's Coding Boot Camp.

You can’t perform that action at this time.