Skip to content

Queues - Anna Barklund - Trek #41

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

Queues - Anna Barklund - Trek #41

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
89fe502
Created the files index.html and index.js. Initial setup of index.htm…
amb54 May 24, 2017
66a649a
Added script for trip template. Added section with id = trip in the s…
amb54 May 24, 2017
8ab9206
Updated the .ready block with an event for clicking the button#getTri…
amb54 May 24, 2017
9678ce9
Created index.css file. Added link to this file as well as to foundat…
amb54 May 24, 2017
57644f0
Added a form to the trip_templet
amb54 May 25, 2017
52d518f
Updated .ready block with the form submit. Updated the successCallbac…
amb54 May 25, 2017
19c3e78
Added code for foundation. Changed some of the layout for the trip view.
amb54 May 25, 2017
69a1661
Added the function makeReservation for the submit event. Corrected th…
amb54 May 25, 2017
16cf50a
Added rules for the header, main #form1 and .trip
amb54 May 25, 2017
a51bcaf
Added headline in the header. Added toggle buttons in the list_head_t…
amb54 May 27, 2017
bf7ee4f
Added global variables ascending, listOfTrips and sortBy all part of …
amb54 May 27, 2017
4f6157a
Added three rule-sets (.trip_button, .sort_button , .trip_headline h3 )
amb54 May 27, 2017
6abba32
Coded the header to better accomodate foundation. Added classes and i…
amb54 May 29, 2017
ac64e04
Rearrange functions in alphabetical order.
amb54 May 29, 2017
beb6c8a
Change selector name
amb54 May 29, 2017
1940ba1
Minor correction
amb54 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
27 changes: 27 additions & 0 deletions index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@

header, main {
padding: 0.5rem 1rem 0.5rem 1rem;
}

#form1_div {
padding-top: 2rem;
}

.button {
border-radius: 0.25rem;
margin: 0;
padding: 0.5em 1em;
}

.trip_button {
width: 90px
}

.sort_button {
background-color: transparent;
color: black;
}

.trip_headline h3 {
display: inline-block;
}
132 changes: 132 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,132 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ambTREK</title>
<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/underscore.js/1.8.3/underscore.js" integrity="sha256-SzKOQsVYGX1bmddyfPzGC6yXY/rWYGUSMOi6+T9gZ+0=" crossorigin="anonymous"></script>
<script src="index.js" type="text/javascript"></script>
<!-- <link href='http://cdn.foundation5.zurb.com/foundation.css' rel='stylesheet' type='text/css'> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.css">
<link href="index.css" rel="stylesheet">
</head>
<body>

<header>
<section class = 'row' >
<h2>GO FOR IT!</h2>
</section>
<section class = 'row' >
<div class = 'large-4 columns'>
<button class="button" id="load_list"> All Trips </button>
</div>
<div class = 'large-8 columns'>
</div>
</section>


</header>

<main class = 'row'>



<table id = 'view_list'>
<thead id = 'list_head_of_trips'>
</thead>
<tbody id = 'list_of_trips'>
</tbody>
</table>

<section id = 'trip'>
</section>

</main>

</body>
</html>





<!-- TEMPLATES ****************************************************-->

<script id="list_head_template" type="text/template">
<tr>
<th>Trip # <br /><button data-sort = 'trip_sort' class = "sort_button button tiny"> < > </button> </th>
<th>Destination<br /> <button data-sort = 'destination_sort' class = "sort_button button tiny"> < > </button> </th>
<th>Continent<br /> <button data-sort = 'continent_sort' class = "sort_button button tiny"> < > </button> </th>
<th>Duration <br /> (weeks)<br /> <button data-sort = 'duration_sort' class = "sort_button button tiny"> < > </button> </th>
</tr>
</script>




<script id="list_template" type="text/template">
<tr>
<td><%- data.id%></td>
<td><%- data.name%></td>
<td><a class = 'query continent' data-query = '<%- data.continent%>'> <%- data.continent%> </a></td>
<td><%- data.weeks %></td>
<td>
<button class="trip_button button tiny" id= 'getTrip' data-tripid = <%- data.id%> >Go for trip <%- data.id%>!</button>
</td>
</tr>
</script>



<script id="trip_template" type="text/template">

<section class = "row large-up-12 columns">
<div class = 'trip_headline'>
<h3>Trip <%- data.id%>: <%- data.name%>, </h3>
<h3><a class = 'query continent' data-query = '<%- data.continent%>'> <%- data.continent%> </a></h3>
</div>
</section>

<section class = "row">
<div class = "large-5 columns">
<div>
<p>
<%- data.weeks%> weeks
</p>
<p>
$<%- data.cost%>
</p>
<p id = 'message'></p>
</div>

<div id = 'form1_div'>
<p>
Make a reservation and ...
</p>
<form id = 'form1' action = <%- url%> 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>Email</label>
<input type="text" id="email" name="email"></input>
</section>
<section>
<button class="button expanded success" type="submit" id= 'makeReservation'> ...go for it :) </button>
</section>
</form>
</div>
</div>

<div class = "large-7 columns">
<article>
<%- data.about%>
</article>
</div>
</section>
</script>
Loading