Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,104 --> 00:00:03,590
[Maximilian} Now, before we add any logic
2
00:00:03,590 --> 00:00:06,140
let's add some styling.
3
00:00:06,140 --> 00:00:09,150
For this attached you find three files.
4
00:00:09,150 --> 00:00:12,480
You'll find the Checkout.module.css file
5
00:00:12,480 --> 00:00:15,453
which you should use to replace yours with it.
6
00:00:16,290 --> 00:00:20,880
You will find a slightly updated Modal.module.css file
7
00:00:20,880 --> 00:00:25,880
which you can use to replace yours and Checkout.js.
8
00:00:25,960 --> 00:00:27,830
I also attached this file
9
00:00:27,830 --> 00:00:32,610
because there I changed the Returned.js Xcode slightly.
10
00:00:32,610 --> 00:00:36,250
For example, I wrapped the buttons in an extra div.
11
00:00:36,250 --> 00:00:40,180
so you can either replace your Checkout.js file with mine
12
00:00:40,180 --> 00:00:44,880
or at least replace your Returned.js Xcode with mine.
13
00:00:44,880 --> 00:00:46,350
And once you did all of that
14
00:00:46,350 --> 00:00:49,610
you should have a form that looks like this.
15
00:00:49,610 --> 00:00:53,140
Now this is scrollable to make sure that we always
16
00:00:53,140 --> 00:00:56,373
are able to squeeze everything onto this screen.
17
00:00:57,360 --> 00:00:58,620
And of course, as always
18
00:00:58,620 --> 00:01:01,019
you can tweak the styling and change this.
19
00:01:01,019 --> 00:01:03,490
This is just some basic styling
20
00:01:03,490 --> 00:01:06,953
which does the trick and looks okay I would say.
21
00:01:08,010 --> 00:01:12,350
Now with that, if we, again, start from scratch
22
00:01:12,350 --> 00:01:16,130
we can add something to the cart, click on order,
23
00:01:16,130 --> 00:01:19,720
and then we get our form here.
24
00:01:19,720 --> 00:01:22,090
And actually this should not be cut off.
25
00:01:22,090 --> 00:01:23,330
So I will change height
26
00:01:23,330 --> 00:01:25,653
to 19rem here on the form.
27
00:01:28,180 --> 00:01:29,850
Slight oversight from my side.
28
00:01:29,850 --> 00:01:31,770
But with that, we're good.
29
00:01:31,770 --> 00:01:33,110
Now let's make sure
30
00:01:33,110 --> 00:01:36,740
we do get the values the user entered.
31
00:01:36,740 --> 00:01:39,640
We then validate them however we want.
32
00:01:39,640 --> 00:01:43,200
And we then also either show an error message
33
00:01:43,200 --> 00:01:45,950
if something's wrong with the entered data
34
00:01:45,950 --> 00:01:48,343
or we submit it to a server.
35
00:01:49,840 --> 00:01:52,920
Now let's start with getting the entered data.
36
00:01:52,920 --> 00:01:54,830
For this, we got various options,
37
00:01:54,830 --> 00:01:57,810
two main options to be precise.
38
00:01:57,810 --> 00:02:01,080
We can either listen to every keystroke
39
00:02:01,080 --> 00:02:02,990
gets the entered data and store it
40
00:02:02,990 --> 00:02:05,190
in some state and update that state
41
00:02:05,190 --> 00:02:07,840
with every keystroke or we get it once.
42
00:02:07,840 --> 00:02:10,009
Once the overall form is submitted.
43
00:02:10,009 --> 00:02:12,990
Now in the forms section, I showed you both
44
00:02:12,990 --> 00:02:14,940
and I showed you various ways
45
00:02:14,940 --> 00:02:17,740
of handling user input and validating it.
46
00:02:17,740 --> 00:02:21,580
I showed all of that in great depth there.
47
00:02:21,580 --> 00:02:23,820
Therefore here I'll keep it simpler.
48
00:02:23,820 --> 00:02:27,210
I will not get the values with every keystroke.
49
00:02:27,210 --> 00:02:29,180
Instead, I will use a reference
50
00:02:29,180 --> 00:02:31,870
with useRef to get the values
51
00:02:31,870 --> 00:02:33,723
only once the form is submitted.
52
00:02:34,660 --> 00:02:37,940
So imports use ref from React
53
00:02:37,940 --> 00:02:41,510
and then we can create a reference by calling useRef
54
00:02:41,510 --> 00:02:46,130
and we'll get a reference for our name input, for example.
55
00:02:46,130 --> 00:02:47,740
So our name input reference
56
00:02:47,740 --> 00:02:51,880
which we get by calling useRef like this
57
00:02:51,880 --> 00:02:54,490
and I'll do this four times to repeat it
58
00:02:54,490 --> 00:02:56,830
for the street input,
59
00:02:56,830 --> 00:03:01,830
for the postal code input, and for the city input.
60
00:03:05,120 --> 00:03:07,400
And now we need to connect those refs
61
00:03:07,400 --> 00:03:09,750
to the form elements here.
62
00:03:09,750 --> 00:03:13,030
And for that, we can use the special ref prop, which we set
63
00:03:13,030 --> 00:03:16,310
on the input elements to connect this first input
64
00:03:16,310 --> 00:03:18,140
to the name input ref.
65
00:03:18,140 --> 00:03:20,540
The second input here
66
00:03:20,540 --> 00:03:23,030
to the street input ref.
67
00:03:23,030 --> 00:03:27,190
The third input here to the postal code input ref
68
00:03:27,190 --> 00:03:32,173
and the last input here to the city input ref.
69
00:03:33,930 --> 00:03:37,320
Now these refs are connected and now we can use them
70
00:03:37,320 --> 00:03:39,370
to read whatever the user entered
71
00:03:39,370 --> 00:03:40,923
when the form is submitted.
72
00:03:41,880 --> 00:03:44,240
Now for this, we've got our confirm handler here
73
00:03:44,240 --> 00:03:47,120
and here we can then get the entered name
74
00:03:47,120 --> 00:03:50,680
by reaching out to the name and put Ref.current.
75
00:03:50,680 --> 00:03:53,850
It's always .current that gives you access
76
00:03:53,850 --> 00:03:55,710
to the actual value stored
77
00:03:55,710 --> 00:03:59,000
in the ref, in this case to the input element.
78
00:03:59,000 --> 00:04:01,870
And since we now have access to an input element
79
00:04:01,870 --> 00:04:05,970
we can access .value because every input element object
80
00:04:05,970 --> 00:04:08,970
in JavaScript has a value property
81
00:04:08,970 --> 00:04:13,313
that holds the actual value entered in that input element.
82
00:04:14,410 --> 00:04:18,940
And we all repeated this or the entered straight
83
00:04:20,329 --> 00:04:25,330
where we then use the streetInputRef to get the value.
84
00:04:25,460 --> 00:04:29,440
And we repeated, whoops, that should be EnteredStreet.
85
00:04:29,440 --> 00:04:32,640
We all the repeated for the enteredPostalCode
86
00:04:34,230 --> 00:04:38,810
to use the postal code input ref.
87
00:04:38,810 --> 00:04:41,130
And one last time we repeated
88
00:04:41,130 --> 00:04:45,830
for the enteredCity to use the cityInputRef value.
89
00:04:47,110 --> 00:04:48,833
And now we can validate this.
6965
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.