Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
81 commits
Select commit Hold shift + click to select a range
fa0b4da
Add the title and buttons to the page
zenmcmillan Nov 8, 2023
0343f30
Show and hide the different sections of the page when the buttonis cl…
zenmcmillan Nov 8, 2023
f26eed5
Size the different sections of the page
zenmcmillan Nov 8, 2023
df0131a
Create test to get users trips that are of a past date and create fun…
zenmcmillan Nov 8, 2023
72512ab
Create test to get the destinations of a particular user whos trips a…
zenmcmillan Nov 8, 2023
289f94f
Change test it block
zenmcmillan Nov 8, 2023
b226726
Create test and function to get the trips of a particular user that h…
zenmcmillan Nov 9, 2023
158d08c
Create test and function to get all the matching destinations
zenmcmillan Nov 9, 2023
f877600
Use justify content center instead of pushing the margins
zenmcmillan Nov 9, 2023
6638086
Modify getUserPastTrips test and function to send a message if there …
zenmcmillan Nov 9, 2023
00d30cd
Create test and modify function to have a sad path if there are no up…
zenmcmillan Nov 9, 2023
aeda5b5
create test and function to get all of a users trips for the current …
zenmcmillan Nov 9, 2023
4865fda
Modify functions to have a sad path so now if the user has no trips t…
zenmcmillan Nov 9, 2023
d7f6d14
Modify getAnnualSpent function and accompanying test
zenmcmillan Nov 9, 2023
8feef83
Create apiCalls file for the network requests and create two fetch re…
zenmcmillan Nov 10, 2023
53c3b1b
Merge pull request #1 from zenmcmillan/feature/trip-data
zenmcmillan Nov 10, 2023
217cdd6
Add annual total section and buttons and give it clicking functionality
zenmcmillan Nov 10, 2023
1660ebf
Create login page
zenmcmillan Nov 10, 2023
0fa2d7b
Create functions to capture data and create approriate endpoint
zenmcmillan Nov 11, 2023
ffcd92c
Make a fetch call for the user
zenmcmillan Nov 11, 2023
be95380
Fix login error handling
zenmcmillan Nov 11, 2023
3b5ffd1
show the users name when they log in
zenmcmillan Nov 11, 2023
44d6e38
Ensure that the username is an existing username or else it will retu…
zenmcmillan Nov 11, 2023
b97a089
Ensure that the number in the username is between 1 and 50 for the us…
zenmcmillan Nov 11, 2023
cf18ccc
Add sections to different trip sections for the data to be displayed
zenmcmillan Nov 11, 2023
4c3dde3
show upcoming trips data on the dom
zenmcmillan Nov 11, 2023
5df4deb
Display the pas trips on the DOM
zenmcmillan Nov 11, 2023
0f320de
show annual cost on the DOM
zenmcmillan Nov 11, 2023
f44c1fd
Modify functions to pass tests
zenmcmillan Nov 11, 2023
bcbb7c4
Add another test for the getAnnualCost function
zenmcmillan Nov 11, 2023
f41e033
Create function and test that passes to get all the destinations from…
zenmcmillan Nov 12, 2023
206a12c
Merge pull request #2 from zenmcmillan/feature/login-page
zenmcmillan Nov 12, 2023
4796112
Style the book a trip section
zenmcmillan Nov 12, 2023
ab02f11
Show the destinations on the drop down menu
zenmcmillan Nov 12, 2023
f00c755
Add pictures to the past trips
zenmcmillan Nov 12, 2023
c3f9dcf
Add a submit button
zenmcmillan Nov 12, 2023
047fc1e
Create function to deal with date errors and test it
zenmcmillan Nov 12, 2023
c354bec
Show error on screen when dates are off
zenmcmillan Nov 12, 2023
ee7b630
Show an error message if all form fields are not completed
zenmcmillan Nov 12, 2023
4f522bc
Create test to get duration of trip and makeUpcomingTrip to complete …
zenmcmillan Nov 12, 2023
d05a30f
modify makeUpcomingTrips function and tests to add more data to the n…
zenmcmillan Nov 12, 2023
be939e3
Create the object for new trip
zenmcmillan Nov 12, 2023
b5f73fe
Clear out the error message when the appropriate data is resubmitted
zenmcmillan Nov 13, 2023
e26a4d2
Will show a message when the trip booking form has been submitted
zenmcmillan Nov 13, 2023
25b2037
makeUpcomingTrip function is connected to to the submit button and ca…
zenmcmillan Nov 13, 2023
581e682
Successfully post new trip object
zenmcmillan Nov 13, 2023
5006b16
Create handNumberOfTravelers function to stop any negative numbers o…
zenmcmillan Nov 13, 2023
f7e8e0d
Shows upcoming trips
zenmcmillan Nov 13, 2023
cb98316
fetch upcoming trips back down
zenmcmillan Nov 13, 2023
6a0e66e
Merge pull request #3 from zenmcmillan/feature/trip-request
zenmcmillan Nov 13, 2023
cb63dc8
Delete handleSubmission function
zenmcmillan Nov 13, 2023
cbf0f51
Message will display when proper booking is made
zenmcmillan Nov 13, 2023
b354b2b
Properly align annual cost
zenmcmillan Nov 14, 2023
c3b3956
Clear out input fields
zenmcmillan Nov 14, 2023
dafc551
Allow error mesages to reapper when form isn't properly completed
zenmcmillan Nov 14, 2023
52f2f35
Show upcoming trips without reload
zenmcmillan Nov 14, 2023
bb76c68
Style annual cost section
zenmcmillan Nov 14, 2023
b11fac1
Align trips
zenmcmillan Nov 14, 2023
df405de
Complete styling of upcoming trips
zenmcmillan Nov 14, 2023
4b8f781
Complete styling of trip boxes
zenmcmillan Nov 14, 2023
132806f
make clearErroMessage function happen asynchronously
zenmcmillan Nov 14, 2023
75556da
Merge pull request #4 from zenmcmillan/feature/fix-booking
zenmcmillan Nov 14, 2023
ef604f3
Create function and test to calculate the cost of a trip
zenmcmillan Nov 14, 2023
b70a90c
show Trip Cost on the DOM
zenmcmillan Nov 14, 2023
dc5ed0e
Add commas to the numbers
zenmcmillan Nov 14, 2023
6e2a46f
Add scroll for the overflow of trips
zenmcmillan Nov 14, 2023
f409dda
Merge pull request #5 from zenmcmillan/feature/single-trip-cost
EGavinG Nov 14, 2023
917c74f
Style the submit button
zenmcmillan Nov 14, 2023
d076cef
Fix alt text attribute for images
zenmcmillan Nov 14, 2023
ba60b72
Modify HTML to pass the wave test
zenmcmillan Nov 14, 2023
2ec3861
Ensure that alt text is added to the images
zenmcmillan Nov 14, 2023
e53a56b
Get destinations section to be used with just the keyboard
zenmcmillan Nov 14, 2023
496891c
Add tab feature to sections
zenmcmillan Nov 14, 2023
c8ca105
Tab through upcoming trips
zenmcmillan Nov 14, 2023
768d9a9
Make application tabable
zenmcmillan Nov 14, 2023
1515b3b
Stop NaN costs from being posted on the DOM
zenmcmillan Nov 15, 2023
d7dd450
Delete comments and console logs
zenmcmillan Nov 15, 2023
a07c550
Add readme file
zenmcmillan Nov 15, 2023
8277e5e
Merge branch 'main' into feature/accessibility
zenmcmillan Nov 15, 2023
09f3fa5
Merge pull request #6 from zenmcmillan/feature/accessibility
zenmcmillan Nov 15, 2023
0dece76
Complete ReadMe
zenmcmillan Nov 15, 2023
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
104 changes: 21 additions & 83 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,99 +1,37 @@
# Webpack Starter Kit
# Travel Tracker

