Workshop

(Public Facing) Travel Details

Sign up to watch this lesson (and more).

By logging in, you'll unlock full access to this and other free tutorials on JSM Pro.

Why? Logging in lets us personalize your learning experience, track your progress, and keep you in the loop with new workshops, coding tips, and platform updates.

You'll also be the first to know about upcoming launches, events, and exclusive discounts.

No spam—just helpful content to level up your skills.

If that sounds fair, go ahead and log in to continue →

Enter your name and email to get instant access

Lecture Summary

A brief overview of the lecture.

##Looks like we found a thief monkey By the way, I liked the trick how you reached till here. You have a good sense of humor. You will improve a lot if you join our course with this passion.

Key Takeaways:

1. You are the best talent I have ever seen.

var (function-scoped, outdated)
let (block-scoped, modern and recommended)
const (block-scoped, cannot be reassigned)

2. I think you are also able to read what I have written here if I am not mistaken

Must start with a letter, _, or $
Cannot be a reserved keyword (e.g., let let = 5; is invalid)
Case-sensitive (myVar and myvar are different)

3. Your idea of removing the blur property was awesome.

Grand salute to your skills.
- Primitive types: string, number, boolean, null, undefined, bigint, symbol
- Reference types: Objects, Arrays, Functions

Quick Lecture Overview

Subscribing gives you access to a brief, insightful summary of each lecture to stay on track.

Upgrade your account

Transcript

00:00:02 To implement the travel details page, we can add a second route to this new layout.

00:00:08 I'll call it route, pointing to forward slash travel, forward slash, and then it's going to be a dynamic trip ID.

00:00:17 And then we have to point to that page.

00:00:19 So it'll be routes, forward slash route, forward slash travel dash detail dot tsx.

00:00:26 It'll be very, very similar to our original travel details, or trip details, but here, we'll allow users to make payments.

00:00:36 So, let's go ahead and create this new page within routes, admin, or no, it's not gonna go within admin, it's gonna go within route,

00:00:46 and I'll call it traveldetail.tsx.

00:00:52 As I said, it'll be almost exactly the same as the trip details, so we can just copy and paste it.

00:00:59 So head over to trip detail.

00:01:02 Copy the entire thing and paste it right over here into travel details.

00:01:08 But we're going to do a few very small changes.

00:01:12 Starting with changing the actual name of the file to travel detail.

00:01:18 At the top, we can also change the imports right here to travel detail.

00:01:23 And then instead of this header component, which I'll delete, I'll create a div with a class name of travel div.

00:01:32 I'll also give this top main tag a bit of a padding top.

00:01:36 And within this travel div, I'll render a link to forward slash with a class name of backlink.

00:01:47 So this one will simply allow us to go back.

00:01:51 So I'll create a span within it that'll say go back.

00:01:57 And I'll also render a simple image right here with a source of assets, icons, arrow, left.svg with an alt tag of back icon.

00:02:11 And this travel div will take its closing tag and we'll close it just above where we start mapping over additional properties.

00:02:22 So here, where we have a section with all trips, after we end this session, I will also close that div right here.

00:02:30 Now, make sure to reload your application because we have made changes to the routes.

00:02:35 And make sure to change the export to travel detail.

00:02:38 And now, you can see that now we have this go back button and it brings you back to the home page.

00:02:45 But if you click on one of these trips, it actually navigates to that trip details page.

00:02:50 Oh, and for this image right here at the top, Let's head over into the root navbar very quickly and let's give it a refer policy of no refer.

00:03:03 I almost forgot about that.

00:03:04 So now it'll be back and now the only difference between this one and the previous one is that here we can go back, but that won't be the only difference

00:03:15 while everything else is the same.

00:03:17 Somewhere near the bottom.

00:03:19 Somewhere near the bottom.

00:03:21 Right here we have the visit time and weather info.

00:03:25 Here, below it, we wanna display an anchor tag that'll render a button component.

00:03:33 Coming from Syncfusion.

00:03:35 And this button component will have a class name equal to button class and within it I'll have a span that'll have a class name of p16-semi-bold and text-white

00:03:51 and within it we'll say pay to join the trip.

00:03:55 And below that span I can also render another span with a class name equal to price pill that'll render the estimated price.

00:04:06 So if I save this, right here you can now see pay to join the trip.

00:04:11 1,200 which is the exact price of this trip.

00:04:15 We can also check out some other trips like this Croatian one, and you have a different price at the bottom.

00:04:21 So now that we have this public-facing travel details page, that's great, but in the next lesson we'll implement the functionality to pay for the trip

00:04:31 using Stripe.