turingschool-examples · KyleMBoomer · Jun 5, 2024 · Jun 6, 2024 · Jun 7, 2024 · Jun 7, 2024
diff --git a/dist/index.html b/dist/index.html
@@ -4,13 +4,63 @@
   <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>
+  <title>Travel Tracker</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 -->
+  <nav>
+    <ul>
+      <li id="myTripsNav">My Trips</li>
+      <li id="bookTripNav">Book A Trip</li>
+      <li id="destinationsNav">Destinations</li>
+    </ul>
+  </nav>
+  <section id="parent-wrapper">
+    <h1> Welcome to Travel Tracker! </h1>
+    <div class="container">
+      <section class="input-group">
+        <label for="userID">Enter Username:</label>
+        <input type="text" id="userID" name="userID" required>
+        <label for="user-password"> Enter Password:</label>
+        <input type="password" id="user-password" name="user-password" required>
+        <button id="get-user-data-button">Get My Trip Info!</button>
+        <p class="error-message"></p>
+      </section>
+      <div id="travelerDetails" class="traveler-details"></div>
+      <div id="expenditureDetails">
+        <section class="data-display" id="expenditureData"></section>
+      </div>
+      <section class="user-info hidden" id="travelerData"></section>
+      <div id="tripDetails" class="grid-container hidden">
+        <section class="data-display" id="tripData"></section>
+      </div>
+    </div>
+  </section>
+  <section class="destinations hidden">
+    <section class="data-display" id="destinationData">
+      <h2>Destinations We Offer</h2>
+      <div id="destinationDetails" class="destinations"></div>
+    </section>
+  </section>
+  <section class="forms-section hidden">
+    <form id="tripForm" class="forms">
+      <h3>Book A Trip</h3>
+      <p id="selectedDestination"></p>
+      <label for="tripUserID">Enter ID:</label>
+      <input type="number" id="tripUserID" name="tripUserID" required>
+      <label for="travelers">Number of Travelers:</label>
+      <input type="number" id="travelers" name="travelers" required>
+      <label for="date">Date (YYYY/MM/DD):</label>
+      <input type="text" id="date" name="date" required>
+      <label for="duration">Duration (days):</label>
+      <input type="number" id="duration" name="duration" required>
+      <select id="destinationDropdown">
+        <option value="" disabled selected>Where Do You Want To Go?</option>
+      </select>
+      <button type="submit" class="estimate-button">See Estimate</button>
+      <div id="estimateResult" style="margin:1rem;"></div>
+    </form>
+    <button type="button" id="bookTripButton" class="hidden">Book This Trip!</button>
+  </section>
   <script src="bundle.js"></script>
-
 </body>
-</html>
+</html>
diff --git a/js/api.js b/js/api.js
@@ -0,0 +1,78 @@
+function fetchData(url) {
+    return fetch(url)
+        .then(response => {
+            if (!response.ok) {
+                throw new Error(`No data found or data format incorrect`);
+            }
+            console.log(response)
+            return response.json()
+        })
+        .then(data => {
+            return data;
+        })
+        .catch(error => console.error(`Error fetching data`, error));
+}
+
+const basePostRequest = {
+    method: 'POST',
+    headers: {
+        'Content-Type': 'application/json'
+    }
+}
+function postTrip(url, { userId, destinationId, travelers, date, duration, status }) {
+    const postTripRequest = {
+        ...basePostRequest,
+        body: JSON.stringify({
+            id: Date.now(),
+            userID: userId,
+            destinationID: parseInt(destinationId),
+            travelers: travelers,
+            date: date,
+            duration: duration,
+            status: 'pending',
+            suggestedActivities: []
+        })
+    }
+
+    return fetch(url, postTripRequest)
+        .then(response => {
+            if (!response.ok) {
+                throw new Error('There was a problem posting your data.')
+            }
+            return response.json()
+        })
+        .then(data => {
+            console.log('Posted Trip:', data)
+            return fetchData('http://localhost:3001/api/v1/trips/')
+
+        })
+        .catch(error => tripDetails.innerText = error.message)
+
+}
+
+function postDestination(url, { destination, estimatedLodgingCostPerDay, estimatedFlightCostPerPerson, image, alt }) {
+    const destinationPostRequest = {
+        ...basePostRequest,
+        body: JSON.stringify({
+            destination: destination,
+            estimatedLodgingCostPerDay: estimatedLodgingCostPerDay,
+            estimatedFlightCostPerPerson: estimatedFlightCostPerPerson,
+            image: image,
+            alt: alt
+        })
+    }
+
+    .then(response => {
+        if(!response.ok) {
+            throw new Error('There was a problem posting your data.')
+        }
+        return response.json()
+    })
+    .then(data => {
+        console.log('Posted Destination:', data)
+        return fetchData('http://localhost:3001/api/v1/trips/')
+    })
+    .catch(error => console.error('Error posting destination:', error))
+}
+
+export { fetchData, postTrip, postDestination }