From 7b9e6d3023339d63189cf31f8267d0cb2f034953 Mon Sep 17 00:00:00 2001 From: Irene DeVera Date: Wed, 29 Nov 2017 20:48:25 -0800 Subject: [PATCH 1/6] Finish Wave 1 and 2 --- dist/index.html | 150 +++++++++++++++++++++++++++++-- src/app.js | 122 ++++++++++++++++++++++++- src/app/collections/trip_list.js | 9 ++ src/app/models/reservation.js | 23 +++++ src/app/models/trip.js | 25 ++++++ src/css/style.css | 11 +++ 6 files changed, 331 insertions(+), 9 deletions(-) create mode 100644 src/app/collections/trip_list.js create mode 100644 src/app/models/reservation.js create mode 100644 src/app/models/trip.js diff --git a/dist/index.html b/dist/index.html index b873b1e..c56f21a 100644 --- a/dist/index.html +++ b/dist/index.html @@ -6,15 +6,151 @@ -
-
-
+
+
+

BackTrek

+
+
+ +
+
-
- - diff --git a/src/app.js b/src/app.js index e7af594..ef0319f 100644 --- a/src/app.js +++ b/src/app.js @@ -6,8 +6,126 @@ import _ from 'underscore'; import './css/foundation.css'; import './css/style.css'; +import Trip from './app/models/trip'; +import TripList from './app/collections/trip_list'; +import Reservation from './app/models/reservation'; + console.log('it loaded!'); -$(document).ready( () => { - $('main').html('

Hello World!

'); +//////////////////////// ALL TRIPS /////////////////////////// + +// Create a new collection of all trips +const tripList = new TripList(); + +// Create a template for all trips to append to the page +const listTemplate = _.template($('#trip-template').html()); + +const renderList = function renderList() { + tripList.forEach((trip) => { + let generatedHtml = listTemplate(trip.attributes); + $('#trip-list').append(generatedHtml); + $(`#trip${ trip.id }`).click(function() { + showTrip(trip.id); + // let singleTrip = tripList.findWhere({id: tripID}); + }); + }); +}; + +//////////////////////// SINGLE TRIP /////////////////////////// + +const singleTripTemplate = _.template($('#trip-info-template').html()); + +// TODO: FIX SINGLE TRIP SOMEHOW TO USE THE URL OF THE TRIP MODEL +const showTrip = function showTrip(tripID) { + let singleTrip = tripList.findWhere({id: tripID}); + singleTrip.fetch({ + success: (model, response) => { + console.log('Model: ' + singleTrip.parse(model)); + console.log('Response: ' + response); + renderInfo(model); + }, + }); +}; + +const renderInfo = function renderInfo(trip) { + let generatedHtml = singleTripTemplate(trip.attributes); + $('#trip-info').append(generatedHtml); + $('#reserve-form').on('submit', (event) => { + event.preventDefault(); + reserveTripHandler(); + }); + + console.log('THE CALL BACK FUNCTION WORKS!!'); +}; + +//////////////////////// NEW TRIP /////////////////////////// + +// Create new trip HTML fields +const TRIP_FIELDS = ['name', 'continent', 'about', 'category', 'weeks', 'cost'] + +const newTripHandler = () => { + let tripData = {}; + TRIP_FIELDS.forEach((field) => { + const inputElement = $(`#new-trip-form input[name="${ field }"]`); + const value = inputElement.val(); + tripData[field] = value; + }); + + let newTrip = new Trip(tripData); + + newTrip.save({}, { + success: (model, response) => { + tripList.add(model); + }, + error: (model, response) => { + console.log(response); + }, + }); +}; + +//////////////////////// RESERVE TRIP /////////////////////////// + +const RESERVE_FIELDS = ['name', 'age', 'email', 'tripId']; + +const reserveTripHandler = () => { + let reservation = {}; + RESERVE_FIELDS.forEach((field) => { + const inputElement = $(`#reserve-form [name="${ field }"]`); + const value = inputElement.val(); + reservation[field] = value; + }); + + let newReservation = new Reservation(reservation); + console.log('Reservation ID: ' + newReservation.attributes); + newReservation.save({}, { + success: (model, response) => { + console.log('Your reservation has been saved!'); + $('#reserve-form').reset(); + }, + error: (model, response) => { + console.log(response); + }, + }); +}; + +$(document).ready(() => { + $('#create-trip-form').hide(); + // $('#reserve-wrapper').hide(); + // $('#trip-list').empty(); + + tripList.fetch(); + + // Listen and register. Once an update has been heard, render all the collection into the template + tripList.on('update', renderList); + + // Render form when the button is clicked + $('#create-trip').on('click', (event) => { + $('#create-trip-form').show(); + }); + + // On click when creating a new trip + $('#new-trip-form').on('submit', (event) => { + event.preventDefault(); + newTripHandler(); + }); }); diff --git a/src/app/collections/trip_list.js b/src/app/collections/trip_list.js new file mode 100644 index 0000000..35919a1 --- /dev/null +++ b/src/app/collections/trip_list.js @@ -0,0 +1,9 @@ +import Backbone from 'backbone'; +import Trip from '../models/trip'; + +const TripList = Backbone.Collection.extend({ + model: Trip, + url: 'https://ada-backtrek-api.herokuapp.com/trips', +}); + +export default TripList; diff --git a/src/app/models/reservation.js b/src/app/models/reservation.js new file mode 100644 index 0000000..c7bc766 --- /dev/null +++ b/src/app/models/reservation.js @@ -0,0 +1,23 @@ +import Backbone from 'backbone'; + +const Reservation = Backbone.Model.extend({ + baseURL: 'https://ada-backtrek-api.herokuapp.com/trips', + url: function() { + return this.baseURL + '/' + this.attributes.tripId + '/' + 'reservations'; + }, + + validate: function(attributes) { + // Save errors into a hash + const errors = {}; + + if (!attributes.email) { + errors['email'] = ['Email cannot be blank!']; + } else if (!attributes.name) { + errors['name'] = ['Name cannot be blank!']; + } + }, + +}); + + +export default Reservation; diff --git a/src/app/models/trip.js b/src/app/models/trip.js new file mode 100644 index 0000000..1c1cad9 --- /dev/null +++ b/src/app/models/trip.js @@ -0,0 +1,25 @@ +import Backbone from 'backbone'; + +const Trip = Backbone.Model.extend({ + // These are properties! + urlRoot: 'https://ada-backtrek-api.herokuapp.com/trips', +}); + +export default Trip; + +// +// Emily goes to Stadium High School in Tacoma. +// +// +// – Eligible for free or reduced lunch (About 50%) +// – Girls from underserved communities including girls that are minorities/of color, refugees, immigrants, and/or have disabilities +// – Would probably not consider a tech education/career without extra encouragement +// – Have not created technology before (that are not already on a robotics team, coding, etc. (About 70%) + +// Girls are all nominated by educators, counselors, people from nonprofit organizations and other community members. We are looking for girls who would not find tech on their own, girls who might never think of a career in tech on their own. Nominations are key as we feel that these girls know that someone believes in them and that they can follow any career path – even the one they never considered before. + + +// Growing up in two households and also being the oldest of 5 siblings, Emily has always had the responsibility of being the older sibling. Being a Junior at Stadium High School, she is close to figuring out her plans of going to college. She has not even considered technology to be in her realm of possibilities. Growing up in the age of technology + +// Emily goes to Stadium High School located in Tacoma, WA. I am nominating Emily for the ChickTech HS Program Stadium High School does not offer extra curricular technology classes. Growing up as the eldest of 5 siblings in two separate homes, it is not easy for her to have access to +// because she is the eldest of 5 siblings. Growing up in two homes, money diff --git a/src/css/style.css b/src/css/style.css index b7b2d44..fb29be9 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -1,2 +1,13 @@ /* Your styles go here! */ +.logo, .button { + border: 2px solid yellow; +} + +.main-header { + background-color: green; +} + +#trip-info { + border: 2px solid yellow; +} From 85f0f66b2db5e8d8847ef0b90d8b70d445bd789c Mon Sep 17 00:00:00 2001 From: Irene DeVera Date: Thu, 30 Nov 2017 22:27:22 -0800 Subject: [PATCH 2/6] Add search bar, add sorting. Start filtering --- dist/index.html | 63 +++++++++---- src/app.js | 173 ++++++++++++++++++++++++++++++---- src/app/models/reservation.js | 11 ++- src/app/models/trip.js | 40 ++++---- 4 files changed, 233 insertions(+), 54 deletions(-) diff --git a/dist/index.html b/dist/index.html index c56f21a..1bcd9d8 100644 --- a/dist/index.html +++ b/dist/index.html @@ -2,7 +2,7 @@ - My JavaScript App + BackTREK @@ -17,8 +17,24 @@

BackTrek

+ +
+
+
- + + + + + +
@@ -27,26 +43,22 @@

BackTrek

- + + +
ID Name Weeks Cost
+
-
+ +

Create New Trip

- -
- + @@ -69,8 +81,9 @@

Create New Trip

-
-
+ +
+
@@ -82,7 +95,7 @@

Create New Trip

- + + + + + + diff --git a/src/app.js b/src/app.js index ef0319f..8b49b69 100644 --- a/src/app.js +++ b/src/app.js @@ -10,9 +10,16 @@ import Trip from './app/models/trip'; import TripList from './app/collections/trip_list'; import Reservation from './app/models/reservation'; -console.log('it loaded!'); +// console.log('it loaded!'); +const TRIP_FIELDS = ['name', 'continent', 'about', 'category', 'weeks', 'cost'] + +const RESERVE_FIELDS = ['name', 'age', 'email', 'tripId']; + + +////////////////////////////////////////////////////////////// //////////////////////// ALL TRIPS /////////////////////////// +////////////////////////////////////////////////////////////// // Create a new collection of all trips const tripList = new TripList(); @@ -20,48 +27,58 @@ const tripList = new TripList(); // Create a template for all trips to append to the page const listTemplate = _.template($('#trip-template').html()); +// Render all trips const renderList = function renderList() { + $('#trip-list').html(''); tripList.forEach((trip) => { let generatedHtml = listTemplate(trip.attributes); $('#trip-list').append(generatedHtml); $(`#trip${ trip.id }`).click(function() { - showTrip(trip.id); + getTrip(trip.id); // let singleTrip = tripList.findWhere({id: tripID}); }); }); }; +// Render on sort + + +//////////////////////////////////////////////////////////////// //////////////////////// SINGLE TRIP /////////////////////////// +//////////////////////////////////////////////////////////////// const singleTripTemplate = _.template($('#trip-info-template').html()); -// TODO: FIX SINGLE TRIP SOMEHOW TO USE THE URL OF THE TRIP MODEL -const showTrip = function showTrip(tripID) { +// Get one Trip +const getTrip = function getTrip(tripID) { + $('#create-trip-form').hide(); + $('#trip-info').html(''); let singleTrip = tripList.findWhere({id: tripID}); singleTrip.fetch({ success: (model, response) => { console.log('Model: ' + singleTrip.parse(model)); console.log('Response: ' + response); - renderInfo(model); + showTrip(model); }, }); }; -const renderInfo = function renderInfo(trip) { +// Render One Trip +const showTrip = function showTrip(trip) { let generatedHtml = singleTripTemplate(trip.attributes); + $('#trip-info').html(''); $('#trip-info').append(generatedHtml); $('#reserve-form').on('submit', (event) => { event.preventDefault(); reserveTripHandler(); }); - console.log('THE CALL BACK FUNCTION WORKS!!'); + // console.log('THE CALL BACK FUNCTION WORKS!!'); }; -//////////////////////// NEW TRIP /////////////////////////// - -// Create new trip HTML fields -const TRIP_FIELDS = ['name', 'continent', 'about', 'category', 'weeks', 'cost'] +////////////////////////////////////////////////////////////// +//////////////////////// CREATE TRIP ///////////////////////// +////////////////////////////////////////////////////////////// const newTripHandler = () => { let tripData = {}; @@ -73,6 +90,11 @@ const newTripHandler = () => { let newTrip = new Trip(tripData); + if (!newTrip.isValid()) { + displayErrors(newTrip.validationError); + return; + } + newTrip.save({}, { success: (model, response) => { tripList.add(model); @@ -83,24 +105,37 @@ const newTripHandler = () => { }); }; +///////////////////////////////////////////////////////////////// //////////////////////// RESERVE TRIP /////////////////////////// - -const RESERVE_FIELDS = ['name', 'age', 'email', 'tripId']; +///////////////////////////////////////////////////////////////// const reserveTripHandler = () => { let reservation = {}; RESERVE_FIELDS.forEach((field) => { const inputElement = $(`#reserve-form [name="${ field }"]`); const value = inputElement.val(); + reservation[field] = value; + + // Clears the form + inputElement.val(''); }); let newReservation = new Reservation(reservation); - console.log('Reservation ID: ' + newReservation.attributes); + // If it is valid it will return false + if (!newReservation.isValid()) { + + // Returns the last value of the last failed validation - errors hash + displayErrors(newReservation.validationError); + return; + } + + // Save as a post method to the API newReservation.save({}, { success: (model, response) => { + // TODO: A popup to show that the resevation has been saved console.log('Your reservation has been saved!'); - $('#reserve-form').reset(); + // $('#reserve-form').reset(); }, error: (model, response) => { console.log(response); @@ -108,10 +143,55 @@ const reserveTripHandler = () => { }); }; +///////////////////////////////////////////////////////////////// +//////////////////////// DISPLAY ERRORS ///////////////////////// +///////////////////////////////////////////////////////////////// + +const errorTemplate = _.template($('#error-template').html()); + +// Now I need to display the template and then append it to the place that i want to append it to +const displayErrors = (errors) => { + $('#display-errors').empty(); + + let errorObject = {}; + for (let key in errors) { + errorObject[key] = errors[key]; + } + + let generatedHtml = errorTemplate(errorObject); + $('#display-errors').append(generatedHtml); +}; + +///////////////////////////////////////////////////////////////// +////////////////////////////// SORT ///////////////////////////// +///////////////////////////////////////////////////////////////// + +const SORT_FIELDS = ['id', 'name', 'continent', 'about', 'category', 'weeks', 'cost'] + +// Attach sorting click handlers +const sortingHandler = () => { + SORT_FIELDS.forEach((field) => { + const headerElement = $(`.sort.${ field }`); + console.log(field); + // Attaching an event handler here for the .on function for each of the header elements + headerElement.on('click', (event) => { + // Comparator is a property + tripList.comparator = field; + // If you don't change the comparator it will resort based on the sort not the comparator + tripList.sort(); + console.log('HITS SORT FUNCTION'); + }); + }); +}; + +///////////////////////////////////////////////////////////////// +//////////////////////////// FILTER ///////////////////////////// +///////////////////////////////////////////////////////////////// + + + $(document).ready(() => { $('#create-trip-form').hide(); - // $('#reserve-wrapper').hide(); - // $('#trip-list').empty(); tripList.fetch(); @@ -120,12 +200,69 @@ $(document).ready(() => { // Render form when the button is clicked $('#create-trip').on('click', (event) => { + $('#trip-info').html(''); $('#create-trip-form').show(); }); - // On click when creating a new trip + // On click new trip form $('#new-trip-form').on('submit', (event) => { event.preventDefault(); newTripHandler(); }); + + sortingHandler(); + + // On sort of the TripList + tripList.on('sort', renderList); + + // const myFunction = () => { + // console.log('this function runs'); + // } + +// var activities = document.getElementById("activitySelector"); +// +// activities.addEventListener("click", function() { +// var options = activities.querySelectorAll("option"); +// var count = options.length; +// if(typeof(count) === "undefined" || count < 2) +// { +// addActivityItem(); +// } +// }); + + const filter = $('#filter').value; + // TODO: I am right here + filter.click(function() { + let options = filter.querySelectorAll('option'); + let count = options.length; + console.log('Options:' + options); + console.log('Count: '+ count); + }); + + + + $('#search-bar').keyup(() => { + var input, filter, table, tr, td, i; + input = document.getElementById("search-bar"); + filter = input.value.toUpperCase(); + table = document.getElementById("all-trips"); + tr = table.getElementsByTagName("tr"); + for (i = 0; i < tr.length; i++) { + td = tr[i].getElementsByTagName("td")[0]; + if (td) { + if (td.innerHTML.toUpperCase().indexOf(filter) > -1) { + tr[i].style.display = ""; + } else { + tr[i].style.display = "none"; + } + } + }; + }); + + // It works for ID but it does not work for Name + + }); + + +// SAVE THEN ADD TO THE LOCAL COLLECTION diff --git a/src/app/models/reservation.js b/src/app/models/reservation.js index c7bc766..e367613 100644 --- a/src/app/models/reservation.js +++ b/src/app/models/reservation.js @@ -7,16 +7,19 @@ const Reservation = Backbone.Model.extend({ }, validate: function(attributes) { - // Save errors into a hash const errors = {}; - if (!attributes.email) { errors['email'] = ['Email cannot be blank!']; - } else if (!attributes.name) { + } + if (!attributes.name) { errors['name'] = ['Name cannot be blank!']; } + // If you are using in an if statment, then you want it to evaluate to false + if (Object.keys(errors).length < 1) { + return false; + } + return errors; }, - }); diff --git a/src/app/models/trip.js b/src/app/models/trip.js index 1c1cad9..94c4e2d 100644 --- a/src/app/models/trip.js +++ b/src/app/models/trip.js @@ -3,23 +3,31 @@ import Backbone from 'backbone'; const Trip = Backbone.Model.extend({ // These are properties! urlRoot: 'https://ada-backtrek-api.herokuapp.com/trips', -}); - -export default Trip; + validate: function(attributes) { + const errors = {}; -// -// Emily goes to Stadium High School in Tacoma. -// -// -// – Eligible for free or reduced lunch (About 50%) -// – Girls from underserved communities including girls that are minorities/of color, refugees, immigrants, and/or have disabilities -// – Would probably not consider a tech education/career without extra encouragement -// – Have not created technology before (that are not already on a robotics team, coding, etc. (About 70%) + if (!attributes.name) { + errors['name'] = ['Name cannot be blank!']; + } + if (!attributes.continent) { + errors['continent'] = ['Continent cannot be blank!']; + } + if (!attributes.category) { + errors['category'] = ['Category cannot be blank!']; + } + if (!attributes.weeks) { + errors['weeks'] = ['Weeks cannot be blank']; + } + if (!attributes.cost) { + errors['cost'] = ['Cost cannot be blank!']; + } -// Girls are all nominated by educators, counselors, people from nonprofit organizations and other community members. We are looking for girls who would not find tech on their own, girls who might never think of a career in tech on their own. Nominations are key as we feel that these girls know that someone believes in them and that they can follow any career path – even the one they never considered before. + if (Object.keys(errors).length < 1) { + return false; + } + return errors; + }, +}); -// Growing up in two households and also being the oldest of 5 siblings, Emily has always had the responsibility of being the older sibling. Being a Junior at Stadium High School, she is close to figuring out her plans of going to college. She has not even considered technology to be in her realm of possibilities. Growing up in the age of technology - -// Emily goes to Stadium High School located in Tacoma, WA. I am nominating Emily for the ChickTech HS Program Stadium High School does not offer extra curricular technology classes. Growing up as the eldest of 5 siblings in two separate homes, it is not easy for her to have access to -// because she is the eldest of 5 siblings. Growing up in two homes, money +export default Trip; From ea4e0d98efa155cdfff33fbb53da46b31ca27e13 Mon Sep 17 00:00:00 2001 From: Irene DeVera Date: Fri, 1 Dec 2017 16:00:06 -0800 Subject: [PATCH 3/6] Add styling and fix stuff --- dist/index.html | 334 +++++++++++++++++++++++++--------------------- src/app.js | 86 +++++------- src/css/style.css | 123 ++++++++++++++++- 3 files changed, 336 insertions(+), 207 deletions(-) diff --git a/dist/index.html b/dist/index.html index 1bcd9d8..b600a6b 100644 --- a/dist/index.html +++ b/dist/index.html @@ -2,186 +2,214 @@ - BackTREK + Trekking -
-
-

BackTrek

-
-
- -
-
- -
- -
-
- -
- - - - - - - - - - - - - - - - - - -
IDNameContinentCategoryWeeksCost
- -
- -
- -
-
-

Create New Trip

-
- -
- - - - - - - - - - - - - - +
+
+

TREK

+ +
+
- - +
- - -
- - -
+ +
-
- -
- -
-

- COPYRIGHT © ID 2017 -

-
- - - - - - - - + + + + + + + + - + + + - + diff --git a/src/app.js b/src/app.js index 8b49b69..e0098de 100644 --- a/src/app.js +++ b/src/app.js @@ -3,6 +3,7 @@ import $ from 'jquery'; import _ from 'underscore'; // CSS +// import './backTrek.jpg'; import './css/foundation.css'; import './css/style.css'; @@ -160,6 +161,9 @@ const displayErrors = (errors) => { let generatedHtml = errorTemplate(errorObject); $('#display-errors').append(generatedHtml); + $('.close-button').on('click', (event) => { + $('#display-errors').empty(); + }); }; ///////////////////////////////////////////////////////////////// @@ -188,6 +192,36 @@ const sortingHandler = () => { //////////////////////////// FILTER ///////////////////////////// ///////////////////////////////////////////////////////////////// +const filterDropdown = () => { + let value = $("#filter")[0].selectedIndex; + return value; +} + +const filterResults = () => { + let input, filter, table, tr, td, i; + input = $('#search-bar')[0]; + filter = input.value.toUpperCase(); + table = $('#all-trips')[0]; + tr = table.getElementsByTagName('tr'); + + // Run this function to get the current value of the selected index + let index = filterDropdown(); + // console.log("Value of the index: " + index); + for (i = 0; i < tr.length; i++) { + td = tr[i].getElementsByTagName('td')[index]; + if (td) { + if (td.innerHTML.toUpperCase().indexOf(filter) > -1) { + tr[i].style.display = ""; + } else { + tr[i].style.display = "none"; + } + } + }; +}; + +///////////////////////////////////////////////////////////////// +///////////////////////// DOCUMENT READY //////////////////////// +///////////////////////////////////////////////////////////////// $(document).ready(() => { @@ -215,54 +249,8 @@ $(document).ready(() => { // On sort of the TripList tripList.on('sort', renderList); - // const myFunction = () => { - // console.log('this function runs'); - // } - -// var activities = document.getElementById("activitySelector"); -// -// activities.addEventListener("click", function() { -// var options = activities.querySelectorAll("option"); -// var count = options.length; -// if(typeof(count) === "undefined" || count < 2) -// { -// addActivityItem(); -// } -// }); - - const filter = $('#filter').value; - // TODO: I am right here - filter.click(function() { - let options = filter.querySelectorAll('option'); - let count = options.length; - console.log('Options:' + options); - console.log('Count: '+ count); - }); - - - - $('#search-bar').keyup(() => { - var input, filter, table, tr, td, i; - input = document.getElementById("search-bar"); - filter = input.value.toUpperCase(); - table = document.getElementById("all-trips"); - tr = table.getElementsByTagName("tr"); - for (i = 0; i < tr.length; i++) { - td = tr[i].getElementsByTagName("td")[0]; - if (td) { - if (td.innerHTML.toUpperCase().indexOf(filter) > -1) { - tr[i].style.display = ""; - } else { - tr[i].style.display = "none"; - } - } - }; - }); - - // It works for ID but it does not work for Name - - -}); + $('#search-bar').on('keyup', filterResults); + // On Error -// SAVE THEN ADD TO THE LOCAL COLLECTION +}); // DOCUMENT READY diff --git a/src/css/style.css b/src/css/style.css index fb29be9..963169a 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -1,13 +1,126 @@ +/******* ALL STYLES *******/ -/* Your styles go here! */ -.logo, .button { - border: 2px solid yellow; +@import url('https://fonts.googleapis.com/css?family=Nunito'); +@import url('https://fonts.googleapis.com/css?family=Arvo'); + +body, html { + max-width: 100%; + margin: 0; +} + +body { + background: url('https://static.pexels.com/photos/33688/delicate-arch-night-stars-landscape.jpg');*/ + background-repeat: no-repeat; + background-size: cover; + background-attachment: fixed; + font-family: 'Nunito', sans-serif; +} + +h1, h2, h3, h4 { + font-family: 'Arvo', serif; +} + +.padding { + padding: 1em; +} +.color-white { + color: white; +} + +.to-reserve-black { + background-color: transparent; + border: 1px solid black; + border-radius: 5%; + color: black; +} + +.align-center { + text-align: center; } + +/******* HEADER *******/ + .main-header { - background-color: green; + text-align: center; + height: 150px; } +@media screen and (min-width: 64em) { + .main-header { + text-align: center; + height: 200px; + } +} + +h1.logo { + color: white; + top: 50%; + font-family: 'Arvo', serif; + font-size: 3em; + padding: 10px; +} + +.to-reserve { + background-color: transparent; + border: 1px solid white; + border-radius: 5%; + color: white; +} + +/******* MAIN *******/ + +main { + overflow: scroll; + margin: 0 auto; +} + +.set-width { + width: 100%; +} + +/******* TABLE *******/ + +table { + table-layout: fixed; + width: 100%; + text-align: center; +} + +table thead th { + text-align: center; +} + +@media screen and (max-width: 39.9375em) { + table { + font-size: 1em; + } +} + +/******* TRIP INFO *******/ + #trip-info { - border: 2px solid yellow; + background-color: white; +} + +#trip-info small { + font-size: 1em; +} + +@media screen and (min-width: 64em) { + #trip-info small { + font-size: 2em; + } +} + +/******* CREATE TRIP FORM *******/ + +#create-trip-form { + background-color: white; +} + +/******* FOOTER *******/ + +footer { + color: white; } From 7326e1c86ca24a59887dc0c817efd7f168a2c81a Mon Sep 17 00:00:00 2001 From: Irene DeVera Date: Sun, 3 Dec 2017 10:53:59 -0800 Subject: [PATCH 4/6] Fix the click functionality of the column when sorting --- dist/index.html | 12 +++++++----- src/app.js | 23 +++++++++++------------ src/css/style.css | 15 +++++++++++++-- 3 files changed, 31 insertions(+), 19 deletions(-) diff --git a/dist/index.html b/dist/index.html index b600a6b..12fba49 100644 --- a/dist/index.html +++ b/dist/index.html @@ -26,8 +26,8 @@

TREK

-