Check out a free preview of the full Calculator Project: JavaScript course

The "Rerendering" Lesson is part of the full, Calculator Project: JavaScript course featured in this preview video. Here's what you'd learn in this lesson:

Brian demonstrates how to display changes to the calculator screen when the calculator state changes.

Preview
Close

Transcript from the "Rerendering" Lesson

[00:00:00]
>> Brian Holt: And then down here, at the bottom, if we do all this stuff, we have to rewrite the screen, right? In fact, let's think about that for a second. So here in handleNumber, after we do all this stuff, we basically rerender the screen, right? Well, basically, anytime that a user commits any sort of action, we wanna rerender, right?

[00:00:24]
Not just on handleNumber, but if they click clear or divide or, we're always gonna wanna rerender what's showing on the screen. So why don't we just move this from line 30 here? Why don't we move it up into buttonClick, right? Cuz on every button clicked, this is gonna happen, so we might as well just put it up there.

[00:00:44]
So I'm gonna cut that up from line 30 and I'm gonna put it on line 15 here.
>> Brian Holt: That way it happens, no matter if it's a symbol or a number, it's always going to rerender what's in the buffer.
>> Brian Holt: That make sense?
>> Brian Holt: So again, I just moved that from here in handleNumber to buttonClick, so that way, I know it's always gonna happen.

[00:01:12]
So now what'll happen is,
>> Brian Holt: So if the number happens, once this finishes, it's gonna come back to buttonClick once handleNumber finishes. And then it's gonna rerender right there, right? And same thing with handleSymbol, which means now if I save this and refresh this page over here and I put 25 and click C, works.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now