Skip to content

Stacks - Jackie - Trek #25

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jackiewatanabe wants to merge 9 commits into
base: master
Choose a base branch
from
Open

Stacks - Jackie - Trek #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
3103acb
created initial files
jackiewatanabe May 24, 2017
e2a2cee
got names of trips to load
jackiewatanabe May 24, 2017
5eb7f13
got other information to load
jackiewatanabe May 24, 2017
1185984
added clickhandler so clicking button will load information
jackiewatanabe May 24, 2017
dd5fb0e
created new clickhandler and callback function so you can click on a …
jackiewatanabe May 24, 2017
c40d44e
added class and dynamically created ids so clicking on a trip takes i…
jackiewatanabe May 24, 2017
672fcf1
added reserve form in html template
jackiewatanabe May 24, 2017
8bf63b0
added post request in individual trip callback
jackiewatanabe May 24, 2017
0d18fd8
added styling and cleaned up code
jackiewatanabe May 26, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 87 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles/foundation.css">
<title>Treeeekkkkk</title>
</head>
<body>
<section id="errors">

</section>
<section id="message">

</section>
<button class="button" id="load"> Take me away! </button>
<div id="trips-list"></div>
<script id="trips-template" type="text/template">
<section class="individual-trip" id="<%- data.id %>">
<h1>
<%- data.name %>
</h1>
<p>
<strong>Continent:</strong>
<%- data.continent %>
</p>
<p>
<strong>Weeks:</strong>
<%- data.weeks %>
</p>
</section>
</script>


<div id="trip" class="row"></div>

<script id="trip-template" type="text/template">
<section class="column large-6 small-12">
<h1 class="trip-name">
<%- data.name %> - TripID: <%- data.id %>
</h1>
<h3>
<%- data.continent %>
</h3>
<h3>
Weeks: <%- data.weeks %>
</h3>
<h3>
Category: <%- data.category %>
</h3>
<h3>
Price: <%- data.cost %>
</h3>
<p>
<%- data.about %>
</p>

</section>
<section class="column large-5 small-12" id="reserve-form">
<h2>Reserve this trip!</h2>
<form action="https://trektravel.herokuapp.com/trips/<%- data.id %>/reserve" method="post">
<section>
<label>Name</label>
<input type="text" id="name" name="name"></input>
</section>
<section>
<label>Age</label>
<input type="text" id="age" name="age"></input>
</section>
<section>
<label>E-mail</label>
<input type="text" id="email" name="email"></input>
</section>

<button class="button" type="submit">Reserve Trip</button>
</form>
</section>
</script>





<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="index.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>
</body>
</html>
72 changes: 72 additions & 0 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
var buildUrl = function() {
return "https://trektravel.herokuapp.com/trips";
};

var allTripsCallback = function(response) {
console.log("Success!");
console.log(response);

$("#trips-list").empty();
$("#trip").empty();

var tripsTemplate = _.template($('#trips-template').html());
for (var i = 0; i < response.length; i++) {

var generatedHtml = tripsTemplate({
data: response[i]
});

$('#trips-list').append($(generatedHtml));
}

$(".individual-trip").click(clickHandler2);
};

var tripCallback = function(response) {
console.log("Success!");
console.log(response);

$("#trips-list").empty();
$("#trip").empty();

var tripTemplate = _.template($('#trip-template').html());
var generatedHtml = tripTemplate({
data: response
});
$('#trip').append($(generatedHtml));

$('form').submit(function(e) {
// By default, the form will attempt to do it's own local POST so we want to prevent that default behavior
e.preventDefault();

var url = $(this).attr("action"); // Retrieve the action from the form
var formData = $(this).serialize();

$.post(url, formData, function(response){
$('#reserve-form').html('<p> Trip reserved for ' + this.name + '! </p>');
console.log(response);
}).fail(function() {
$("#errors").html('<p>Reservation failed! Please check you have filled out all fields</p>');
});
});
};

var failureCallback = function() {
console.log("Didn't work :(");
$("#errors").html("<h1>AJAX request failed!</h1>");
};

var clickHandler2 = function() {
var url2 = "https://trektravel.herokuapp.com/trips/" + this.id;
$.get(url2, tripCallback).fail(failureCallback);
};

var tripsClickHandler = function() {
$.get(url, allTripsCallback).fail(failureCallback);
};

$(document).ready(function() {
url = buildUrl();

$('#load').click(tripsClickHandler);
});
3 changes: 3 additions & 0 deletions styles/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
html {
color: green;
}
Loading