Build an Object Challenge, Part 1: Pre Solution-Vid.

Question

Hello all you sassy little scripters out there,

Here's my attempt at the lesson based on ol' Dave McFarland 's instructions as given in the part1 video.

//Build an object challenge

/*+++
1. create a script that creates a bunch of student records
2. then prints those records to a webpage

Steps:
1. create a data structure to hold information about a group of students 
    an array named students
    this will hold a list of objects
    each object will represent a student
    each object will contain the following properties. 
        name
        track
        achievements - number value
        points - number value
    at least 5 student objects

*/

I decided to take the opportunity to use the JSON thingy he taught us by accessing the teamtreehouse/uername.json for various users I'd then grab the data and count the badges and check the points that way. Yeah, could've just gone to their profile pages but how ya gonna learn that way?

Anyway... my code is below... and scroll to the end for my codepen of it.

function print(message){
     document.write(message);
     return "As you requested, sir."
};


var students = [
    {
        name: "Huckleberry",
        track: "Starting a Business",
        achievements: 90,
        points: 7502

    },
    {
        name: "Marcus Parsons",
        track: "PHP Development",
        achievements: 97,
        points: 9544
    },
    {
        name: "Nicholas Olsen",
        track: "Front End Development",
        achievements: 158,
        points: 11289
    },
    {
        name: "William Li",
        track: "Web Design",
        achievements: 157,
        points: 17809
    },
    {
        name: "Colin Key",
        track: "Web Design",
        achievements: 16,
        points: 1023
    }
];



var confirm = prompt("Would you like to meet our students?");
makeItSo = confirm.toUpperCase();

if (makeItSo === 'YES'){
    for (var i = 0; i < students.length; i++){

        var studentList = "<p>Fantastical and Fantabulous Student #" + (i + 1) + " is:<br><ul>";

        for (prop in students[i]){

            studentList += "<li><span>" + prop + "</span>: " + students[i][prop] + "</li>"
            console.log(prop, ":", students[i][prop]);
        }


        studentList+= "</ul></p>";
        print(studentList);
    }
} else {
    alert("OH YEAH? WELL... WELL YOU'RE NOT MY REAL MOM!");
}

http://codepen.io/huckleberry/pen/zxVGqp

I'm not sure if this is how he wanted it done but it works out nicely. Any comments, suggestions or "lol... foolish Huck" comments are welcome and appreciated.

Cheers,

Huck -

Answer 1 · 2015-04-09T10:58:18Z

April 9, 2015 10:58am

Great job Hucke. :)

I'm interested in why in your codepen when you close the #output div it wrecks the CSS list style property and shows the bullet points. I don't know why closing the element would make such a difference but the script looks great. :)

Answer 2 · 2015-04-17T19:04:41Z

April 17, 2015 7:04pm

Yeah... that is a real head scratcher... I guess its a codepen bug? or, some fancy un-advertized feature where you don't have to close your divs...

Answer 3 · 2015-09-02T23:44:24Z

September 2, 2015 11:44pm

The reason you get the bullet points in the CodePen when you close the div is because you're using document.write, which just outputs the string/HTML wherever the script is in the HTML, which for CodePen, is always just before the closing body tag.

Change your print function to the following and it should work:

function print(message){
     document.getElementById('output').innerHTML = message;
     return console.log("As you requested, sir.");
}

Otherwise, nice job!

Here's mine:

var html = '';
var students = [
  {
    name: 'Iain Simmons',
    track: 'Full Stack JavaScript',
    achievements: 219,
    points: 18767
  },
  {
    name: 'Dave McFarland',
    track: 'Full Stack JavaScript',
    achievements: 197,
    points: 18375
  },
  {
    name: 'Kenneth Love',
    track: 'Learn Python',
    achievements: 38,
    points: 8504
  },
    {
    name: 'Andrew Chalkley',
    track: 'Full Stack JavaScript',
    achievements: 175,
    points: 14544
  },
  {
    name: 'Nick Pettit',
    track: 'Front End Web Development',
    achievements: 79,
    points: 6470
  }
];

function print(nodeID, message) {
  document.getElementById(nodeID).innerHTML = message;
}

function buildDefinitionList(obj) {
  var prop;
  var dListHTML = '<dl>';
  for (prop in obj) {
    dListHTML += '<dt>' + prop + '</dt>';
    dListHTML += '<dd>' + obj[prop] + '</dd>';
  }
  dListHTML += '</dl>';
  return dListHTML;
}

function buildStudentList(list) {
  var i;
  var uListHTML = '<ul>';
  for (i = 0; i < list.length; i++) {
    uListHTML += '<li>' + buildDefinitionList(list[i]) + '</li>';
  }
  uListHTML += '</ul>';
  return uListHTML;
}

html = buildStudentList(students);
print('output', html);

Welcome to the Treehouse Community

Looking to learn something new?

huckleberry

huckleberry

Build an Object Challenge, Part 1: Pre Solution-Vid.

3 Answers

Jonathan Grieve

Jonathan Grieve

huckleberry

huckleberry

Jake Hudson

Jake Hudson

Iain Simmons

Iain Simmons