Skip to content

Haby's Trek #45

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
wants to merge 11 commits into
base: master
Choose a base branch
from
Open

Haby's Trek #45

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
d94f25c
Original file structures
habypsow May 23, 2017
829d87e
Writing success callback function
habypsow May 23, 2017
eb610a7
Placed table stubs in index.html
habypsow May 24, 2017
020930d
Added link to name, and foundation to site as well
habypsow May 24, 2017
e479d03
Still stuck on wave 2, trips showing correctly on same page
habypsow May 26, 2017
fa8d3ef
Trying new methods with help from Ashton and Rana to show trips
habypsow May 26, 2017
301c1af
Getting closer to show page
habypsow May 26, 2017
411d1a9
Show trip now working, yay
habypsow May 26, 2017
1826042
Post a reservation
habypsow May 31, 2017
11c50bf
Deleted commented out lines not needed
habypsow May 31, 2017
8a180fb
Staring to style
habypsow May 31, 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
Binary file added .DS_Store
View file
Open in desktop
Binary file not shown.
53 changes: 53 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="trek.css" media="screen" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.css">
<title>Trek</title>
</head>
<body>
<main>
<button type="button" name="button" class="button" id="load">Get Trips!</button>
<section id='trip-list'></section>

<!-- Templates -->
<script id="trips-template" type="text/template">
<a href="#" class="trip-link" id=<%- trip.id %>><h1><%- trip.name %></h1></a>
</script>

<script id='trips-show-template' type="text/template">
<h2><%- trip.name %></h2>
<h2>About</h2>
<p><%- trip.about %></p>
<h2>Trip Number</h2>
<p> <%- trip.id %></p>
<h2>Location</h2>
<p> <%- trip.continent %></p>
<h2>Category</h2>
<p><%- trip.category %></p>
<h2>Duration</h2>
<p> <%- trip.weeks %> Days</p>
<h2>Money</h2>
<p> <%- trip.cost %></p>
<form id="reserve-trip" action=<%- url %> method="post">
<label>Name</label>
<input type="text" name="name" />
<label>Email</label>
<input type="text" name="email" />
<label>Age</label>
<input type="text" name="age" />
<button type="submit" class="success button">Reserve Trip!</button>
</form>
</script>
</main>



<!-- Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>
<script type="text/javascript"9 src="trek.js"></script>
</body>
</html>
Empty file added trek.css
View file
Open in desktop
Empty file.
64 changes: 64 additions & 0 deletions trek.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@



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

var homeTemplate = _.template($('#trips-template').html());

for (var i = 0; i < response.length; i++) {
var generatedHtml = homeTemplate({
trip: response[i],
});
$('#trip-list').append(generatedHtml);
}
$('#trip-list').on('click', 'a', showClickHandler);
};

var showSuccessCallback = function(response) {
var showTemplate = _.template($('#trips-show-template').html());

var url = 'https://trektravel.herokuapp.com/trips/'+ response.id +'/reserve';

var generatedHtml = showTemplate({
trip: response,
url: url
});

$('#trip-list').html($(generatedHtml));
// console.log("Ha");
};

$('#trip-list').on('click', 'button', function(e) {
e.preventDefault();

var url = $('form').attr("action");
var data = $('form').serialize();

$.post(url, data, function(response) {
alert("Trip reserved");
$('form').empty();
}).fail(failureCallback);
});

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

var homeClickHandler = function() {
var url = 'https://trektravel.herokuapp.com/trips';
$.get(url, homeSuccessCallback).fail(failureCallback);
};

var showClickHandler = function() {
var tripId = $(this).attr('id');
var urlShow = 'https://trektravel.herokuapp.com/trips/' + tripId;
console.log('this is the url', urlShow);
$.get(urlShow, showSuccessCallback).fail(failureCallback);
};


$(document).ready(function() {
$('#load').click(homeClickHandler);
});