Skip to content
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

Karinna Iniguez - Trek - Octos #38

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

Karinna Iniguez - Trek - Octos #38

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
17853b5
add index files for html css and js.
karinnainiguez May 23, 2018
37a00aa
Add functionality for api request of all trips
karinnainiguez May 23, 2018
06e4ab3
Add functionality for details api get request and add response info t…
karinnainiguez May 23, 2018
de346c4
Refactor and add missing semicolons
karinnainiguez May 23, 2018
b1c94a3
Add function for loading the form. Test that it is called when showDe…
karinnainiguez May 23, 2018
f93b0dd
Populate form in DOM using the data passed in
karinnainiguez May 23, 2018
3bbdc25
Add functionality for submitting form
karinnainiguez May 23, 2018
c23ec44
add section to html for status message and write js and css for it.
karinnainiguez May 24, 2018
438dc07
edit user messages received in success and failure of api requests.
karinnainiguez May 27, 2018
2e16f9a
Refactor and cleanup
karinnainiguez May 29, 2018
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
187 changes: 187 additions & 0 deletions index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,187 @@
/* ***************ALL BODY ****************/

body {
background-color: lightgrey;
}

/* *********** HEADER AND FOOTER *************/

header, footer {
background-color: lightpink;
position: fixed;
width: 100vw;
right: 0;
}

header {
top: 0;
max-height: 8vh;
display: flex;
justify-content: space-between;
}

header h1 {
margin: 1vh 2vw;
}

footer {
bottom: 0;
text-align: center;
margin: 0;
}

/* *************** MAIN ****************/

main {
padding: 8vh 0;
margin-bottom: 0;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: .75fr 6fr 6fr;
}


/* ************* ALL SECTIONS ************ */

h2 {
margin: 0;
padding: 2vh;
text-align: center;
}

/* *************** TOP SECTION ************** */

section:first-child {
grid-area: 1 / 1 / 2 / 3;
display: flex;
justify-content: space-around;
}

button {
font-size: 1em;
background: linear-gradient(lightpink, grey);
font-weight: bold;
padding: .5em;
}

button:hover {
background: linear-gradient(grey, lightpink);
}

#status-message {
background-color: darkgrey;
font-style: italic;
font-weight: bold;
margin: 0 5vw;
}



/* ********** ALL TRIPS SECTION *********** */

#all-trips {
grid-area: 2 / 1 / 4 / 2;
text-align: center;
margin: 1vw;
padding: 0;
max-width: 45vw;
}


#trip-list {
list-style-type: none;
padding: 0;
margin: 0;
max-height: 70vh;
overflow-x: scroll;
}

#trip-list li {
padding: 2vh;
}

#trip-list li a {
color: black;
font-size: 1.15em;
font-weight: bold;
text-decoration: none;
}

#trip-list li a:hover {
text-decoration: underline;
font-size: 1.4em;
}


/* *********** TRIP DETAIL SECTION ************* */

#trip-details {
margin: 1vw;
grid-area: 2 / 2 / 3 / 3;
}

#trip-details ul {
list-style-type: none;
padding: 0;
margin: 0;
max-height: 35vh;
overflow-x: scroll;
}

#trip-details li {
margin: .5vw;
font-size: 1.15em;
}
-
#trip-details li:first-child {
font-size: 1.3em;
}

/* ********* TRIP RESERVATION SECTION ********* */

#trip-reservation {
grid-area: 3 / 2 / 4 / 3 ;
margin: 1vw;
}

#trip-reservation form {
padding: 2vw;
font-size: 1.15em;
}

#trip-reservation form submit {
font-size: 1em;
background: linear-gradient(lightpink, grey);
font-weight: bold;
padding: .5em;
}

/* ********* STYLES USED BY JQUERY ********** */

.bordered {
border: solid black .25px;
}

.bordered-bottom {
border-bottom: solid black .5px;
}

.success {
color: green;
padding: 1vw;
}

.err {
color: red;
padding: auto 1vw;
}

.err p {
margin: 0;
}

.err ul {
list-style-type: none;
padding: 0;
margin: 0
}
49 changes: 49 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
<meta charset="utf-8">
<title>Trek Treck Treck</title>
<link rel="stylesheet" href="index.css">
</head>

<body>

<!-- ~~~~~~~~~~~~~~~HEADER~~~~~~~~~~~~~~~~~~ -->

<header>
<h1>Trek</h1>
<section id="status-message"></section>
</header>

<!-- ~~~~~~~~~~~~~~~~MAIN~~~~~~~~~~~~~~~~~ -->

<main>
<section>
<button id="all">See All Trips</button>
</section>

