There's no better way of proving that you've understood what you've learned than doing it all from scratch 1
yourself. 2
So here's the challenge for you. 3
I want you to create a new React app that shows a single h1 element and that h1 is going 4
to show different pieces of text. 5
So it's going to say "Good morning" 6
if the current time is between midnight and 12 PM so midday, it's gonna say "Good afternoon" 7
if it's currently between midday and 6:00 PM, and it's going to say good evening if it's between 6:00 8
PM and midnight. 9
So you're gonna be using some logic to render a different piece of text in that h1 showing on 10
screen 11
depending on your local time. And then I want you to apply the style which is under a class style called 12
heading to that h1. 13
So I've already created this style for you and I just want you to be able to apply it onto that h 14
1 using what you've learnt before. 15
Now the final thing I want you to do is to dynamically change the color of the h1 using inline 16
styles. 17
If currently it says "Good morning" then the text should show up as red, 18
if it says "Good afternoon" it should show up as green, if it's night it should show up as blue. 19
This is what it looks like in the end as the current time is 16:55. 20
It says Good afternoon and it's green. 21
If I change the date to let's say, let's say, it's now 10:00 AM It says Good morning, 22
and if I change this to 16 in the afternoon 4:00 pm in the afternoon and maybe 7 o'clock in the 23
evening. 24
This is going to apply everything that you've learned so far 25
and you might need to review some of those previous lessons or the previous code in the sandboxes. 26
But I trust that you're going to do a great job and you're going to be able to take yourself even further 27
after you struggle a little bit and get it to work. 28
Pause the video now and see if you can build this functionality using everything that you've learnt and 29
then come back and we'll go through the solution together. 30
So pause the video now 31
and good luck. 32
All right. 33
So I hope you gave that a real good go. 34
And if you got stuck that you actually tried to struggle through it and search for solutions online 35
rather than just coming straight to the solution video, because it really is through the struggle and 36
through debugging your code and through trial and error and lots of time spent messing with the code 37
that you actually really level up. 38
So don't worry I'll still be here waiting for you if you need more time. 39
Go ahead and give it a real go. 40
But if you've already completed it or if you just need a few hints or tips and see if you can get over 41
some hurdles then let's go through the solution together. 42
All right. 43
The first part is easy. 44
We've done this a few times now so I'm just going to go through it quickly. 45
So now we've got to render step. 46
And it says that we have to create a single h1. 47
So in this case because we're just creating a single h1, I'm not going to bother putting it inside 48
a div and I'm just going to render it as it is. 49
And then of course we're going to put it into our root div. 50
And now we've gotten h1 that doesn't say anything yet, 51
so it's not very useful right now. 52
Now what we want is depending on the current time for it to say "Good morning" or "Good afternoon" or "Good 53
evening". 54
So that means we're probably going to need to inject some Javascript in there right? 55
So we already know that we can get hold of the current date and time from a previous lesson. 56
So let's create a const called date and let's set it to a new Date object. And then let's create another 57
constant called currentTime and we'll set that to the date.getHours. And of course this is a method 58
so it requires those parentheses at the end. 59
Now we can get hold of our current time and you can see that in my console I'm already getting 17, so 60
5 PM printed here. 61
Now we're rest assured that that definitely works and we can use that number to start figuring out what the 62
current time is. 63
If you've been stuck on this step then head back to your code and see if you can fix it and solve the 64
rest of the challenge and then come back and we'll continue. But otherwise let's continue. 65
So we've got this current time which we can use an IF statement to check whether if it's between midnight 66
and 12 PM. So if currentTime is less than 12:00 then we'll say that in this case, it should be morning. 67
So let's create a variable called greeting and we're going to leave it blank to begin with. 68
Now if the current time was less than 12:00 namely it's morning, then we're going to change greeting 69
to say "Good morning". But else if the currentTime is greater than 12:00 70
but it's less than 6 PM which remember is actually 18:00, then in this case we'll set the greeting to 71
equal 72
"Good afternoon". And finally in all other cases that's left out of the 24 hours, we're going to set the 73
greeting to equal "Good night". 74
So now we've got this greeting which is going to hold some different pieces of data depending on the 75
current time. 76
And then we can insert that variable greeting inside our h1, of course through the use of curly 77
brackets. 78
So inside here we'll put that variable name in here and bam! We've got that h1 populated with some 79
text. 80
So because right now it's 5:00 PM, It's going to say good afternoon. 81
And if we change the date to a custom date, so 2019 January the 1st at 10:00 AM, then it says Good 82
morning. At 19:00 83
it says Good night 84
and at 14:00 it says Good afternoon. 85
So it's working perfectly. 86
So let's delete that. 87
Now the next part asked us to apply the heading style in the styles.css. 88
So in our stylesheet I already created some styles under a class style name of heading. 89
So all we have to do is to apply it to our h1. 90
And if you remember that attribute name or the property name is called class name in JSX. 91
And then we simply add it as a string, so 92
it was called heading.Aand now our heading style gets applied to our text. 93
It's much bigger, it's bolder and it's got a line at the bottom. 94
So now we're ready to tackle the very last part of the challenge which is to dynamically change the 95
color of the h1 using what we learned about inline CSS styles. 96
So how do we add an inline CSS style? 97
Well we use the style property, and we're going to set it equal to a Javascript object which is going 98
to be a custom style. 99
So let's create that up here. 100
Let's create a constant called custom style and let's make it a Javascript object with a color key which 101
we're going to set at some point in our code. 102
So this color key is going to be red in the morning, green in the afternoon and blue in the night. 103
So that means that when our current time is less than 12, in addition to sending the greeting we're also 104
going to set the custom style object's color property to equal red. 105
And when it's afternoon, that color property is going to be green. 106
And when it's nighttime, it's going to be blue. 107
And now when we go into here, we can apply that style inside the style property by adding in the name 108
of that object which was called custom style. 109
Now all our errors go away and if we take a look at our website, you can see that afternoon is green 110
but 111
10 AM is morning and 19:00 is night. 112
So did you manage to solve this challenge? And if not, be sure to get back to your code and try and apply 113
what you've learned in this video to see if you can manage to do it after we've gone through the solution. 114
So of course I'm going to add this sandbox as a link in the course resources 115
so you'll have the code here to refer to if you need it. But make sure that you've had enough practice 116
with the code and had enough time to play around with it to understand it before you continue to the 117
next lesson. 118
But once you are done then head over to the next lesson and we'll learn more about React components. 119
So for all of that and more, I'll see you there.