1
00:00:01,000 --> 00:00:05,230
In this section we're going to continue working on our season display component in particular.

2
00:00:05,230 --> 00:00:09,220
I want to think about how we're going to get those icons in there on the top left in the bottom right

3
00:00:09,220 --> 00:00:12,420
sides and to just show the icons themselves.

4
00:00:12,460 --> 00:00:14,970
We're going to use these semantic UI library.

5
00:00:15,010 --> 00:00:19,750
Remember we've been using semantic UI quite a bit just to pull in a little bit of styling to our projects

6
00:00:19,750 --> 00:00:21,470
to make them look a little bit better.

7
00:00:21,500 --> 00:00:27,670
And if you go to semantic Dasch you Icom you can open up the side menu and then under the elements section

8
00:00:27,760 --> 00:00:30,090
you'll find icon.

9
00:00:30,520 --> 00:00:36,820
So the semantic UI library has a ton of icons included inside of it that are pretty easy to use.

10
00:00:36,880 --> 00:00:41,470
When we first show you an example of how we use an icon it's going to click on definition right here

11
00:00:42,490 --> 00:00:48,250
and then I will click on any one of the code little code samples and you'll see a quick example on how

12
00:00:48,250 --> 00:00:49,580
to show an icon.

13
00:00:49,600 --> 00:00:57,280
So we're going to use an eye tag with a class name of icon and the name of the icon we want to use in

14
00:00:57,280 --> 00:01:01,200
this case it shows disabled because this is a demo of a disabled icon.

15
00:01:01,300 --> 00:01:02,790
We're not showing a disabled icon.

16
00:01:02,830 --> 00:01:04,750
Kind of like grayed out as it appears right there.

17
00:01:04,780 --> 00:01:10,720
So we're not going to use the disabled class name so all we do is put the word icon as a class and then

18
00:01:10,720 --> 00:01:14,750
the name of the icon we want to use to get the name of an icon.

19
00:01:14,770 --> 00:01:19,870
I'm going to go back up to the top of the page and I'll click on the big icons button right here and

20
00:01:19,870 --> 00:01:24,750
then we can scroll down and we can see all of the different icons that are available to us.

21
00:01:24,760 --> 00:01:29,050
So if you mouse over any of these you'll see the name of the icon appear.

22
00:01:29,050 --> 00:01:32,320
Now I already went through this list and picked out some icons for us to use.

23
00:01:32,620 --> 00:01:38,950
So I can do a control after or a Command F on the page and look up snowflake and you'll see right there

24
00:01:39,130 --> 00:01:44,140
that's a snowflake that looks very similar to the one that we want to show when it's winter.

25
00:01:44,260 --> 00:01:48,530
And then if I do a search for sun I'll see an icon of a sun right here.

26
00:01:48,550 --> 00:01:50,720
Again very similar to what we probably want to show.

27
00:01:50,780 --> 00:01:52,780
And the case that it is summer.

28
00:01:52,780 --> 00:01:53,740
So that's it.

29
00:01:53,980 --> 00:02:00,610
Oh we really have to do here is somehow produce the names of sun or snowflake depending upon our current

30
00:02:00,610 --> 00:02:01,710
season.

31
00:02:01,810 --> 00:02:07,540
So to do so we can make use of a very similar expression like we just did a second ago to get our text.

32
00:02:07,720 --> 00:02:15,320
I could say something like Consta icon is season equals winter.

33
00:02:15,640 --> 00:02:22,100
And then that will give me either snowflake or a value of sun like so.

34
00:02:22,100 --> 00:02:27,890
All right so now that we wrote both the expression to get our text and our icon out here you'll notice

35
00:02:27,890 --> 00:02:32,100
that we've got this very repetitive ternary expression in both cases.

36
00:02:32,100 --> 00:02:33,440
And let me put this on a single line.

37
00:02:33,470 --> 00:02:37,850
So it's a little bit easier to read in both cases we thought an identical ternary.

38
00:02:37,850 --> 00:02:40,610
The only difference is the values that get returned.

39
00:02:40,610 --> 00:02:45,170
So I think that we could almost definitely clean this thing up a little bit but for now let's just get

40
00:02:45,170 --> 00:02:49,760
the icons to show up and we'll worry about doing the factor after that.

41
00:02:49,770 --> 00:02:57,450
So now that I've got the icon name inside of my div right above the H-1 I'm going to put a I with a

42
00:02:57,450 --> 00:03:03,530
class name of icon like so.

43
00:03:04,590 --> 00:03:07,470
And then I'll put another one after the one as well.

44
00:03:12,160 --> 00:03:13,350
All right so that looks good.

45
00:03:13,530 --> 00:03:16,100
So going to save this and we'll just make sure that these icons.

46
00:03:16,130 --> 00:03:20,200
Oh you know what I just realized we've got one other thing here we did not put in the word icon as well

47
00:03:20,200 --> 00:03:20,890
for the class name.

48
00:03:20,890 --> 00:03:21,920
That was my mistake.

49
00:03:22,120 --> 00:03:25,730
So to do so we can use a little bit of yes 2015.

50
00:03:25,960 --> 00:03:30,790
I'm going to put in a template string by placing a back to character right here.

51
00:03:31,180 --> 00:03:34,860
That tick is the traditionally on the U.S. or Northern American keyboard.

52
00:03:34,870 --> 00:03:38,190
It is the character that is left to the one on your keyboard.

53
00:03:39,120 --> 00:03:44,570
I'll put another back take over there and then I'm going to put a dollar sign and wrap this thing in

54
00:03:44,570 --> 00:03:49,820
curly braces like so that's going to take the value of whatever icon is and throw it into the string

55
00:03:49,820 --> 00:03:53,220
right here and then I'll put an icon like so.

56
00:03:53,970 --> 00:03:59,060
So now we've got the name of the icon that we want to use as icon and the class name of simply icon.

57
00:03:59,290 --> 00:04:02,270
And then I'm going to repeat the same thing down here as well.

58
00:04:07,180 --> 00:04:07,450
OK.

59
00:04:07,480 --> 00:04:11,020
So now I'm going to save this and I'll do a little quick test over here.

60
00:04:11,020 --> 00:04:12,350
Back inside my browser.

61
00:04:12,580 --> 00:04:12,840
All right.

62
00:04:12,850 --> 00:04:14,680
I see the two icons appear.

63
00:04:14,800 --> 00:04:15,760
Now they're tiny.

64
00:04:15,760 --> 00:04:16,910
We'll fix that up in a minute.

65
00:04:16,960 --> 00:04:21,550
But for now I'm going to say yeah this is definitely working well enough.

66
00:04:21,550 --> 00:04:22,470
Let's take a quick pause.

67
00:04:22,480 --> 00:04:26,670
When we come back the next section we're going to start to make sure these icons show up a bit larger.

68
00:04:26,690 --> 00:04:31,700
We're also going to start to a refactor these kind of duplicated ternary expressions as well.

69
00:04:31,780 --> 00:04:33,720
So quick pause and I'll see you in just a minute.