Complete readme

README.md

@@ -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.

dist/index.html

@@ -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>