1
00:00:00,039 --> 00:00:03,980
How'd it go, were you able to add
the meeting room widget to the page?

2
00:00:03,980 --> 00:00:06,307
Let me show you how I did it.

3
00:00:06,307 --> 00:00:09,571
First thing I'll do is make
a copy of the original code, and

4
00:00:09,571 --> 00:00:12,130
paste it at the bottom
of the widget.js file.

5
00:00:20,060 --> 00:00:25,140
When making multiple AJAX requests,
you should create separate xhr objects for

6
00:00:25,140 --> 00:00:30,100
each request, but they do need to
have different variable names.

7
00:00:30,100 --> 00:00:36,751
I'll just replace xhr
here with roomRequest.

8
00:00:36,751 --> 00:00:41,978
That means I also need to change

9
00:00:41,978 --> 00:00:47,206
that variable name everywhere

10
00:00:47,206 --> 00:00:51,034
it appears in my code.

11
00:00:58,111 --> 00:01:00,580
I need to adjust other
variable names as well.

12
00:01:00,580 --> 00:01:04,080
For example,
I'll change employees to rooms.

13
00:01:04,080 --> 00:01:07,830
This variable will hold
the parsed JSON string.

14
00:01:07,830 --> 00:01:12,690
I'll use that variable name in
a few other places as well.

15
00:01:19,830 --> 00:01:21,530
Next, the HTML changes a bit.

16
00:01:21,530 --> 00:01:25,009
I need to adjust this ul tag
by changing the class name, so

17
00:01:25,009 --> 00:01:28,210
that different CSS styles
can apply to this widget.

18
00:01:29,520 --> 00:01:33,490
Now, we need direct HTML saying
whether the room is available or not.

19
00:01:33,490 --> 00:01:36,120
Let's look at the JSON feed again.

20
00:01:36,120 --> 00:01:39,198
Okay, we need to check the available
property to see if a room is being

21
00:01:39,198 --> 00:01:39,792
used or not.

22
00:01:45,194 --> 00:01:52,167
I'll change the class on this
list item from in to empty,

23
00:01:52,167 --> 00:01:56,390
and on this one, from out to full.

24
00:02:01,240 --> 00:02:03,741
I need to add the room name
inside the list item, so

25
00:02:03,741 --> 00:02:05,540
let's look at the JSON feed again.

26
00:02:05,540 --> 00:02:09,770
Okay, the room's name is room,
that's simple.

27
00:02:11,960 --> 00:02:15,900
Since the HTML goes in a different div
on the page, we need to select that.

28
00:02:19,200 --> 00:02:21,686
And finally, the source for
our JSON data has changed.

29
00:02:26,750 --> 00:02:28,545
Let's save this file and
preview it, see how it works.

30
00:02:31,955 --> 00:02:34,738
Perfect, if you were able
to finish the challenge,

31
00:02:34,738 --> 00:02:36,895
did you program it differently than me?

32
00:02:36,895 --> 00:02:38,849
If so, that's cool, in programming,

33
00:02:38,849 --> 00:02:42,505
there's always more than one
way to get to the same result.

34
00:02:42,505 --> 00:02:44,885
If you had trouble with the challenge,
I'd recommend you try again.

35
00:02:44,885 --> 00:02:47,928
Go back to the previous video and
launch the workspace.

36
00:02:47,928 --> 00:02:51,265
See if you can make the changes
to get to the final result.