1
00:00:02,120 --> 00:00:07,120
Now this demo on which we work here, is generally working.

2
00:00:07,210 --> 00:00:09,970
The character account here is updating.

3
00:00:09,970 --> 00:00:10,880
But,

4
00:00:10,880 --> 00:00:15,610
if you compare this to the demo I showed you earlier

5
00:00:15,610 --> 00:00:16,710
in this course,

6
00:00:16,710 --> 00:00:19,750
where I showed you what we would be building,

7
00:00:19,750 --> 00:00:24,310
then you see that one important feature is missing here.

8
00:00:24,310 --> 00:00:27,270
As I type more and more characters,

9
00:00:27,270 --> 00:00:30,780
if we go below 10 remaining characters,

10
00:00:30,780 --> 00:00:35,190
in the demo I showed you, the color here that changed

11
00:00:35,190 --> 00:00:38,420
and the background color of the input field changed.

12
00:00:38,420 --> 00:00:40,890
And that's not happening here.

13
00:00:40,890 --> 00:00:43,730
Now we need two additional building blocks

14
00:00:43,730 --> 00:00:45,410
to make this work.

15
00:00:45,410 --> 00:00:48,450
The first building block is that we need to learn

16
00:00:48,450 --> 00:00:51,840
how we can manipulate our DOM elements

17
00:00:51,840 --> 00:00:54,350
such that they do change color.

18
00:00:54,350 --> 00:00:57,730
So, how we can change the styling of DOM elements

19
00:00:57,730 --> 00:00:59,320
with JavaScript.

20
00:00:59,320 --> 00:01:01,330
And, then in a second step,

21
00:01:01,330 --> 00:01:05,313
we will need to find out how to do that conditionally.

22
00:01:06,370 --> 00:01:08,840
And let's start with the first step.

23
00:01:08,840 --> 00:01:13,840
Let's learn how we can change the color of DOM elements.

24
00:01:13,940 --> 00:01:17,320
And for this, I'll actually stay on this page here,

25
00:01:17,320 --> 00:01:19,540
and open my developer tools.

26
00:01:19,540 --> 00:01:22,320
Because we learned that, here in these tools,

27
00:01:22,320 --> 00:01:25,873
we can also execute some JavaScript code.

28
00:01:26,910 --> 00:01:30,400
Here, we can also run simple snippets.

29
00:01:30,400 --> 00:01:31,650
And I can, for example,

30
00:01:31,650 --> 00:01:36,323
use the document object to also select an element here.

31
00:01:37,270 --> 00:01:41,160
And, we can even store that selected element in a constant

32
00:01:41,160 --> 00:01:42,620
or a variable then.

33
00:01:42,620 --> 00:01:46,483
And I'll do that so that we can play around with it here.

34
00:01:47,910 --> 00:01:52,910
And let's say, I want to start with this span here.

35
00:01:52,940 --> 00:01:54,250
But for that, keep in mind,

36
00:01:54,250 --> 00:01:58,980
if I select it, that this has an ID of remaining chars.

37
00:01:58,980 --> 00:02:00,720
So, in this console here,

38
00:02:00,720 --> 00:02:03,820
I'll get my span element

39
00:02:03,820 --> 00:02:06,140
by writing document,

40
00:02:06,140 --> 00:02:09,122
get element by ID.

41
00:02:10,050 --> 00:02:14,593
And then the ID I'm looking for here, is remaining chars.

42
00:02:15,760 --> 00:02:16,920
Like this.

43
00:02:16,920 --> 00:02:18,720
If I now hit enter,

44
00:02:18,720 --> 00:02:21,040
this span element,

45
00:02:21,040 --> 00:02:24,740
is this span. Which I selected here.

46
00:02:24,740 --> 00:02:28,580
We can, by the way, log something here in this console,

47
00:02:28,580 --> 00:02:31,140
by just typing the variable name.

48
00:02:31,140 --> 00:02:35,350
This will not work in your Avro JavaScript code.

49
00:02:35,350 --> 00:02:38,560
There, if you just type a variable name,

