diff --git a/README.md b/README.md index f6f43e71..c111567a 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,11 @@ + # TREK -TREK is a web application that displays deals on travel packages. +TREK is a web application that displays deals on travel packages. It was completed as an individual project at Ada Developers Academy. It was not deployed. This is a [stage 2](https://github.com/Ada-Developers-Academy/pedagogy/blob/master/rule-of-three.md) individual project. + ## Learning Goals - Reading data from an API using AJAX diff --git a/index.html b/index.html new file mode 100644 index 00000000..c84a346e --- /dev/null +++ b/index.html @@ -0,0 +1,87 @@ + + + + + World Treks + + + + + +
+

World Treks

+

explore our planet one step at a time

+
+ +
+
+
+ + + + + + + + + + + + + + + + + + + + + + diff --git a/styles.css b/styles.css new file mode 100644 index 00000000..1dba6748 --- /dev/null +++ b/styles.css @@ -0,0 +1,112 @@ +@import url( + 'https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1-rc1/css/foundation.css'); + + @import url( + "https://fonts.googleapis.com/css?family=Oswald"); + + + body { + position: relative; + display: inline-block; + background-image: url('http://geology.com/world/world-map-of-cities-at-night.jpg'); + width: 100%; + height: 30em; + z-index: -1; + top: 5.5em; + padding: 30px; + } + + table{ + table-layout: fixed; + width: 100%; + border-collapse: collapse; + border: 10px solid #323087; + margin-bottom: 3rem; + vertical-align: middle; + opacity: 0.8; + } + + + tr { + vertical-align: middle; + color: #323087; + } + + #vacations{ + padding: 100px; + margin: auto; + magin-top: 8%; + } + + .button, article section,li{ + color: #323087; + font-weight: bold; + font-size: 20px; + margin: 0; + background-color: #fbefb8; + } + + .button, li{ + background-color: #fbefb8; + } + + .button{ + border: 1px solid blue; + } + + + header { + top: 0px; + z-index: 1; + position: fixed; + width: 100%; + justify-content: space-around; + position: fixed; + } + header, article h2{ + display: flex; + align-content: center; + justify-content: space-around; + text-shadow: -1px 0 blue, 0 1px blue, 1px 0 blue, 0 -1px blue; + background-color: #323087; + color: #fbefb8; + font-family: impact; + margin-bottom: 0px; + border: 10px solid #323087; + } + article{ + margin-top: 8%; + display: block; + width: 100%; + border: 10px solid #323087; + + } + article nav{ + display: block; + width: 100%; + background-color: #fbefb8; + border: 10px solid #323087; + } + + article ul{ + display: flex; + justify-content: space-around; + margin: 0px; + padding: 10px; } + + article li { + display: inline-block; + list-style: none; + margin-top: 0px; + } + + article section{ + margin-top: 0px; + border: 10px solid #323087; + font-size: 16px; + background: white; + } + + h1{ + font-family: impact; + } diff --git a/trek.js b/trek.js new file mode 100644 index 00000000..a1b92112 --- /dev/null +++ b/trek.js @@ -0,0 +1,57 @@ +var url = 'https://trektravel.herokuapp.com/trips/'; + +var failureCallback = function () { + $("#errors").html("

AJAX request failed!

"); +}; + + +$(document).ready(function() { + var index = function (trekData) + { + var treksTemplate = _.template($('#trek-item-template').html()); + + + for (var i = 0; i < (trekData.length/2); i++) { + + var generatedHtml = treksTemplate({ + data: trekData[i], + }); + $('#vacations').append($(generatedHtml)); + } + + $('.load').click(function(event){ + id = this.attributes["data-trip-id"].value; + show = url + id; + $.get(show,singleCallback); + }); + }; + + var singleCallback = function (trekData){ + var trekTemplate = _.template($('#detailed-trip-template').html()); + + generatedHtml = trekTemplate({ data: trekData}); + + $('#vacations').empty(); + $('#vacations').show(); + $('#vacations').append($(generatedHtml)); + }; + + $('#vacations').on("click", "#index",function() { + $('#vacations').empty(); + $('#vacations').show(); + $.get(url, index); + }); + + $('#vacations').on('click', '#buy', function(event){ + var reserveTripTemplate = _.template($('#reserve-trek-template').html()); + event.preventDefault(); + var tripId = $(this).attr('data-trip-id'); + var reservationForm = reserveTripTemplate({ + tripId: tripId + }); + + $('vacations').append($(reservationForm)); + }); + + $.get(url, index); +});