0
1
00:00:00,120 --> 00:00:04,190
All right. So let's go through our debugging five steps together.
1

2
00:00:04,860 --> 00:00:09,280
Firstly, well, what did you expect your code to do?
2

3
00:00:09,270 --> 00:00:17,190
Well, when we ran our app, our expectation was that when we press on one of these buttons, it would, at
3

4
00:00:17,190 --> 00:00:20,060
least, for the soft egg because it's got 3 seconds,
4

5
00:00:20,100 --> 00:00:28,560
so it should be brap-brap-brap, three sections, three seconds, and moving that yellow progress bar across.
5

6
00:00:28,560 --> 00:00:30,450
But what happened instead?
6

7
00:00:31,230 --> 00:00:36,930
Well, instead of that, what actually happened is that when we press on any of these buttons,
7

8
00:00:37,170 --> 00:00:41,370
It just turns our progress down to zero. Step three.
8

9
00:00:41,370 --> 00:00:45,660
Well, what does your expectation actually depend on?
9

10
00:00:45,660 --> 00:00:53,670
Well, in our case, it depends on the fact that this percentageProgress is first going to divide zero
10

11
00:00:53,700 --> 00:00:58,380
by 3, then 1 by 3,  then 2 by 3,
11

12
00:00:58,380 --> 00:01:00,990
and it should be equal to a decimal number,
12

13
00:01:00,990 --> 00:01:01,260
right?
13

14
00:01:01,260 --> 00:01:08,540
So it should go from like naught .333 to naught .666, to close to 1,
14

15
00:01:08,550 --> 00:01:09,290
right?
15

16
00:01:09,300 --> 00:01:18,380
And that is the thing that we're using to put into our progressBar's progress. Essentially, our expectations
16

17
00:01:18,380 --> 00:01:21,780
depend on this number increasing by 1 every time,
17

18
00:01:21,860 --> 00:01:23,390
this number staying the same,
18

19
00:01:23,390 --> 00:01:32,180
and the calculation that this results in should be a decimal number that is going to be our
19

20
00:01:32,180 --> 00:01:34,120
ProgressBar.progress.
20

21
00:01:34,430 --> 00:01:35,880
Step Four.
21

22
00:01:35,990 --> 00:01:40,600
How can we test the things that our expectations depend on?
22

23
00:01:40,730 --> 00:01:47,140
We already know that this part of our code is crucial to it behaving the way we want it to.
23

24
00:01:47,150 --> 00:01:55,350
So why don't we go ahead and test it by printing our percentageProgress, and then printing.
24

25
00:01:55,380 --> 00:01:57,770
Well, what does this actually equal?
25

26
00:01:57,770 --> 00:02:00,850
What is it that we're trying to put into the progressBar?
26

27
00:02:00,860 --> 00:02:05,630
I'm hoping that it's something like naught .3 or naught .6, but I don't know.
27

28
00:02:05,660 --> 00:02:11,960
So I'm gonna go ahead and print the right-hand side here as well where that percentageProgress gets
28

29
00:02:11,960 --> 00:02:14,740
converted into a floating point number.
29

30
00:02:14,750 --> 00:02:23,920
So now let me run my app and see what happens. So when I press on, say, the Medium button, I get 0,
30

31
00:02:23,920 --> 00:02:27,270
0.0, 0, 0.0, 0, 0.0,
31

32
00:02:27,280 --> 00:02:34,210
So what's going on here? Why is it all zero, instead of 0.3, 0.4?
32

33
00:02:34,210 --> 00:02:42,880
Why is it that my percentageProgress is zero and my floating point percentageProgress is 
33

34
00:02:42,940 --> 00:02:43,960
0.0
34

35
00:02:43,960 --> 00:02:52,860
every single time? If we stepped into a playground and, let's say, I create a constant code "a" and I said
35

36
00:02:52,860 --> 00:02:59,020
it equal to 5,  create another constant "b" and set that equal to 2.
36

37
00:02:59,130 --> 00:03:08,320
So then next I divide "a" by "b," and because "a" and "b" are both integers, right, they're whole numbers,
37

38
00:03:08,430 --> 00:03:16,600
but I want a decimal number, so instead, I'm going to convert this result into a float.
38

39
00:03:16,650 --> 00:03:19,640
So we've, essentially, done the same thing over here.
39

40
00:03:19,740 --> 00:03:28,110
We've effectively just said, "Well, let's wrap this result inside a float and then we can assign this as
40

