All right. So let's go through our debugging five steps together. 1
Firstly, well, what did you expect your code to do? 2
Well, when we ran our app, our expectation was that when we press on one of these buttons, it would, at 3
least, for the soft egg because it's got 3 seconds, 4
so it should be brap-brap-brap, three sections, three seconds, and moving that yellow progress bar across. 5
But what happened instead? 6
Well, instead of that, what actually happened is that when we press on any of these buttons, 7
It just turns our progress down to zero. Step three. 8
Well, what does your expectation actually depend on? 9
Well, in our case, it depends on the fact that this percentageProgress is first going to divide zero 10
by 3, then 1 by 3, then 2 by 3, 11
and it should be equal to a decimal number, 12
right? 13
So it should go from like naught .333 to naught .666, to close to 1, 14
right? 15
And that is the thing that we're using to put into our progressBar's progress. Essentially, our expectations 16
depend on this number increasing by 1 every time, 17
this number staying the same, 18
and the calculation that this results in should be a decimal number that is going to be our 19
ProgressBar.progress. 20
Step Four. 21
How can we test the things that our expectations depend on? 22
We already know that this part of our code is crucial to it behaving the way we want it to. 23
So why don't we go ahead and test it by printing our percentageProgress, and then printing. 24
Well, what does this actually equal? 25
What is it that we're trying to put into the progressBar? 26
I'm hoping that it's something like naught .3 or naught .6, but I don't know. 27
So I'm gonna go ahead and print the right-hand side here as well where that percentageProgress gets 28
converted into a floating point number. 29
So now let me run my app and see what happens. So when I press on, say, the Medium button, I get 0, 30
0.0, 0, 0.0, 0, 0.0, 31
So what's going on here? Why is it all zero, instead of 0.3, 0.4? 32
Why is it that my percentageProgress is zero and my floating point percentageProgress is 33
0.0 34
every single time? If we stepped into a playground and, let's say, I create a constant code "a" and I said 35
it equal to 5, create another constant "b" and set that equal to 2. 36
So then next I divide "a" by "b," and because "a" and "b" are both integers, right, they're whole numbers, 37
but I want a decimal number, so instead, I'm going to convert this result into a float. 38
So we've, essentially, done the same thing over here. 39
We've effectively just said, "Well, let's wrap this result inside a float and then we can assign this as 40
the percentageProgress," 41
right? 42
But when we do, in fact, print this percentage progress, then it always happens to be equal to zero. 43
And if we print our floats which converts "a" divided by "b," 44
so right here if we simply press print, you can see that we're getting the result 2.0 45
which is weird because we know that 5 divided by 2 is not 2.0, but it's actually 2.5. 46
So what's going on here? 47
Well, it all depends on the sequence in which things happen. 48
The first thing that happens is a whole number is divided by a whole number. 49
So 5 divided by 2, the result is going to be a whole number. 50
So it can't have any decimal places and we can confirm this by deleting that float part. 51
And now if I run the code, you can see what I get is 2, the integer 2. 52
So that means all that we're doing is we're wrapping the 2, that integer, into a float which is,of course, 53
just 2.0. 54
So "a" divided by "b" is 2, float of 2 is 2.0, and float of "a" divided by "b" is, again, also going 55
to be 2.0. So what should we have done instead? 56
Well, actually what we need to do is to have converted each of these into a float before dividing it. 57
So if we turned "a" into a float, and then "b" into a float, and then divide it ,then you'll see that the result 58
that we get is not 2.0, but 2.5. 59
So there's two ways of doing this. 60
We could say upfront that, actually, "a" is actually a floating-point number, and so is "b." Then in this case, 61
we actually can simply just do "a" divided by "b," 62
so it's a float divided by a float, 63
so the result will be a floating-point number which will have decimal places. So we now arrive on the 64
last step of debugging which is to fix our code to make reality match expectations. Back in our code, 65
let's simplify this a little bit. 66
I'm going to make the percentageProgress equal to the float version of secondsPassed divided by totalTime. 67
But instead of wrapping the entire thing in a float which I'm actually going to keep so that we 68
print it and see what it's equal to. 69
So this is our old version. Instead, in our new version, 70
I'm going to first convert the secondsPassed variable into a float, and then I'm going to divide it by 71
the float version of totalTime, and now I'm gonna also print this first version over here. 72
So we're gonna print that here. And now when I run my app, let's see what happens. 73
So I'm going to click on the Soft button and you can see we've got 0, 0.3333, 74
0.666, and then it ends. So this version is actually giving us a calculation that has decimal places, whereas 75
this version simply does the calculation first, round it down, and then turns it into a floating-point 76
number. 77
So that's the difference and that's what we've managed you to choose from our debugging. 78
Now, we've come across another problem now. Because at the moment, our progress bar doesn't actually go 79
to the end. 80
It stops when it's two-thirds of the way along. 81
What's the reason here? 82
Well, try using the five-step process and see if you can solve this problem. So we can already see that 83
our expectations relies on the fact that this progress actually goes to 1, but it actually stops at 6. 84
And the reason is because we're checking to see if the secondsPassed is less than total time. 85
So once secondsPassed reaches 2, it's not gonna go any further. 86
So our largest number here can only be 2 if we structure our code like this. 87
However, if we move this line where we increase the secondspassed to above our progressBar, well, now if 88
we were to print this right-hand side and run our app, 89
now you can see that it starts out being a third, then two-third, and then all the way DONE! 90
Now, all we have to do is to tie up the loose ends. 91
So I'm going to delete the print statements in my code. if you want to keep it 92
and you want to add comments to your code, then feel free to do that now. 93
The next thing we need to address is that we need to be able to reset the progressBar down to zero, 94
so that when we press one of the other buttons, it can restart. 95
So the place where we need to do that is, of course, where the user selects a different hardness. 96
So in addition to invalidating the timer, setting the hardness to the current title, and also setting 97
the total time based on which button they selected, 98
we're also going to set the progressBar's progress back down to 0.0, 99
so a floating point number, 100
and we're also going to set the secondsPassed back down to zero to start from the beginning again. 101
And finally, we want to reset our titleLabel as well because once the timer is done, it's going to read 102
done, right, in the text of the timer label. 103
So instead, if we set this to equal the hardness that the user selected, so the title of the button, then 104
we'll be able to see at a glance which hardness of egg we're actually making right now. 105
So let's run our app and see this in action. If we start out with Soft, then it counts for 3 seconds 106
until it's DONE! 107
Medium will count for 4 seconds and Hard will count for 7 seconds. 108
That's it. 109
Feel free to modify your egg counter as much as you like, 110
but we've got one final challenge for you before we tie up this module. 111
Now, notice that in the skeleton project, we already included an alarm sounds and we want you to use the 112
knowledge you gained in Xylophone, especially the part where you looked up how to play sound in 113
StackOverflow to look it up again. 114
Figure out how to play the alarm sound 115
once the timer is done. Pause the video and try to complete that challenge. 116
And once you're done, have a look at the completed code in the module to see if you've gotten it right. 117
So I hope you enjoy this module making your Egg Timer and I'll see you on the next module.