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.