41
00:03:28,110 --> 00:03:30,440
the percentageProgress,"
41

42
00:03:30,520 --> 00:03:30,770
right?
42

43
00:03:34,470 --> 00:03:47,010
But when we do, in fact, print this percentage progress, then it always happens to be equal to zero.
43

44
00:03:47,100 --> 00:03:52,030
And if we print our floats which converts "a" divided by "b,"
44

45
00:03:52,500 --> 00:04:00,210
so right here if we simply press print, you can see that we're getting the result 2.0
45

46
00:04:00,210 --> 00:04:06,710
which is weird because we know that 5 divided by 2 is not 2.0, but it's actually 2.5.
46

47
00:04:06,750 --> 00:04:08,820
So what's going on here?
47

48
00:04:08,820 --> 00:04:14,410
Well, it all depends on the sequence in which things happen.
48

49
00:04:14,800 --> 00:04:20,320
The first thing that happens is a whole number is divided by a whole number.
49

50
00:04:20,470 --> 00:04:26,560
So 5 divided by 2, the result is going to be a whole number.
50

51
00:04:26,560 --> 00:04:32,520
So it can't have any decimal places and we can confirm this by deleting that float part.
51

52
00:04:32,740 --> 00:04:38,620
And now if I run the code, you can see what I get is 2, the integer 2.
52

53
00:04:39,340 --> 00:04:46,900
So that means all that we're doing is we're wrapping the 2, that integer, into a float which is,of course,
53

54
00:04:46,930 --> 00:04:49,050
just 2.0.
54

55
00:04:49,060 --> 00:04:59,920
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

56
00:04:59,920 --> 00:05:04,930
to be 2.0. So what should we have done instead?
56

57
00:05:04,930 --> 00:05:12,780
Well, actually what we need to do is to have converted each of these into a float before dividing it.
57

58
00:05:12,820 --> 00:05:23,050
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

59
00:05:23,050 --> 00:05:26,590
that we get is not 2.0, but 2.5.
59

60
00:05:26,620 --> 00:05:28,500
So there's two ways of doing this.
60

61
00:05:28,540 --> 00:05:38,260
We could say upfront that, actually, "a" is actually a floating-point number, and so is "b." Then in this case,
61

62
00:05:38,320 --> 00:05:41,780
we actually can simply just do "a" divided by "b,"
62

63
00:05:41,830 --> 00:05:43,750
so it's a float divided by a float,
63

64
00:05:43,750 --> 00:05:51,260
so the result will be a floating-point number which will have decimal places. So we now arrive on the
64

65
00:05:51,260 --> 00:06:00,050
last step of debugging which is to fix our code to make reality match expectations. Back in our code,
65

66
00:06:00,050 --> 00:06:02,290
let's simplify this a little bit.
66

67
00:06:02,360 --> 00:06:10,940
I'm going to make the percentageProgress equal to the float version of secondsPassed divided by totalTime.
67

68
00:06:10,940 --> 00:06:18,350
But instead of wrapping the entire thing in a float which I'm actually going to keep so that we
68

69
00:06:18,350 --> 00:06:21,070
print it and see what it's equal to.
69

70
00:06:21,080 --> 00:06:24,890
So this is our old version. Instead, in our new version,
70

71
00:06:24,890 --> 00:06:32,780
I'm going to first convert the secondsPassed variable into a float, and then I'm going to divide it by
71

72
00:06:32,840 --> 00:06:41,930
the float version of totalTime, and now I'm gonna also print this first version over here.
72

73
00:06:41,960 --> 00:06:49,960
So we're gonna print that here. And now when I run my app, let's see what happens.
73

74
00:06:55,600 --> 00:07:04,220
So I'm going to click on the Soft button and you can see we've got 0, 0.3333,
74

75
00:07:04,220 --> 00:07:13,390
0.666, and then it ends. So this version is actually giving us a calculation that has decimal places, whereas
75

76
00:07:13,420 --> 00:07:20,410
this version simply does the calculation first, round it down, and then turns it into a floating-point
76

77
00:07:20,410 --> 00:07:21,180
number.
77

78
00:07:21,220 --> 00:07:27,070
So that's the difference and that's what we've managed you to choose from our debugging.
78

79
00:07:27,070 --> 00:07:33,310
Now, we've come across another problem now. Because at the moment, our progress bar doesn't actually go
79