50
00:02:38,560 --> 00:02:42,150
this will not log it to the console.

51
00:02:42,150 --> 00:02:44,850
But, here in this console of the developer tools,

52
00:02:44,850 --> 00:02:45,808
that is what will happen.

53
00:02:45,808 --> 00:02:48,963
So, here we can log something like that.

54
00:02:53,090 --> 00:02:55,550
So, if I got my span element here

55
00:02:55,550 --> 00:02:57,730
and I did recreate this constant here,

56
00:02:57,730 --> 00:02:59,250
because this page reloaded,

57
00:02:59,250 --> 00:03:02,610
because I changed my JavaScript code,

58
00:03:02,610 --> 00:03:07,410
then we can use this span element to do things with it.

59
00:03:07,410 --> 00:03:08,243
And for example,

60
00:03:08,243 --> 00:03:11,650
we did learn that we can set the text content

61
00:03:11,650 --> 00:03:16,270
to some new texts, like 59, for example, like this.

62
00:03:16,270 --> 00:03:18,593
Now, this updated here on the page.

63
00:03:20,190 --> 00:03:23,701
But, we can also not just change the text content.

64
00:03:23,701 --> 00:03:25,840
But, as we saw it before

65
00:03:25,840 --> 00:03:28,320
at the example of the anchor element,

66
00:03:28,320 --> 00:03:31,910
we can also change other properties of our DOM elements.

67
00:03:31,910 --> 00:03:33,280
For example, on the anchor,

68
00:03:33,280 --> 00:03:35,940
we changed the age ref property

69
00:03:35,940 --> 00:03:38,093
to change to target destination.

70
00:03:39,570 --> 00:03:43,610
And, on basically all HTML elements,

71
00:03:43,610 --> 00:03:46,680
we can access a style property,

72
00:03:46,680 --> 00:03:48,490
which allows us to

73
00:03:48,490 --> 00:03:53,410
change the styling of that element or to set styles

74
00:03:53,410 --> 00:03:57,693
as we would set them with the style attribute in HTML.

75
00:03:58,850 --> 00:04:01,570
So, here I can access style.

76
00:04:01,570 --> 00:04:05,360
And then, what's stored in this style property

77
00:04:05,360 --> 00:04:09,120
of a DOM element is actually a nested object

78
00:04:09,120 --> 00:04:11,210
with more properties.

79
00:04:11,210 --> 00:04:13,190
Hence, we can add another dot here

80
00:04:13,190 --> 00:04:16,523
to dive into those nested properties.

81
00:04:18,120 --> 00:04:22,438
And what we find here, are now basically equivalence

82
00:04:22,438 --> 00:04:26,423
to the different CSS properties we learned about.

83
00:04:27,470 --> 00:04:32,440
For example, there is a text align property.

84
00:04:32,440 --> 00:04:36,233
And, of course, there is a text align CSS property.

85
00:04:37,840 --> 00:04:41,740
The main difference, which is important to note though,

86
00:04:41,740 --> 00:04:44,860
is that they are written differently.

87
00:04:44,860 --> 00:04:49,860
In CSS, we would have text dash align, all lower case.

88
00:04:51,080 --> 00:04:55,270
In JavaScript, the equivalent is the same word

89
00:04:55,270 --> 00:04:58,940
or a combination of words, but without a dash.

90
00:04:58,940 --> 00:05:02,080
Instead, using this camel case notation,

91
00:05:02,080 --> 00:05:04,740
which we learned is the main convention

92
00:05:04,740 --> 00:05:07,760
for naming things in JavaScript.

93
00:05:07,760 --> 00:05:10,110
And this convention is used here

94
00:05:10,110 --> 00:05:12,920
because dashes are not allowed

95
00:05:12,920 --> 00:05:15,450
in variable or property names.

96
00:05:15,450 --> 00:05:20,450
So, text dash align would be invalid JavaScript code.

97
00:05:20,560 --> 00:05:23,873
And that's why it's named text align, written like this.

98
00:05:24,770 --> 00:05:26,630
But, the interesting thing is,

