Project two is a fun project.
Honestly to me,
it's one of the easiest projects through the Nano Degree program.
And I say that just because the associated class
helps students get started with writing JSON objects.
And for those of you working on project two, the JSON object kind of related
to how they'll be defining object for project three.
There we go. So the first section is pretty clear.
Make sure you have some information, real or fake, about yourself or
someone else.
You have their bio, their contact info and the project gets you started along
a really good path if you just go and read the readMe.
It's associated, it's going to help you done.
Just read this part, tells you exactly what you need for each of those parts.
The second part of it has to do with functions and
it says all the resume functions should be built with modular functions.
Now what is the big deal with modularity.
Basically the word modular,
itself, means something that can be broken down into parts.
It separates your code into independent parts which can be put together
very easily.
And a way to think about this is modular sofas.
You can buy it in individual pieces and just piece them together.
You can have just a single sofa and then add on a double one to it,
depending on how long your living your room is, I guess, and your style.
>> That's very important, right?
>> It can also help when there are multiple
people working on the same project and each person can work on parts of it.
And you can put them together afterwards.
So each member would flush out a module and when they work perfectly, by that
you would also be checking on small snippets of code to work the right way.
And once that happens you can just assemble them together in one project.
Now, it can also help extend things.
So, say right now I have a function or code that only does things A, B, and C.
I can add modules to it so that it can do C, D, and E.
And in case of the interactive resume, maybe you just want to start
with one thing, say your bio, and make sure that works perfectly fine.
And then come back and add a little bit of module for your work.
And then your project.
So you can keep extending it in a really easy way.
And that really helps debugging as well.
>> Yeah. >> because you don't want to write all
your code, just to see a blank page on your Chrome browser window.
You open it up and you don't know what is going on, where you made the error.
So it's very convenient if you want to build out part by part,
module by module.
So you want to build up your bio section first, see if it renders, and
then go ahead with the rest of the sections.
>> Just go piece by piece.
And I guess with that, although we covered this in the class,
I would like to just show our students how to go and define functions.
And talk about the difference between function expression and
function declaration.
Let's just make sure that we actually go in to Sublime and
tell Sublime that this is JavaScript.
Now something that I am missing here is a semicolon.
This is called a function expression.
And it must come with semicolon at the end of the curly braces.
It's really important with styling, and styling your code in
a certain way is really important to work with the Industry and
just work at industry standards.
There's another way to define a function and we can just call it
this way, and the code associated with go over there.
However in this case since it is a function declaration, it should not have
a semicolon at the end of it.
That is an extra semicolon, you don't need it.
So quickly, to remember, if there is a var associated with your function,
it must have a semicolon.
If you don't have a var in you declaration or when you're beginning to write your function,
you do not need to have a semicolon in the end.
And then the way we would call each of these functions is just by writing
thisFunction(), and thisFunction2().
Again my semicolons are missing.
>> I just nudged Gauril.
>> [LAUGH] Semicolon.
So that's the way you would define a function.
So make sure you understand the difference between what
a function declaration versus a function expression is.
The expression comes with var,
V-A-R associated with it the declaration doesn't.
And when you have var associated with a function,
have a semicolon, otherwise don't.
It's an extra semicolon in your code reviews,
you will get pointed out on that little semicolon. >> For sure [CROSSTALK], yeah.
What does encapsulating something mean?
It's to covering it up into separate objects.
So, hold inside, or keep data pertaining to a particular object with it.
And it also helps with modularity.
So, you don't have a function defined there, and then it's associated.
If you are adding onto it, a function that you're adding on in some other
place, so it helps with unspaghettifying your code, if that word even exists.
>> Yeah, we can maybe show them a quick example of
how to write a basic structure of encapsulation.
So basically what you're doing is, you're just wraping your data and
your functions together within an object, right.
So this object is going to be able to
access all the data as well as access the member functions.
So I can type up something real quick in Sublime.
>> That's good and I'll go share your screen.
Great! So I'm screen sharing and right now
I'm going to give a JSON object named person.
And what I'm going to do is, I'm going to create a name attribute.
Oops I guess I forgot my parentheses.
>> They are quotes. >> So I have a name property, and then I assigned Poornima to it.
And then.
>> Do you want a comma, Poornima?
>> Yeah but I'm just introducing [CROSSTALK].
>> Okay.
>> Yeah. And then what I do is I have
a person.display function defined here.
Whoops.
Whoops, whoops.
>> [LAUGH] >> Okay, and then what
I'm going to do here is just say
console.log of person.name,
so semicolon [LAUGH].
And now how I can access, so
as you can see this person object has a name attribute,
and that has my name assigned to it, and it has a display function.
So, to call this function all I have to do is say display.
>> Poonima, hang on.
>> Okay.
So I just showed you encapsulate a function and
it's attribute within an object, how do you call the object and
access these functions and the attributes.
So that's what I did here and you can extend this like Gary said.
I can add a role to this and say coach.
Yeah and I can add [CROSSTALK] organization, okay, yeah.
>> Udacity.
So defining your function outside of the object using dot notation.
The dot is like an apostrophe in the English language.
So it's basically saying person's display function is going to
console.log that person.name.
Now there is another way by defining the display function,
and let's call it something else, inside the object itself.
And to do that.
Okay I guess you all are seeing.
This screen.
Thank you I'm just going to go ahead and
keep delivering your responses, as questions.
I guess we can go ahead and Poornima can
you define the function inside the person object.
So the way we would do that is just have a function, and
let's call it functionTwo or something.
And you are missing a comma.
Okay and then function name,
functionTwo, and then colon.
And this would be the function that you're telling it that this
property's actually a function, and you have curly braces and your code.
And this time it might be console.log the person's role, or something.
And then the way to actually call this function is very similar
to the display one, and you would still go person dot.
>> FunctionTwo.
>> And it will pull it for me.
>> [LAUGH] This is convenient.
>> FunctionTwo.
That's the way we'd be calling that function.
So that basically is encapsulation.
To meet specifications,
you definitely want to have your Google map that renders.
And the code for it is given to you in your helper.js.
So you need to go and uncomment that code.
And it should take the place or
location associated with wherever you live or where you work or
where you got your education from, and help you display it on the map.
That is the basic interactivity we do expect to see to meet specifications.
Beyond that you can add many bars or navigation bars.
Some sort of a skills chart that is the one I have seen and enjoyed a lot.
>> I think that is called the navigation bars are a part of Polymer.
So you can check that out.
And definitely for exceeding specifications in that area,
I've seen some of them just provide links to their contacts.
So wherever you provide contacts and where you have your LinkedIn handle or
your twitter handle mentioned there, what do you can do is you add
a hyperlink that will actually take anyone who's looking at your
resume to your Twitter account or your LinkedIn page or however.
So you can do that.
That is also definitely [CROSSTALK].
>> So something that I have seen and enjoyed a lot, and
it had to do with going and modifying the styling as well,
was when I hovered over a certain skill or contact, it would change the color.
Or there was one where it would jump, and
that I thought was particularly helpful with the nanodegree because you do
have something of that sort in your project five.
And while you all are far away from that right now, it is something to consider.
So we love seeing projects that exceed specifications.
So we encourage you to work on that.
>> And the next part also, the artistic creativity,
that if you exceed in that you get an overall Exceeds in your project.
Sometimes students overlook that they have to go above and
beyond in both the sections to actually exceed specifications in the project.
So, yeah, do you want to talk about the artistic creativity?
[LAUGH] >> Sure.
>> Okay. >> So the artistic creativity
has basically got to do with your layout in your CSS.
And we want you to have fun with the project.
It doesn't necessarily mean that you have to completely change the project.
We do love to see those projects, but
the basic expectation is that you change your font, you change the layout, and
we'll show you >> Font and colors,
because- >> Font and color scheme.
[COUGH] >> I think right now it's a shade of
gray and orange, that you used.
So yeah, go ahead.
You can alter colors and change the layout of the page entirely.