<section id="all-trips">
<h2></h2>
<ul id="trip-list"></ul>
</section>

<section id="trip-details"></section>

<section id="trip-reservation"></section>


</main>

<!-- ~~~~~~~~~~~~~~~~~FOOTER~~~~~~~~~~~~~~~~ -->

<footer><h4>&reg;2018 Karinna Iniguez</h4></footer>


<!-- ~~~~~~~~~~~~~~~~~SCRIPTS~~~~~~~~~~~~~~~~ -->
<script
src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
151 changes: 151 additions & 0 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,151 @@

const URL = 'https://ada-backtrek-api.herokuapp.com/trips';

const loadForm = (data) => {
$('#trip-reservation').addClass('bordered');
$('#trip-reservation').empty();


$('#trip-reservation').html('<h2>Reserve Trip</h2>');
$('#trip-reservation > h2').addClass('bordered-bottom');

$('#trip-reservation').append(
`<form>
<input type="hidden" name="id" value="${data.id}">
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good

<p>Your Name: <input type="text" name="name"></p>
<p>Your Email: <input type="text" name="email"></p>
<p>Trip: ${data.name}<br>
<input type="submit" value="Reserve"></p>
</form>`
);
};

const reportStatus = (message, applyClass = 'success') => {
$('#status-message').html(message);
$('#status-message').addClass(applyClass);
};

const reportError = (message, errors) => {
let mess = `<p>${message}</p><ul>`
for (const field in errors) {
for (const problem of errors[field]) {
mess += `<li>${field}: ${problem}<li>`;
}
}
mess += '</ul>';
reportStatus(mess, 'err');
};


const showTrips = () => {
// style all trips section
$('#all-trips').addClass('bordered');

// style and fill #all-trips header
$('#all-trips > h2').html('All Trips');
$('#all-trips > h2').addClass('bordered-bottom')

// style and fill #all-trips ul (#trip-list)
$('#trip-list').empty();
axios.get(URL)

.then((response) => {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Desired style is to include this callback directly below the get function call - rather than adding this additional whitespace

let collection = response.data
for (const trip of collection) {
$('#trip-list').append(
`<li class='bordered-bottom'>
<a href="https://ada-backtrek-api.herokuapp.com/trips/${trip.id}">${trip.name}</a>
</li>`
);
}
})

.catch((error) => {
reportStatus(`Sorry could not load trips: ${error.message}`);
console.log(error);
});

};

const showDetails = (event) => {
event.preventDefault();
const detailsLink = event.currentTarget.getAttribute('href');

$('#trip-details').addClass('bordered');
$('#trip-details').empty();


$('#trip-details').html('<h2>Trip Details</h2>');
$('#trip-details > h2').addClass('bordered-bottom');

axios.get(detailsLink)

.then((response) => {

// Add details to DOM using response data
let trip = response.data;
$('#trip-details').append(
`<ul>
<li><strong>Name: ${trip.name}</strong></li>
<li><strong>Continent: </strong>${trip.continent}</li>
<li><strong>Category: </strong>${trip.category}</li>
<li><strong>Weeks: </strong>${trip.weeks}</li>
<li><strong>Cost: </strong>$${trip.cost}</li>
<li>
<strong>About: </strong>
<p>${trip.about}</p>
</li>
</ul>`
);

// load form using response data
loadForm(trip);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like that you created the separate form function here. Might also be good to put the trip details HTML in a separate function as well.


})
.catch((error) => {
console.log(error.response);
console.log(error.message);
if (error.response.data && error.response.data.errors) {
reportError(
`Sorry could not load trip: `, error.response.data.errors
);
} else {
reportStatus(`Encountered an error: ${error.message}`);
}
});

};

const reserveTrip = (event) => {
event.preventDefault();
const tripData = $('form').serialize();
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Interesting use of serialize!

const id = parseInt(tripData.replace('id=',''));

axios.post(`https://ada-backtrek-api.herokuapp.com/trips/${id}/reservations?${tripData}`)

.then((response) => {
reportStatus(`Successfully booked your trip with trip ID ${response.data.id}! Have fun!`)
})

.catch((error) => {
console.log(error.response);
if (error.response.data && error.response.data.errors) {
reportError(
`Sorry could not load trip: `, error.response.data.errors
);
} else {
reportStatus(`Encountered an error: ${error.message}`);
}
});

// reset the form
$('form')[0].reset();
};



$(document).ready(()=>{
$('#all').click(showTrips);
$('#trip-list').on('click', 'a', showDetails);
$('#trip-reservation').on('submit', 'form', reserveTrip);
});