Skip to content
/ trek Public
forked from AdaGold/trek

Project: Build a web-app styled as a travel agency using our trip API

Notifications You must be signed in to change notification settings

Ada-C10/trek

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

41 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

TREK

At a Glance

  • Individual, stage 2 project
  • Due before class Tues Nov 27

TREK is an application that displays information on travel packages and allows users to reserve spots on a specific trip.

Learning Goals

  • Reading data from an API using axios
  • Posting data to an API using axios
  • Building dynamic elements on a page with jQuery

Objective

You will build a web app that will query data from an api, using axios, to display a list of trips and view more information on a specific trip. While viewing a specific trip, you can claim your spot by sending data back to the API.

All of this should be done without ever having to reload the page. In other words, TREK will be a single page application and will only need one html page, index.html.

The API

This project will use Ada's Travel API. Read about its usage on the Travel API's documentation.

Non-Functional Requirements

  • Any errors encountered while interacting with the API must be politely reported to the user
  • Use HTML best-practices. Use semantic HTML tags to group and organize your HTML appropriately
  • The site should be attractively styled, using CSS Grid, flexbox, and/or Bootstrap

Functional Requirements

Wave 1

  • As a user on the home page with no trips listed, I want to click a button or link, so that I see a list of all trips.

Wave 2

  • As a user on the home page with trips listed, I want to click on a specific trip, so that I see a new section appear with details of that trip.
  • As a user on the home page, after I've selected a specific trip, I want to see the following fields listed in the new section of the page, so that I know the details of that trip:
    • Trip ID
    • Trip name
    • Continent
    • Details about the trip
    • Category of the trip
    • Number of weeks duration of the trip
    • Cost of the trip

Wave 3

  • As a user on the home page, after I've selected a specific trip, I want to see a form I can use to fill out details, so that I can submit a reservation to this trip
  • As a user on the home page, after I've selected a specific trip, I want to use the form to fill out the following details, so that I can submit my information with this reservation:
    • name
    • email

Optional Wireframes

You have creative control over the design and layout of this project. Below are optional wireframes you may use. It is not a requirement that you do.

Base Page

As a user, I want to arrive to a site with no trips listed, so that I can admire the beautiful, negative space:

base page

See All Trips

As a user on the home page with no trips listed, I want to click a button or link, so that I see a list of all trips:

see all trips

Click a Trip

As a user on the home page with trips listed, I want to click on a specific trip, so that I see a new section appear with details of that trip.

As a user on the home page, after I've selected a specific trip, I want to see a form I can use to fill out details, so that I can submit a reservation to this trip

click a trip

Optional Enhancements

  • For more practice working with data, filter trips by search queries (like by continent, budget, etc.). You'll need to explore the API to see what functionality exists.
  • To practice a more advanced POST, allow the user to create a new trip.
  • For more jQuery practice, use jQuery to sort list of trips by specific attributes, like budget or time remaining.

What Instructors Are Looking For

Check out the feedback template which lists the items instructors will be looking for as they evaluate your project.

About

Project: Build a web-app styled as a travel agency using our trip API

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published