diff --git a/index.html b/index.html new file mode 100644 index 00000000..ef911b9d --- /dev/null +++ b/index.html @@ -0,0 +1,65 @@ + + + + + TREK + + + + + + + + + + + + +

TREK

+ +
+ + + +
+ +
+ +
+ + + + diff --git a/index.js b/index.js new file mode 100644 index 00000000..4141d922 --- /dev/null +++ b/index.js @@ -0,0 +1,86 @@ +var url = "https://trektravel.herokuapp.com/trips"; + +var successCallback = function(response) { + console.log("Success"); + console.log(response); + + tripsTemplate = _.template($('#trips-item-template').html()); + for (var i = 0; i < response.length; i ++) { + var generatedHtml = tripsTemplate({trip: response[i]}); + $("#trips").append($(generatedHtml)); + } + + $('#load').hide(); +}; + +var failureCallback = function() { + console.log("Request failed"); + $("#errors").html("

AJAX request failed!

"); +}; + +var tripDetailCallback = function(response) { + console.log("Success"); + console.log(response); + var generatedHtml = tripsDetailTemplate({trip: response}); + $('.vacationDetails').empty().show().append($(generatedHtml)); + +// reservation functionality below + + $(".reserveForm").hide(); + + $('.reserveForm').submit(function(e) { + e.preventDefault(); + + var postUrl = $(this).attr("action"); + var formData = $(this).serialize(); + console.log(postUrl, formData); + + $.post(postUrl, formData, function(response) { + $('#message').html('

We saved you a spot!

'); + console.log(response); + console.log("reservation"); + }) + .fail(function(){ + $('#message').html('

Reservation failed

'); + }); + }); + +}; + + + +var clickHandler = function(event) { + $.get(url, successCallback).fail(failureCallback); +}; + +var clickHandlerDetails = function(event) { + $.get(url + '/' + this.id, tripDetailCallback).fail(failureCallback) + $('body').animate({ scrollTop: 0}, "slow"); + +}; + + + +function hideTripDetails() { + $(".vacationDetails").hide(); +} + +function reserve() { + $(".reserveForm").show(); +} + + + +// to get around scope +var tripsTemplate; +var tripsdetailTemplate; + +$(document).ready(function() { + tripsTemplate = _.template($('#trips-item-template').html()); + tripsDetailTemplate = _.template($('#trips-detail-template').html()); + + $('#load').click(clickHandler); + + $("body").on('click', ".trip-detail", clickHandlerDetails); + +}); diff --git a/trek.css b/trek.css new file mode 100644 index 00000000..87f21afc --- /dev/null +++ b/trek.css @@ -0,0 +1,80 @@ +@import url('https://fonts.googleapis.com/css?family=Monoton|Oxygen'); + + + +body { + background-image: url("https://wallpapersite.com/images/pages/pic_w/6500.jpg"); + background-size: cover; + background-repeat: no-repeat; + background-attachment: fixed; +} + +li, h1, h3, h4 { + font-family: 'Oxygen', sans-serif; +} +.title { + color: rgba(250, 250, 250, 0.5); + font-family: 'Monoton', cursive; + font-size: 12em; + position: fixed; + bottom: 0; + margin: 70px; + z-index: -100; +} + +#load { + position: fixed; + bottom: 0; + right: 0; + margin: 0 170px 180px 0; +} + +ul.vacation, .vacationDetails, .trip-detail, label { + color: white; +} + +ul.vacation { + background-color: rgba(0, 0, 0, 0.75); + list-style: none; + font-size: 1.5em; + padding: 25px; +} + +ul.vacation li:first-child { + font-stretch: expanded; +} + +ul.vacation li:nth-child(n+2) { + font-size: 0.75em; + display: inline-block; + margin-right: 20px; + color: #42f4e2; +} + +.vacationDetails { + background-color: rgba(0, 0, 0, 0.75); +} + +.trip-detail:hover { + color: #ff6d81; +} + +.button, .button:visited { + background-color: #ff324e; +} + +.button:hover { + background-color: #ff6d81; +} + + +ul.deets li { + color: #42f4e2; + display: inline-block; + margin-right: 90px; +} + +ul.deets li:nth-child(3) { + color: #ff6d81; + font-weight: bold; +}