This course will be retired on February 5, 2020. We recommend "AJAX Basics" for up-to-date content.
Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Stage 2 Challenge1:52 with Dave McFarland
Ready to try some AJAX programming on your own? In this challenge you'll get instructions for creating another widget for a company's intranet.
- Repeat the 4 steps of the Ajax process
- The URL for the JSON data is
- Finished widget HTML looks like this:
4. Complete HTML goes inside a div with the ID of
<ul class="rooms"> <li class="full">101</li> <li class="empty">102</li> <li class="full">103</li> <li class="full">104</li> <li class="empty">105</li> <li class="empty">106</li> </ul>
The boss was so happy with the employee widget you created
that he's asked for you to add another item to the website.
In your office, you have six different meeting rooms.
Everyone at the company uses them for different
things, video conferences, small group meetings, telephone calls.
The boss now wants you to create a widget
that shows which rooms are available and which are full.
The designer has already created a mockup for you
to see, as well as example HTML and CSS.
This is very similar to the other project.
You need to make an AJAX request for
JSON data, parse that data, and generate some HTML.
You can click the Launch Workspace button to open
a new workspace with the project you just finished.
Add your new programming to the widget.js file,
the same file the other programming is in.
Here are a few key points for you to keep in mind.
These are also listed in the teacher's notes on this page.
First, you'll be adding another AJAX request, so you need
to repeat the same four steps of the AJAX process.
You'll have to create a second XML HTTP Request object, a new callback
for the object, and use the open and send methods on that object.
Second, the URL for the JSON data has changed.
Third, the basic HTML for the finished widget will look like this.
[SOUND] Fourth, the complete HTML goes inside a div with the ID of roomList.
Because this widget works a lot like the employee status
widget, you can start by making a duplicate of that code.
Just copy the code in the widget.js file and paste it at the end.
If you have trouble, you can go to the forum and ask for some help.
If you just wanna know the answer, I'll show you
how to program this new widget in the next video.
You need to sign up for Treehouse in order to download course files.Sign up