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.