Check out a free preview of the full Advanced JavaScript course:
The "Exercise 3" Lesson is part of the full, Advanced JavaScript course featured in this preview video. Here's what you'd learn in this lesson:

For this exercise, you will be using the files in the day1/ex3 folder. Look at the README.md file for exercise instructions.

Get Unlimited Access Now

Transcript from the "Exercise 3" Lesson

[00:00:00]
>> [MUSIC]

[00:00:04]
>> Kyle Simpson: This next exercise again probably shouldn't take the ten minutes, but what you're gonna do is essentially you're gonna take the fixed version of what you finished in exercise two. You can either take my fixed JS, or you can take yours if you like your code, either way.

[00:00:18] But that's gonna be the starting point for ex3.js. So when you open ex3.js, you'll see that it's empty. And it says copy in the fixed code as your starting point. So I will do that, I will take the fixed version from ex2. Copy that in as my starting point.

[00:00:42] Now, what does this readme tell us to do? We are going to revisit the work from exercise 2, but we are going to take what we just learned about the prototype and we are going to do away with the module pattern. And, instead, we're going to implement this as a class with prototypes.

[00:00:58] So, I'm going to get you started, and then I'm going to give you a couple of minutes so that you get some practice with it. So, the first thing is that we no longer have a module factory. What we're instead going to have is a constructor, which we'll call notes manager, for convenience sake.

[00:01:14] Consistency. We'll come back to his contents here in just a moment, but now these things that were private functions inside of our module are now going to be public methods on our API. The way do that is notesmanager.prototype.addNote = function that takes a note parameter. And then we unindent one level, add a semicolon.

[00:01:43] Now in all places inside of these functions that they reference things that were private variables, they need to now reference properties under this object. So I need to say this.$notes .preprend. I'll do one more for you. NotesManager.prototype.addCurrentNote = function
>> Kyle Simpson: Add my semicolon. That new note, that needs to have a this reference in front of it, this guy needs a this reference, this guy needs a this reference, and this guy needs a this reference.

[00:02:27] So your exercise is to continue that conversion, convert from the module format to the prototype format, and insert your this references. Pay particular attention to your event bindings, make sure you're using binding where you need to. And I'll give you five or eight minutes for you to play around with typing all that out and we'll regroup.