1 00:00:07,050 --> 00:00:09,515 [BLANK_AUDIO]. The problem in countdown to display 2 00:00:09,515 --> 00:00:13,043 starter is to design a function that consumes the countdown type we defined 3 00:00:13,043 --> 00:00:18,260 earlier and produces a little image of the current state of the countdown. 4 00:00:18,260 --> 00:00:21,640 It might be something that would display on your phone if you were watching the 5 00:00:21,640 --> 00:00:25,127 New Year's Eve countdown. So again, the first step of the recipe is 6 00:00:25,127 --> 00:00:29,400 signature, purpose, stub. We can do that quickly, we're going to 7 00:00:29,400 --> 00:00:35,468 consume a countdown and we're going to produce an image. 8 00:00:35,468 --> 00:00:42,412 And it's going to produce nice image of current state of countdown. 9 00:00:42,412 --> 00:00:47,745 The stub is, what we want to call the function countdown to image. 10 00:00:47,745 --> 00:00:53,038 Of a countdown and the stub for functions that produce an image, I think it's kind 11 00:00:53,038 --> 00:00:57,936 of nice to make the stub just produce a blank image, and the way I make a blank 12 00:00:57,936 --> 00:01:02,755 image is I make a square of size zero, and it can be any color you want, since 13 00:01:02,755 --> 00:01:10,290 it's of size zero, but I make it like that. 14 00:01:10,290 --> 00:01:13,210 Well that's our stub. Let's run it. 15 00:01:13,210 --> 00:01:17,440 Where this function is not defined, this square right here. 16 00:01:17,440 --> 00:01:22,950 Oh, this is the bug about not saying required 2HDP image. 17 00:01:22,950 --> 00:01:26,720 If we go to the top of the file, sure enough, there's no require there. 18 00:01:26,720 --> 00:01:32,246 So we'll say, require 2HTDP slash image, we'll run that. 19 00:01:32,246 --> 00:01:37,738 Okay, now we're okay. So this is a good example of why we check 20 00:01:37,738 --> 00:01:41,194 the wellformance of stubs, and in general why we want to run our code as often as 21 00:01:41,194 --> 00:01:45,280 we can. The sooner you find a little mistake, the 22 00:01:45,280 --> 00:01:49,023 easier it is to fix. It's easier to find one now and another 23 00:01:49,023 --> 00:01:52,917 mistake in a minute, and another mistake in a minute, than it is to find all three 24 00:01:52,917 --> 00:01:58,119 of them in three minutes. So run your code as often you can is the 25 00:01:58,119 --> 00:02:01,721 general rule that you're going to want to use. 26 00:02:01,721 --> 00:02:06,529 Okay, so now we need to do examples. The question is, how many examples do we 27 00:02:06,529 --> 00:02:11,712 need and what should they be? So again, you can get some guidance for 28 00:02:11,712 --> 00:02:15,800 this by going to the How to Design data page. 29 00:02:15,800 --> 00:02:18,248 Going down to the section on itemization's, because this is an 30 00:02:18,248 --> 00:02:22,654 itemization. And the guidance here that says, that 31 00:02:22,654 --> 00:02:27,310 there should be at least as many tests as there are cases in the itemization. 32 00:02:27,310 --> 00:02:30,299 And if there are intervals in the itemization, then there should be tests 33 00:02:30,299 --> 00:02:33,850 at all points of variance in the interval. 34 00:02:33,850 --> 00:02:36,039 Let's go back to the code, and I'll show you what that means. 35 00:02:36,039 --> 00:02:42,030 Well, we know there's at least three tests okay, so let's quickly do that. 36 00:02:42,030 --> 00:02:48,630 Check expect countdown to image of some value, some value, I'll just make three 37 00:02:48,630 --> 00:02:56,812 of these, we know there's at least three. Let's see the first one corresponds to 38 00:02:56,812 --> 00:03:02,280 this first case of the type comment false, so that's false. 39 00:03:02,280 --> 00:03:05,028 So now let's see. What should countdown to image produce 40 00:03:05,028 --> 00:03:08,836 when the countdown isn't running? Because remember, the interpretation 41 00:03:08,836 --> 00:03:11,816 tells me that this means the countdown has not yet started. 42 00:03:11,816 --> 00:03:15,261 So if the countdown hasn't yet started, I don't know, there's lots of things we 43 00:03:15,261 --> 00:03:18,190 could produce. Let's just produce that blank image 44 00:03:18,190 --> 00:03:22,590 again. You could produce something fancier than 45 00:03:22,590 --> 00:03:26,796 this. The goal here is not to make the best 46 00:03:26,796 --> 00:03:30,252 possible version of this function, but to understand what the design of this 47 00:03:30,252 --> 00:03:34,045 function's about. That'll be the first case. 48 00:03:34,045 --> 00:03:40,672 Now, we need a case for this interval. Now, we're suppose to test every point of 49 00:03:40,672 --> 00:03:44,822 variance in the interval. Conceivably, we can test with one 50 00:03:44,822 --> 00:03:48,021 somewhere in the middle, like five and ten. 51 00:03:48,021 --> 00:03:53,393 But in this particular function, the behavior doesn't meaningfully vary across 52 00:03:53,393 --> 00:03:57,340 the interval. Sure we're going to display one at one, 53 00:03:57,340 --> 00:04:02,830 and ten at ten, and three at three, but we're always going to display the number. 54 00:04:02,830 --> 00:04:06,670 So it's going to really be enough to have a single test for this interval. 55 00:04:06,670 --> 00:04:10,440 Maybe at five. Now the question is, what do we want to 56 00:04:10,440 --> 00:04:14,135 display? Well let's see, we need an image. 57 00:04:14,135 --> 00:04:22,261 And there's a function called text, which can turn a string into an image. 58 00:04:22,261 --> 00:04:30,262 And there's a function called number to string, that can turn a number into a 59 00:04:30,262 --> 00:04:34,970 string. So, if we made a text of some size, and 60 00:04:34,970 --> 00:04:39,120 right now, I'm just going to put the size of the text here. 61 00:04:39,120 --> 00:04:41,980 We'll see next week that the right thing to do is define a constant for this, but 62 00:04:41,980 --> 00:04:44,491 I'm just going to put the size right there. 63 00:04:44,491 --> 00:04:53,738 So what this is saying, is it's saying if we countdown to image of five. 64 00:04:53,738 --> 00:05:00,090 We should produce the text of the number five in font size 24 that's black. 65 00:05:00,090 --> 00:05:04,957 And what are we going to do if the countdown is complete? 66 00:05:04,957 --> 00:05:14,064 Complete is the third case. Well I say for that, we'll just say, text 67 00:05:14,064 --> 00:05:19,859 of Happy New Year. And that'll also be 24, but maybe it'll 68 00:05:19,859 --> 00:05:26,016 be some brighter color, like red. Now a very important thing has happened 69 00:05:26,016 --> 00:05:28,704 here, which is I've really worked out the behavior of this function using the 70 00:05:28,704 --> 00:05:32,628 concrete examples. So before I'm writing the actual code of 71 00:05:32,628 --> 00:05:35,112 the function, we get a lot of the designing of the behavior of this 72 00:05:35,112 --> 00:05:40,040 function. So that's the examples, let's run them. 73 00:05:41,230 --> 00:05:43,860 Right, they all run, but some are failing. 74 00:05:43,860 --> 00:05:51,368 That means they're well-formed. So now this was the stub, let's comment 75 00:05:51,368 --> 00:05:58,845 it out. Let's put a note that says, use template 76 00:05:58,845 --> 00:06:07,770 from countdown. Let's get that template. 77 00:06:07,770 --> 00:06:16,129 We'll copy it down here. And let's see. 78 00:06:16,129 --> 00:06:23,619 We rename it. We rename it countdown image, so in the 79 00:06:23,619 --> 00:06:28,129 false case well, this corresponds to this example. 80 00:06:28,129 --> 00:06:43,350 So that's just that blank image again. And this case is, let's see. 81 00:06:43,350 --> 00:06:49,188 We're going to convert, see whatever it is. 82 00:06:49,188 --> 00:07:00,394 This'll just be text of. Here's number to string, of see size 24 83 00:07:00,394 --> 00:07:06,536 and black. And when cons get complicated like this, 84 00:07:06,536 --> 00:07:10,097 we tend to put the question and answer on separate lines. 85 00:07:10,097 --> 00:07:16,553 That makes the con easier to read. And then in this final case, that 86 00:07:16,553 --> 00:07:29,361 corresponds to this example, which is just text Happy New Year, 24 red. 87 00:07:29,361 --> 00:07:34,138 Let's see what's happening here. Let's try it. 88 00:07:34,138 --> 00:07:40,070 Number-to-string, this function is not yet defined, not defined. 89 00:07:40,070 --> 00:07:45,279 I didn't get the error here, though. Oh right, the Doctor Racket version of 90 00:07:45,279 --> 00:07:54,338 this function is named with an arrow. Like this. 91 00:07:54,338 --> 00:08:01,164 Okay, one of the tests didn't pass. Happy New Year differs from happy, oh I 92 00:08:01,164 --> 00:08:08,557 didn't put the exclamation marks in. Now let's try. 93 00:08:08,557 --> 00:08:12,679 I'll save it and run it, and all three tests pass. 94 00:08:12,679 --> 00:08:17,694 Notice I had to fix two bugs there. In each case, what I did was I read the 95 00:08:17,694 --> 00:08:21,596 warning message, or I read the failing test. 96 00:08:21,596 --> 00:08:26,407 I looked at the highlighted code. And I used that to give me an idea of 97 00:08:26,407 --> 00:08:30,959 what the problem was and how to fix it. The key thing about having bugs in the 98 00:08:30,959 --> 00:08:33,875 code, is just to expect that that's part of it. 99 00:08:33,875 --> 00:08:36,087 Don't get upset about it, don't worry about it. 100 00:08:36,087 --> 00:08:38,581 It happens all the time. It's just part of it. 101 00:08:38,581 --> 00:08:42,148 The very best programmers in the world have bugs in their code. 102 00:08:42,148 --> 00:08:45,676 Fixing it is part of designing good programs. 103 00:08:45,676 --> 00:08:47,566 And we're going to talk more as we go through the course. 104 00:08:47,566 --> 00:08:52,148 About techniques for finding the bug as our programs get more and more 105 00:08:52,148 --> 00:08:56,096 sophisticated. Now again, notice that the data 106 00:08:56,096 --> 00:08:59,418 definition told us there were three cases. 107 00:08:59,418 --> 00:09:02,160 It's an itemization that includes an interval. 108 00:09:02,160 --> 00:09:06,415 That gave us the template. It also gave us the examples, and it 109 00:09:06,415 --> 00:09:09,956 helped us fill in the template for the function. 110 00:09:09,956 --> 00:09:14,020 A lot starts with the data definition. Let me show you one little side point 111 00:09:14,020 --> 00:09:16,526 here. We saw that Doctor Racket names its 112 00:09:16,526 --> 00:09:20,630 number-to-string function number arrow string. 113 00:09:20,630 --> 00:09:24,280 And we named our countdown to image function, countdown to image. 114 00:09:24,280 --> 00:09:28,180 That's because this naming convention here is something you're not going to get 115 00:09:28,180 --> 00:09:33,425 away with in other programming languages. So I wanted you to see this naming 116 00:09:33,425 --> 00:09:35,830 convention, too. But if you wanted to rename this 117 00:09:35,830 --> 00:09:39,758 function, let me show you a neat trick. What you're going to do is you click, 118 00:09:39,758 --> 00:09:45,157 going to click on check syntax here. And now, when I hover countdown to image 119 00:09:45,157 --> 00:09:51,832 here, it shows me all the calls to it. But when I hover over one of these it 120 00:09:51,832 --> 00:09:57,556 shows in the definition that defines it. Now what I'm going to do is on the Mac, 121 00:09:57,556 --> 00:10:03,724 I'm going to Ctrl-click. On Windows, I right-click and I go to 122 00:10:03,724 --> 00:10:09,861 Rename countdown-to-image. And I'll rename it up here using the 123 00:10:09,861 --> 00:10:16,055 other name in convention, and notice how I fixed all of them. 124 00:10:16,055 --> 00:10:21,070 But notice how I didn't fix the one that was in this comment. 125 00:10:21,070 --> 00:10:23,636 It only fixes the ones that aren't commented out. 126 00:10:23,636 --> 00:10:28,738 So now if you want to, you've got the function named the other way. 127 00:10:28,738 --> 00:10:34,216 This renaming command that I used is a thing called a refactoring, and it's very 128 00:10:34,216 --> 00:10:39,611 useful when programs start to get big, to have tools like that for doing things 129 00:10:39,611 --> 00:10:46,558 like renamings. We'll talk more about that as we go on in 130 00:10:46,558 --> 00:10:48,581 the course.