Ada-C8 · ghost · Nov 21, 2017 · Nov 22, 2017 · Nov 22, 2017 · Nov 22, 2017
diff --git a/index.html b/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>TREK</title>
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation-float.css" rel="stylesheet">
+ <link href="trek.css" media="screen" rel="stylesheet" type="text/css">
+ <link href="https://fonts.googleapis.com/css?family=Amatic+SC" rel="stylesheet">
+ </head>
+ <body>
+ <header class="header row">
+ <h1>TREK</h1>
+ <div id="fail"></div>
+ <button id="load" class="button"> Get trips! </button>
+ </header>
+
+ <h3></h3>
+ <div class="small-12 columns">
+ <div id="trips">
+ <ul></ul>
+ </div>
+ </div>
+
+ <script
+ src="https://code.jquery.com/jquery-3.2.1.min.js"
+ integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
+ crossorigin="anonymous"></script>
+
+ <script type="text/javascript" src="index.js">
+ </script>
+ </body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,87 @@
+$(document).ready(() => {
+
+ const loadTrips = function loadTrips() {
+ $.get(
+ 'https://trektravel.herokuapp.com/trips',
+ (response) => {
+ response.forEach((trip) => {
+ const tripsInfo = `<li id="trip-${trip.id}"><p id="${trip.id}">${trip.name}</p></li>`;
+ $('#trips ul').append(tripsInfo);
+ });
+ },
+ )
+ .fail(() => {
+ $('#fail').html('<p>Request was unsuccessful</p>');
+ }).always(() => {
+ console.log('Function: loadTrips (plural)');
+ });
+ }; // end of loadTrips
+
+ const loadTrip = function loadTrip(id) {
+ $.get(`https://trektravel.herokuapp.com/trips/${id}`,
+ (response) => {
+ const tripInfo =
+ `<div>
+ <p> Trip name: ${response.name}</p>
+ <p> Category: ${response.category}</p>
+ <p> Continent: ${response.continent}</p>
+ <p> Description: ${response.about}</p>
+ <p> Duration: ${response.weeks} weeks</p>
+ <p> Cost: ${response.cost}</p>
+ </div>`;
+
+ const reservation = `<form id="form" action="https://trektravel.herokuapp.com/trips/${id}/reservations" method="post">
+ <section>
+ <label>Name</label>
+ <input type="text" id="name" name="name"></input>
+ </section>
+
+ <section>
+ <label>Email</label>
+ <input type="text" id="email" name="email"></input>
+ </section>
+
+ <section class="button">
+ <button type="submit">Reserve Trip</button>
+ </section>
+ </form>`;
+
+ $('#trips ul li > div').hide();
+ $(`#trips ul li#trip-${id}`).append(tripInfo);
+ $(`#trips ul li#trip-${id}`).append(reservation);
+ },
+ ).fail(() => {
+ $('#fail').html('<p>Could not find</p>');
+ }).always(() => {
+ console.log('Function: loadTrip (single)');
+ });
+ }; // end of loadTrip
+
+ $('#trips ul').on('click', 'p', function() {
+ const tripID = $(this).attr('id');
+ loadTrip(tripID);
+ });
+
+ $('#load').click(() => {
+ loadTrips();
+ $('h3').text('Select a Trip');
+ $('#trips ul').empty();
+ });
+
+ $('body').on('submit', 'form', function (e) {
+ e.preventDefault();
+
+ const url = $(this).attr('action'); // this refers to the jquery object selected on it -- the specific form doing the submit
+ const formData = $(this).serialize();
+
+ console.log(formData);
+
+ $.post(url, formData, () => { // on submit the js is doing this post request
+ $('#form').html('<p> Reservation added </p>');
+ }).fail(() => {
+ $('#form').html('<p> Reservation failed </p>');
+ }).always(() => {
+ console.log("you're doing alright");
+ });
+ });
+}); // end of doc ready
diff --git a/trek.css b/trek.css
@@ -0,0 +1,44 @@
+header {
+ text-align: center;
+}
+
+h1 {
+ font-family: 'Amatic SC', cursive;
+ font-size: 6em;
+}
+
+#load {
+ background-color: white;
+ color: black;
+ font-family: 'Amatic SC', cursive;
+ font-size: 2em;
+}
+
+body {
+ background-color: #7DBEA5;
+}
+
+h3 {
+ text-align: center;
+ font-family: 'Amatic SC', cursive;
+}
+
+li {
+ background-color: white;
+ list-style: none;
+ border: solid;
+ border-color: #C0C0C0;
+ text-align: center;
+}
+
+p {
+ font-family: 'Amatic SC', cursive;
+}
+
+#form {
+ font-family: 'Amatic SC', cursive;
+}
+
+.button {
+ background-color: #C0C0C0;
+}