Original subtitles

1

So now we want to start on our JavaScript for this project.

2

So basically we want to be able to click on next and have it move to the next one.

3

Click on previous.

4

Haven't moved to the one before it.

5

So let's start off by bringing in what we need.

6

Let's bring in progress and set that equal to document doget element by D and we have an idea of progress.

7

OK, we also want to bring in the buttons so we have Prešov set that to preserve and then we have next

8

set that to next.

9

And then we also want to bring in our circles.

10

So for this, since there's more than one, make sure you put a dot here because it's the class circle.

11

And since it's more than one, we're going to use query selector all which will bring them all in as

12

a node list, which is similar to an array.

13

So let's call this circles.

14

All right.

15

So that's all we want to bring in from the DOM.

16

So this here is going to be basically like an index.

17

We're going to call this current active, which is going to represent whichever one is active, which

18

will set to one by default.

19

And then let's have some event listeners.

20

So on actually, it's due next verse.

21

So we'll take the next button and let's add an event listener onto it.

22

We want to listen for a click.

23

And when it clicks, we're going to run a function and we want to take that whatever the current active

24

is at the time and increment it by one.

25

So plus plus will you know if it's set to one, it'll set it to two and so on.

26

And in fact, we'll just go ahead and console log current active.

27

And if we go over here and open up the console, I click next goes to two, three, four or five and

28

so on.

29

So let's get rid of that.

30

We do want to keep it within its boundaries.

31

So let's make sure that if it gets to the end, it doesn't go past four.

32

So we'll do an if statement here.

33

And let's say if the current active is greater than and then we can take circles which we brought in

34

and it's a node list so we can treat it like an array.

35

So it has a length property.

36

So we'll say if it's greater than the length length, meaning the amount of circles in this case for

37

then let's set the current active let's set that to whatever the length is, which will be, you know,

38

the last one.

39

So we're going to say circles dot length.

40

OK, now if we go and we click next actually adds to the console log again.

41

So current, active and the next so two, three, four and noticed is staying at four, it's not going

42

to five, so that's what we want.

43

And then for now, we're going to have obviously we need to, you know, show this in the dorm.

44

But before we do that, I just want to create the previous.

45

So I'm going to copy that.

46

And let's say we've got out event listener and we want to take the current active and we want to decrement

47

that by one.

48

So we'll do minus minus.

49

And then for the check here, we're going to say if the current active is less than one, then we know

50

we're at the very beginning.

51

So we just want to set current active to one, OK, because we don't want it to go under into, you

52

know, zero negative and so on.

53

So we have those two event listeners.

54

Now, after we do that, we're going to call a function called update.

55

So we're going to call update there.

56

We're also going to call it right here.

57

So basically we're going to update the dorm.

58

So down here, let's create a function called update.

59

And first thing we'll do here is take our circles, which is a node list, and we can loop through those

60

with a for each and the four each takes in a function.

61

I'm going to use an arrow function and we want to say for each circle and then I'm also going to get

62

the index, OK?

63

So for each circle, I'm going to check to see if the index of that particular circle is less than the

64

current active.

65

If that's so, then I'm going to add the active class onto it.

66

So I'll take that particular circle.

67

I keep misspelling circle and say classless dot and then we can add in the class of active.

68

OK, else then we want to take a circle and remove the class.

69

So classless dot remove

70

active.

71

OK, so I'll save that.

72

And now if I click this you'll see that this second circle is now highlighted by click next again.

73

Highlighted next again and so on.

74

All right.

75

And I realize we can't do the previous yet, but we'll get to that.

76

So after this for each year, let's get all of the active circles, because, you know, once we click

77

this active is on now on all of these circles, I can show you here so you can see activities on all

78

of them.

79

So I'm going to say const actives and set that to document dot, query selector all.

80

And we want all the class of active.

81

All right.

82

Now we want to handle the the progress bar because we don't want just the circles lighting up.

83

We want these lines to light blue as well.

84

So the way we can do this, let me just first of all, console log.

85

So if I say actives, let's do actives length.

86

And let's do circles dot length and go to our console here and click so we get to four.

87

So two is the number of actives and the circles is always going to be four because that's all of the

88

circles I click again.

89

We get three, four, four, four.

90

So I want to get a percentage for our progress, length or not length width, because if we look in

91

our progress class, it's a width of zero percent.

92

We want to change that.

93

When we go ahead and click, we want that to change so that the line goes to the next one, the next

94

one and so on.

95

So if we take the actives length, actually, let's just cancel log this, take the active length divide

96

that by Circle's length we get point five point seventy five and then one.

97

Now our goal is to get these to be percentages for the success with property.

98

So let's wrap this right here, this whole thing in parentheses, and then let's multiply that by one

99

hundred and then that's going to give us fifty, 75, 100, which isn't correct, because 50 is going

100

to bring it to here and then it'll go to 75.

101

Actually we can just we can try this so you can see.

102

So instead of console logging this, let's get rid of the wrapped parentheses here and we'll keep this

103

wrapped and set the progress dot style.

104

And we want the with property, which is initially zero percent.

105

And let's set it to that and see what happens if I click next.

106

All right.

107

So we're not seeing the line because what we're doing here is setting the width to 100.

108

But there's no unit.

109

It has to be 100 percent.

110

So I'm just going to concatenate on with a plus sign a percent.

111

Now, let's click next and you can see the blue line fills up, although it's not going to the right

112

place, it's going past the two because remember, it was 50, 75, 100, which we don't want.

113

We want to change it to be like, you know, thirty three percent, 66 percent.

114

So we can fix that by just taking the circles, lengthen the actives length and subtracting one from

115

those.

116

Which will give us a lower percentage, so let's do that and now if I click next.

117

Wait a minute, that's not right.

118

We have to wrap this and we have to wrap this.

119

There we go.

120

So now it goes to two.

121

So it's around the width is around three percent and then it goes to three, which is around 66.

122

And then next.

123

And it goes to four.

124

All right.

125

Now, obviously, we can't go back with the previous.

126

So let's continue on here.

127

And I want to first check we're just going to do an if statement here and check the current active.

128

So if the current active is equal to one, so if it's in its first place, we want previous to be disabled

129

so we can take the previous spot and then we can simply set disabled and we can set that to true.

130

It's initially set to true, but we're going to make it we're going to take that off once we click next.

131

But if we go back, we want to go back to true.

132

So we want to set that and then let's do an else if and for this else if we're going to say if the current

133

basically want to see if it's at the end.

134

So if it equals the total length of circles, circles, length, then we know it's at the end.

135

So then we'll disable the next button.

136

So we'll take next and set disabled and set that to true else.

137

Then we want to we don't want either of them to be disabled.

138

So we'll take previous DOT disabled and set that to false.

139

And we also want to do the same with next.

140

This means that we're in the middle, so we'll save that.

141

I'll click next.

142

And now previous is available to us if I click next again and then next again.

143

Now I can't click next because we're at the end by click previous goes back back and then goes disabled.

144

OK, so that's it.

145

And I know obviously this by itself isn't much use to you, but you can at least see how the logic works

146

as far as the progress bar.

147

And you could use this in any kind of steps, really a shopping cart, whatever it might be, a form,

148

some kind of form.

149

So feel free to take this and run with it and create something bigger and better.

150

But that's it.

151

Let's go ahead and move on to the next project.