80
00:07:33,310 --> 00:07:33,900
to the end.
80

81
00:07:33,910 --> 00:07:37,820
It stops when it's two-thirds of the way along.
81

82
00:07:37,870 --> 00:07:39,010
What's the reason here?
82

83
00:07:39,340 --> 00:07:46,720
Well, try using the five-step process and see if you can solve this problem. So we can already see that
83

84
00:07:46,810 --> 00:07:55,950
our expectations relies on the fact that this progress actually goes to 1, but it actually stops at 6.
84

85
00:07:56,110 --> 00:08:01,750
And the reason is because we're checking to see if the secondsPassed is less than total time.
85

86
00:08:01,750 --> 00:08:07,190
So once secondsPassed reaches 2, it's not gonna go any further.
86

87
00:08:07,570 --> 00:08:13,720
So our largest number here can only be 2 if we structure our code like this.
87

88
00:08:14,320 --> 00:08:24,190
However, if we move this line where we increase the secondspassed to above our progressBar, well, now if
88

89
00:08:24,190 --> 00:08:33,220
we were to print this right-hand side and run our app,
89

90
00:08:33,460 --> 00:08:41,610
now you can see that it starts out being a third, then two-third, and then all the way DONE!
90

91
00:08:41,700 --> 00:08:45,800
Now, all we have to do is to tie up the loose ends.
91

92
00:08:45,810 --> 00:08:49,980
So I'm going to delete the print statements in my code. if you want to keep it
92

93
00:08:50,010 --> 00:08:54,150
and you want to add comments to your code, then feel free to do that now.
93

94
00:08:54,390 --> 00:09:00,990
The next thing we need to address is that we need to be able to reset the progressBar down to zero,
94

95
00:09:01,350 --> 00:09:05,930
so that when we press one of the other buttons, it can restart.
95

96
00:09:05,970 --> 00:09:11,970
So the place where we need to do that is, of course, where the user selects a different hardness.
96

97
00:09:12,000 --> 00:09:18,300
So in addition to invalidating the timer, setting the hardness to the current title, and also setting
97

98
00:09:18,300 --> 00:09:21,930
the total time based on which button they selected,
98

99
00:09:21,930 --> 00:09:28,020
we're also going to set the progressBar's progress back down to 0.0,
99

100
00:09:28,140 --> 00:09:29,940
so a floating point number,
100

101
00:09:30,090 --> 00:09:37,860
and we're also going to set the secondsPassed back down to zero to start from the beginning again.
101

102
00:09:37,920 --> 00:09:45,570
And finally, we want to reset our titleLabel as well because once the timer is done, it's going to read
102

103
00:09:45,750 --> 00:09:48,550
done, right, in the text of the timer label.
103

104
00:09:48,600 --> 00:09:56,370
So instead, if we set this to equal the hardness that the user selected, so the title of the button, then
104

105
00:09:56,400 --> 00:10:01,510
we'll be able to see at a glance which hardness of egg we're actually making right now.
105

106
00:10:01,530 --> 00:10:09,970
So let's run our app and see this in action. If we start out with Soft, then it counts for 3 seconds
106

107
00:10:09,970 --> 00:10:11,270
until it's DONE!
107

108
00:10:11,320 --> 00:10:22,730
Medium will count for 4 seconds and Hard will count for 7 seconds.
108

109
00:10:22,850 --> 00:10:23,800
That's it.
109

110
00:10:23,810 --> 00:10:27,700
Feel free to modify your egg counter as much as you like,
110

111
00:10:27,830 --> 00:10:33,020
but we've got one final challenge for you before we tie up this module.
111

112
00:10:33,020 --> 00:10:39,350
Now, notice that in the skeleton project, we already included an alarm sounds and we want you to use the
112

113
00:10:39,350 --> 00:10:46,550
knowledge you gained in Xylophone, especially the part where you looked up how to play sound in
113

114
00:10:46,550 --> 00:10:48,800
StackOverflow to look it up again.
114

115
00:10:48,860 --> 00:10:51,560
Figure out how to play the alarm sound
115

116
00:10:51,650 --> 00:10:57,350
once the timer is done. Pause the video and try to complete that challenge.
116

117
00:10:57,440 --> 00:11:03,220
And once you're done, have a look at the completed code in the module to see if you've gotten it right.
117

118
00:11:03,260 --> 00:11:08,900
So I hope you enjoy this module making your Egg Timer and I'll see you on the next module.