WEBVTT

1
00:00:00.390 --> 00:00:01.390
Congratulations.

2
00:00:01.390 --> 00:00:04.670
The boss was so happy with the employee
widget you created

3
00:00:04.670 --> 00:00:08.030
that he's asked for you to add another
item to the website.

4
00:00:08.030 --> 00:00:11.110
In your office, you have six different
meeting rooms.

5
00:00:11.110 --> 00:00:13.000
Everyone at the company uses them for
different

6
00:00:13.000 --> 00:00:17.530
things, video conferences, small group
meetings, telephone calls.

7
00:00:17.530 --> 00:00:19.300
The boss now wants you to create a widget

8
00:00:19.300 --> 00:00:22.560
that shows which rooms are available and
which are full.

9
00:00:22.560 --> 00:00:24.930
The designer has already created a mockup
for you

10
00:00:24.930 --> 00:00:28.170
to see, as well as example HTML and CSS.

11
00:00:28.170 --> 00:00:32.100
This is very similar to the other project.

12
00:00:32.100 --> 00:00:33.910
You need to make an AJAX request for

13
00:00:33.910 --> 00:00:37.700
JSON data, parse that data, and generate
some HTML.

14
00:00:38.760 --> 00:00:41.330
You can click the Launch Workspace button
to open

15
00:00:41.330 --> 00:00:44.810
a new workspace with the project you just
finished.

16
00:00:44.810 --> 00:00:48.550
Add your new programming to the widget.js
file,

17
00:00:48.550 --> 00:00:50.370
the same file the other programming is in.

18
00:00:51.450 --> 00:00:54.040
Here are a few key points for you to keep
in mind.

19
00:00:54.040 --> 00:00:56.410
These are also listed in the teacher's
notes on this page.

20
00:00:57.530 --> 00:01:00.560
First, you'll be adding another AJAX
request, so you need

21
00:01:00.560 --> 00:01:03.370
to repeat the same four steps of the AJAX
process.

22
00:01:03.370 --> 00:01:09.140
You'll have to create a second XML HTTP
Request object, a new callback

23
00:01:09.140 --> 00:01:13.550
for the object, and use the open and send
methods on that object.

24
00:01:13.550 --> 00:01:17.470
Second, the URL for the JSON data has
changed.

25
00:01:17.470 --> 00:01:20.780
It's ../data/rooms.json.

26
00:01:22.240 --> 00:01:25.855
Third, the basic HTML for the finished
widget will look like this.

27
00:01:25.855 --> 00:01:34.089
[SOUND] Fourth, the complete HTML goes
inside a div with the ID of roomList.

28
00:01:34.089 --> 00:01:36.772
Because this widget works a lot like the
employee status

29
00:01:36.772 --> 00:01:40.360
widget, you can start by making a
duplicate of that code.

30
00:01:40.360 --> 00:01:44.870
Just copy the code in the widget.js file
and paste it at the end.

31
00:01:44.870 --> 00:01:47.980
If you have trouble, you can go to the
forum and ask for some help.

32
00:01:47.980 --> 00:01:49.920
If you just wanna know the answer, I'll
show you

33
00:01:49.920 --> 00:01:52.060
how to program this new widget in the next
video.