Ada-C8 · lmarianarp19 · Nov 21, 2017 · Nov 22, 2017 · Nov 22, 2017 · Nov 22, 2017
diff --git a/trek.css b/trek.css
@@ -0,0 +1,42 @@
+
+
+.hero-section {
+ background: url('https://i.pinimg.com/originals/df/d0/00/dfd0000f193a9aa0864277462c6b063e.jpg') 50% no-repeat;
+ background-size: cover;
+ height: 300px;
+ text-align: center;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.button {
+ font-family: "times";
+ font-weight: bold;
+ font-size: 1.2em;
+ background-color: #1ccded;
+}
+
+main {
+ padding: 3% 1% 1% 2% ;
+}
+
+.good {
+ padding: 2%;
+ background-color: #ade9ff;
+ font-size: 1.2em;
+}
+
+.bad {
+ padding: 2%;
+ background-color: #fcc4d0;
+ font-size: 1.2em;
+}
+
+input:invalid {
+ box-shadow: 0 0 5px 1px red;
+}
+
+input:focus:invalid {
+ outline: none;
+}
diff --git a/trek.html b/trek.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+
+ <title>TravelNow</title>
+ <meta charset="utf-8">
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation-float.css" >
+ <link href="trek.css" media="screen" rel="stylesheet" type="text/css">
+
+ <script
+ src="https://code.jquery.com/jquery-3.2.1.min.js"
+ integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
+ crossorigin="anonymous"></script>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.js"></script>
+ <script type="text/javascript" src="trek.js"></script>
+ <!-- <script src="js/jquery.validate.js"></script> -->
+</head>
+<body>
+
+ <div class="hero-section">
+
+ <button type="button" class="button" id="load"> See trip options! </button>
+
+ </div>
+
+ <main>
+ <div id="fail"></div>
+
+ <section id="ajax-results">
+ </section>
+
+
+
+
+
+ <div class="row" ><div id="trips">
+ <div class="large-4 columns">
+ <h1></h1>
+ <ul></ul></div></div>
+
+ <div id="tripDetail"></div>
+
+ <form name="myForm" class="large-8 columns small-12 columns" id="reserveTrip" onsubmit="return validateForm()"></form>
+
+
+ </div>
+
+
+
+ </main>
+ </body>
+ </html>
diff --git a/trek.js b/trek.js
@@ -0,0 +1,131 @@
+$(document).ready( function() {
+
+ let loadTrips = function loadTrips(){
+ $('#load').hide();
+ // $('#trips').show();
+ const urlTripName = 'https://trektravel.herokuapp.com/trips';
+ $.get(urlTripName,
+ (response) => {
+ $('h1').html('List of Trips');
+ for (trip of response) {
+ let tripName = `<li><a data-id=${trip.id}> ${trip.name}</a>
+ </li>`
+
+ $('#trips ul').append(tripName);
+ }
+ }).fail((response) => {
+ let badRequest = `<p class=bad >Something went wrong loading trip options</p>`
+ $('#ajax-results').html(badRequest);
+ console.log("Didn't go so hot");
+ });
+ };
+
+ // End loadTrips
+
+ let loadOneTrip = function loadOneTrip(tripId){
+ $('.good').hide();
+ let urlTripDetails = 'https://trektravel.herokuapp.com/trips/'
+ urlTripDetails += tripId;
+ $.get(urlTripDetails,
+ function(response) {
+ let details = `
+ <div class="large-8 columns">
+ <h2> ${response.name}</h2>
+ <table>
+ <tr>
+ <th>Weeks</th>
+ <th>Cost</th>
+ <th>Destination</th>
+ <th>Continent</th>
+ <th>Category</th>
+ </tr>
+ <tr>
+ <td>${response.weeks}</td>
+ <td>${response.cost}</td>
+ <td>${response.destination}</td>
+ <td>${response.continent}</td>
+ <td>${response.category}</td>
+ </tr>
+ </table>
+ <p> ${response.about}</p>
+ <button id="reserve" class="button" data-trip=${response.id}> Reserve this trip! </button>
+ </div>`;
+
+ $('#tripDetail').html(details);
+ $('#tripDetail').show();
+ $('#reserve').on('click', function(){
+ let tripId = $(this).attr('data-trip');
+ generateForm(tripId);
+ });
+ }).fail((response) => {
+ let badRequest = `<p class=bad >Something went wrong loading this trip</p>`
+ $('#ajax-results').html(badRequest);
+ console.log("Didn't go so hot");
+ });
+ };
+ // end loadOneTrip
+
+
+ const successCallback = function(response) {
+ let generatedHMTL = `<p class="good"> You reserve this trip successfully </p>`
+ $('#ajax-results').html(generatedHMTL);
+ };
+
+
+ let generateForm = function generateForm(id){
+ $('#reserve').hide();
+ $('form').show();
+
+
+ event.preventDefault();
+ let form =
+ `<label for="name">Name:</label>
+ <input type="text" name="name" required></input>
+ <input type="hidden" name="trip_id" value="${id}" ></input>
+ <label for="email">Email:</label>
+ <input type="email" name="email" required></input>
+ <input id="submitForm" type="submit" class="button" value="Reserve Trip"></input>
+ `
+ // $('#reserveTrip').validate();
+ $('#reserveTrip').html(form);
+
+ $('#submitForm').on('click', function(){
+
+ event.preventDefault();
+
+ reserveTrip(id);
+ $('#tripDetail').hide();
+ $('form').hide();
+
+ });
+
+ };
+
+ let reserveTrip = function reserveTrip(tripId){
+
+ let urlReservation =
+ `https://trektravel.herokuapp.com/trips/${tripId}/reservations`;
+
+
+ let formData = $('#reserveTrip').serialize();
+ $.post(urlReservation, formData, successCallback).fail((response) => {
+ let badRequest = `<p class=bad >Something went wrong making your reservation</p>`
+ $('#ajax-results').html(badRequest);
+ console.log("Didn't go so hot");
+ });
+ };
+
+ // Events
+
+ $('ul').on('click', 'a', function(){
+
+ let tripId = $(this).attr('data-id');
+ loadOneTrip(tripId);
+ });
+
+ $('#load').on('click', function(){
+ $('.good').hide();
+ loadTrips();
+ });
+
+ });