Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript AJAX Basics (retiring) Programming AJAX Stage 2 Challenge Answer

Posted by Blake Hutchinson
Blake Hutchinson
21,695 Points

Adding to the CSS file (main.css) is going to be necessary to get the page to look like the way Dave has it.

I added to the widget.js file just like he did. To get it to show up on the index.html page, I added a DIV tag above the "Employee Office Status" H2 line.

<aside class="grid-30 list"> <!-- pre-existing code -->
  <h2>Meeting Rooms</h2>
    <div id="roomList">

    </div>

In the main.css file it looks like the "ul.rooms .empty:before" would almost match the code below except that for that the content value would be dynamic for "ul.rooms .empty:before". I'm not sure how that would be done.

ul.bulleted .in:before {
  content: "IN";
  background-color: #5fcf80;
}

I created the rooms.json file inside the data directory.

[
  {
    "room": 101,
    "available": false
  },
  {
    "room": 102,
    "available": true
  },
  {
    "room": 103,
    "available": false
  },
  {
    "room": 104,
    "available": false
  },
  {
    "room": 105,
    "available": true
  },
  {
    "room": 106,
    "available": true
  }
]

It's going to take some tweaking of the main.css file to get the index.html page to look just like the instructor's.

Blake Hutchinson
Blake Hutchinson
21,695 Points

At the time of this post this is how I have my main.css code and the result isn't looking so good. I know I'm going to have to unpair the ul.rooms code from the ul.bulleted code for the most part.

ul.bulleted li, ul.rooms li { // ul.rooms li = my addition
  padding-left: 40px;
}

ul.bulleted li:before, ul.rooms li:before { // ul.rooms li:before = my addition
  position: absolute;
  top: 0;
  left: 0;
  color: white;
  font-size: .5em;
  padding: 3px 2px 2px;
  border-radius: 2px;
  text-align: center;
  width: 25px;
}

ul.bulleted .in, ul.rooms .empty { // ul.rooms .empty = my addition
  color: #5A6772;
}

ul.bulleted .in:before, ul.rooms .empty:before { // ul.rooms .empty:before = my addition
  content: "IN";
  background-color: #5fcf80;
}

ul.bulleted .out, ul.rooms .full { // // ul.rooms .full = my addition
  color: #A7B4BF;
}

ul.bulleted .out:before, ul.rooms .full:before { // ul.rooms .full:before = my addition
  content: "OUT";
  background-color: #ed5a5a;
}

When you look at Dave's "Meeting Rooms", he has the room numbers inside the boxes, and like I was saying, that looks like that was done dynamically. The way I would do it is to add some styles using the DOM for the statusHTML variable after the closing brace for the for loop.

document.getElementsByClassName('empty').style.background='#5fcf80'";
document.getElementsByClassName('full').style.background='#ed5a5a'";

1 Answer

Dave McFarland
STAFF
Dave McFarland
Treehouse Teacher
Dave McFarland
Dave McFarland
Treehouse Teacher

Hi Blake Hutchinson

There's a new workspace on that challenge page http://teamtreehouse.com/library/ajax-basics/programming-ajax/stage-2-challenge

That workspace has the required HTML, CSS and JSON files already in place. You don't need to add that yourself, but it looks like you did, so good job!!!