99
00:05:26,630 --> 00:05:30,740
that we can set this to the same values we can assign

100
00:05:30,740 --> 00:05:34,010
to the CSS property text align.

101
00:05:34,010 --> 00:05:37,900
So, here we could use center or left,

102
00:05:37,900 --> 00:05:39,920
as a string though.

103
00:05:39,920 --> 00:05:44,920
In CSS, it would just be center or left as keywords,

104
00:05:45,160 --> 00:05:49,370
but that's because CSS has a different programming language.

105
00:05:49,370 --> 00:05:50,690
In JavaScript,

106
00:05:50,690 --> 00:05:54,420
if you would just write left or center like that,

107
00:05:54,420 --> 00:05:57,170
JavaScript would look for variables

108
00:05:57,170 --> 00:06:02,090
or built in Coleman's, functions with such names.

109
00:06:02,090 --> 00:06:05,063
That's why we need to turn this into a string instead.

110
00:06:06,440 --> 00:06:09,230
Now, text align, actually is a property

111
00:06:09,230 --> 00:06:12,420
which wouldn't have a real effect on this span.

112
00:06:12,420 --> 00:06:15,150
And therefore, let's use a different property.

113
00:06:15,150 --> 00:06:17,060
And let's maybe use color.

114
00:06:17,060 --> 00:06:19,823
Which we can use to set the color.

115
00:06:21,130 --> 00:06:26,130
We can set color to any value that would be expected in CSS,

116
00:06:26,250 --> 00:06:29,593
again, with the limitation that it should be a string.

117
00:06:30,560 --> 00:06:31,590
So here, for example,

118
00:06:31,590 --> 00:06:36,560
we could set it to red or to a hex code or to RGB,

119
00:06:36,560 --> 00:06:40,773
and then maybe zero, 120, 50.

120
00:06:42,150 --> 00:06:43,660
And, if I now hit enter,

121
00:06:43,660 --> 00:06:47,690
this changed to a green, to a greenish color.

122
00:06:47,690 --> 00:06:50,160
And if I inspect this span again,

123
00:06:50,160 --> 00:06:54,290
indeed we see that this style attribute was added now,

124
00:06:54,290 --> 00:06:57,033
and that it has this style set.

125
00:06:58,220 --> 00:07:01,540
And that's what we can do with JavaScript as well.

126
00:07:01,540 --> 00:07:04,670
We can also change the style attribute

127
00:07:04,670 --> 00:07:07,430
and then the different CSS properties

128
00:07:07,430 --> 00:07:10,749
that can be changed, like color, like text align,

129
00:07:10,749 --> 00:07:14,513
like background color, and so on.

130
00:07:15,390 --> 00:07:19,000
And as solved, feel free to play around with it.

131
00:07:19,000 --> 00:07:22,500
Just keep in mind, that it's this camel case notation

132
00:07:22,500 --> 00:07:26,630
and that your values should be strings.

133
00:07:26,630 --> 00:07:29,700
So, for example, if we want to change the font size,

134
00:07:29,700 --> 00:07:34,290
we could simply write 30 pixels, like this, as a string.

135
00:07:34,290 --> 00:07:35,933
And then this would get bigger.

136
00:07:37,140 --> 00:07:40,390
Now, that's one way of changing the styling.

137
00:07:40,390 --> 00:07:42,910
And of course, since I'm just doing this here

138
00:07:42,910 --> 00:07:45,200
in this console in the dev tools,

139
00:07:45,200 --> 00:07:49,600
whenever I reload the page, all these changes are gone.

140
00:07:49,600 --> 00:07:52,330
If we would write it in this JavaScript code here,

141
00:07:52,330 --> 00:07:54,640
of course, they would persist

142
00:07:54,640 --> 00:07:57,420
since it would be updated on the running page,

143
00:07:57,420 --> 00:08:00,113
by the code that is part of this page.

144
00:08:01,310 --> 00:08:02,880
But now we covered this,

145
00:08:02,880 --> 00:08:07,000
there is another way of changing the styling,

146
00:08:07,000 --> 00:08:09,833
or the look of our elements.