Skip to content

Queues - Cara Comfort - Trek #20

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 13 commits into
base: master
Choose a base branch
from
Open

Queues - Cara Comfort - Trek #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
1f5a379
Initialize and link required files via index.html
cecomfort May 24, 2017
0e692ea
Call trek API to show a list of all available trips
cecomfort May 24, 2017
622a665
Show details of trip 1 in the console
cecomfort May 24, 2017
78513f5
Add id to each trip html element so can use id as a query param to API
cecomfort May 24, 2017
5028c8d
Clicking on a trip shows about info
cecomfort May 24, 2017
1ff2136
Add popup window to display individual trip content
cecomfort May 24, 2017
fe05639
Add scroll bar to popup window and move close button to the top
cecomfort May 24, 2017
caee8d2
Add form on popup page to reserve a spot on a trip
cecomfort May 25, 2017
90c6be1
Add reserve spot button so form only revelead upon signup
cecomfort May 25, 2017
522f625
Fix form so not automatically shown for all popups, not just first popup
cecomfort May 25, 2017
84a54a5
Add underscore to trips list and individual trip
cecomfort May 26, 2017
ff984b5
Refractor trek code and generate form template using underscore
cecomfort May 26, 2017
a0446d6
Add background images and styling
cecomfort May 30, 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 assets/map.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/metal.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
62 changes: 62 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>🐒 Trek</title>
<link rel="stylesheet" href="styles/foundation.css">
<link href="styles/main.css" media="screen" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js" integrity="sha256-SzKOQsVYGX1bmddyfPzGC6yXY/rWYGUSMOi6+T9gZ+0=" crossorigin="anonymous"></script>
<script src="trek.js" type="text/javascript"></script>
</head>
<body>
<main>
<div class="main-background">
<section id="message"></section>
<button class="button row" id="load-trips"> Explore! </button>

<ul id="trips"></ul>

<div class="popup-backdrop" id="popup">
<article class="popup">
<a id="close-popup" href="#">X</a>
<div id="trip-info"></div>
<button class="button" id="reserve-spot">Reserve Spot</button>
<form action="/reserve" method="post"></form>
</article>
</div>
</main>

<script id="trip-list-template" type="text/template">
<li id=<%- trip.id %>>
<h4><%- trip.name %></h4>
<p>Destination: <%- trip.continent %></p>
<p>Duration: <%- trip.weeks %> weeks</p>
</li>
</script>

<script id="single-trip-template" type="text/template">
<section id=<%- trip.id %>>
<h2><%- trip.name %></h2>
<p><span class="info-header"> Trek ID: </span><%- trip.id %></p>
<p><span class="info-header">Destination: </span><%- trip.continent %></p>
<p><span class="info-header">Duration: </span><%- trip.weeks %> weeks</p>
<p><span class="info-header">Cost: </span>$<%- trip.cost %></p>
<p><%- trip.about %></p>
</section>
</script>

<script id="reserve-spot-template" type="text/template">
<section>
<label>Name</label>
<input type="text" id="name" name="name"></input>
<label>Age</label>
<input type="text" id="age" name="age"></input>
<label>Email</label>
<input type="text" id="email" name="email"></input>
<button type="submit" class="button">Reserve Spot</button>
</section>
</script>

</body>
</html>
Loading