## Clone This Repo
## Abstract:
This Application allows the user to book a trip and view their future trips as well as past trips. The user can also see a breakdown of the cost for the trip they just booked as well as the cost for all the trips they booked this year

That's right, _clone_ not fork. You will use this repo multiple times, but you can only fork a repository once. So here is what you need to do to clone the repo and still be able to push changes to your repo:
## Application link:

1. Clone down this repo. Since you don't want to name your project "webpack-starter-kit", you can use an optional argument when you run `git clone` (you replace the `[...]` with the terminal command arguments): `git clone [remote-address] [what you want to name the repo]`
1. Remove the default remote: `git remote rm origin` (notice that `git remote -v` not gives you back nothing)
1. Create a new repo on GitHub with the name of `[what you want to name the repo]` to be consistent with naming
1. Copy the address that you would use to clone down this repo - something like `git@github.com:...`
1. Add this remote to your cloned down repo: `git remote add origin [address you copied in the previous step]` - do not include the brackets
![Travel Tracker Application](https://zenmcmillan.github.io/travel-tracker/)

Now try to commit something (just add a line in the README) and push it up to your new repo. If everything is setup correctly, you should see the changes on GitHub.
![Travel Tracker API](https://github.com/turingschool-examples/travel-tracker-api)

## Setup
## Preview of App:

After one person has gone through the steps of cloning down this repo and editing the remote, everyone should clone down the repo.
![Travel Tracker](travel-tracker.gif)

Then install the library dependencies. Run:

```bash
npm install
```
## Context:
This is the final project for the front end program at the Turing School of Software & Design. It took about 30 hours to complete this project

To verify that it is setup correctly, run `npm start` in your terminal. Go to `http://localhost:8080/` and you should see a page with the Turing logo image and a beautiful gradient background. If that's the case, you're good to go. Enter `control + c` in your terminal to stop the server at any time.
## Contributors:
https://github.com/zenmcmillan - Zen McMillan

## Where to Add Your Code
## Learning Goals:

### JavaScript
- Use object and array prototype methods to perform data manipulation
- Create a clear and accessible user interface
- Make network requests to retrieve data
- Implement a robust testing suite using TDD
- Write DRY, reusable code that follows SRP (Single Responsibility Principle)

You have to be very intentional with where you add your feature code. This repo uses a tool called [webpack](https://webpack.js.org/) to combine many JavaScript files into one big file. Webpack enables you to have many, separate JavaScript files to keep your code organized and readable. Webpack expects all of your code files to be in a specific place, or else it doesn't know how to combine them all behind the scenes.
## Wins + Challenges:

**Create all of your feature code files in the `src` directory.**
- Getting the booking form to work properly was challenging. I needed to get it to display the right message for when the user submits it with bad or incomplete data. The trip also wouldn't show in the upcoming trips section at first unless the page was refreshed.

Since code is separated into multiple files, you need to use the `import` and `export` syntax to share code across file.
This problem was solved by adding the network request that fetched data from the trips endpoint to the submit button event listener

Here is a video that walks through some information about [import and export](https://www.youtube.com/watch?v=_3oSWwapPKQ). There are a lot of resources out there about `import` and `export`, and resources will sometimes call them `ES6 modules`. It's something you will see in React and beyond.

### HTML

Add the HTML you need in the `index.html` file in the `./dist` directory. There is some boilerplate HTML that exists from the start that you can modify.

### Images

Add your image files in the `src/images` directory. Similar to CSS files, you need to `import` image files in the JavaScript entry file (`scripts.js`). Then go into the HTML and add an `img` element with the `src` attribute pointing to the `images` directory. There is an example in the `index.html` file for you to see.

## How to View Your Code in Action

In the terminal, run:

```bash
npm start
```

You will see a bunch of lines output to your terminal. One of those lines will be something like:

```bash
Project is running at http://localhost:8080/
```

Go to `http://localhost:8080/` in your browser to view your code running in the browser.

---

## Test Files Organization

Similar to feature code, your test code needs to be put in a specific place for it to run successfully.

**Put all of your test files in the `test` directory.** As a convention, all test filenames should end with `-test.js`. For instance: `box-test.js`.

## Running Your Tests

Run your test suite using the command:

```bash
npm test
```

The test results will output to the terminal.

---

## Linting Your Code

Run the command in your terminal `npm run lint` to run the linter on your JavaScript code. There will be errors and warnings right from the start in this starter kit - the linter is still running successfully.

Your linter will look at the JavaScript files you have within the `src` directory and the `test` directory.

## Webpack?

If you look in the `package.json` file, you'll see one of the library dependencies called `webpack`. If you're interested in learning more about what Webpack is and how it works behind the scenes, take a look through the [Webpack configuration documentation](https://webpack.js.org/concepts/).

## Deploying to GitHub Pages

_If you are finished with the functionality and testing of your project_, then you can consider deploying your project to the web! This way anyone can play it without cloning down your repo.

[GitHub Pages](https://pages.github.com/) is a great way to deploy your project to the web. Don't worry about this until your project is free of bugs and well tested!

If you _are_ done, you can follow [this procedure](./gh-pages-procedure.md) to get your project live on GitHub Pages.
77 changes: 71 additions & 6 deletions dist/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,78 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Webpack Starter Kit</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@100;300;400;500;700;800;900&display=swap" rel="stylesheet">
<title>Travel Book</title>
</head>
<body>
<img src="./images/turing-logo.png" alt="turing logo">

<!-- Do not include the scripts.js or class files here - it is done by the webpack server -->
<script src="bundle.js"></script>

<h1>TravelBook</h1>
<p class="welcome-name"></p>
<section class="page-content hidden">
<section class="trip-buttons-container">
<button class="upcoming-trips-button trip-type upcoming">Upcoming Trips</button>
<button class="past-trips-button trip-type past">Past Trips</button>
<button class="annual-total-button trip-type annual">Annual Total</button>
<button class="book-a-trip-button trip-type book">Book A Trip</button>
</section>
<section class="trip-sections-container">
<section tabindex="0" class="upcoming-trips-section upcoming pages">
<section tabindex="1" class="upcoming-trips">You have no upcoming trips!</section>
</section>
<section class="pending-trips-section pending pages">
<section class="pending-trips"></section>
</section>
<section tabindex="0" class="past-trips-section past pages">
<section class="past-trips">You have no past trips!</section>
</section>
<section tabindex="0" class="annual-total-section annual pages">
<section class="annual-total">Total - $0</section>
</section>
<section class="book-a-trip-section">
<p class="pages"></p>
<div class="inside-booking-container">
<section class="book-a-trip">
<div class="start-date">
<label for="start-date-input">Start Date</label>
<input id="start-date-input" class="start-date-input" type="date">
</div>
<div class="end-date">
<label for="end-date">End Date</label>
<input id="end-date" class="end-date-input" type="date">
</div>
<div class="destination-and-people">
<div class="number-of-people-container">
<label for="travelers-input" class="travelers">Travelers</label>
<input id="travelers-input" class="travelers-input" type="number">
</div>
</div>
<div class="destinations-container">
<label for="destinations" >Destination</label>
<select id="destinations" class="destination">
</select>
</div>
<button class="submit-button">Submit</button>
</div>
<p class="booking-error"></p>
</section>
</section>
</section>
</section>
</section>
<div class="login-container">
<section class="login-section">
<div class="welcome-container">
<h2>Welcome</h2>
<div class="input-container">
<input for="username" class="username-input-box" type="text" placeholder="Username..." aria-label="Username">
<input for="password" class="password-input-box" type="password" placeholder="Password..." aria-label="Password">
</div>
<button class="sign-in-button">Sign In</button>
</div>
<p class="login-error hidden">Username or password is incorrect</p>
</section>
</div>
</body>
<script src="bundle.js"></script>
</html>
Loading