Check out a free preview of the full Deep JavaScript Foundations course:
The "Challenge 4: Closure" Lesson is part of the full, Deep JavaScript Foundations course featured in this preview video. Here's what you'd learn in this lesson:

In this challenge, students use closure to expand an entry of text.

Get Unlimited Access Now

Transcript from the "Challenge 4: Closure" Lesson

[00:00:00]
>> Kyle Simpson: We're gonna jump into exercise 4. This one is, it's again the same running example here where still working with our work log but now we're gonna add a new feature to it. The ReadMe fully describes this so I really strongly encourage you to read it, don't skip over it, but let me just describe to you what you're doing.

[00:00:17] If you type out a certain length description that is longer than the min length. I think it's 20 characters or whatever it is. If you type out a longer description into the box and you add it to your little work log, you'll notice that it dot, dot, dots it.

[00:00:30] It truncates it, right? What we now wanna do is make it so that those little truncated, those little shortened descriptions, if you click on the shortened description, it expands it. And the way I want you to solve this, is I want you to solve it with closure. I want you to attach a click handler to that actual description element, to that dom element, that remembers the long form of the description, even though you've only put the shortened form into the dom element.

[00:00:58] And when that click handler fires, it should update the text to the longer description.
>> Kyle Simpson: Those details are described in the ReadMe. Don't get worried if that sounds crazy. That's literally about five lines of code, so it's not a complex thing at all. But I just wanna show you this example of using closure to your advantage.