Nesting if conditions
This is going to be the first time that we nest if conditions. I advise you to try hard to avoid nesting conditions. The more nested things there are, the more complicated they are. With that said, nesting conditions could be incredibly powerful and useful in certain situations. I deliberately waited to talk about the topic at this late stage as I wanted you to avoid using them in general. My tip for you is every time you want to use a condition, ask yourself can I do without it?
Video Transcript
00:00The next lecture is quite easy really because we've seen if conditions already and at this
00:05stage we're just taking it one step deeper where we'll have an if condition that lives inside of
00:10another one. Let's see it. So we're back into our if conditions and really this is not really
00:15something new but it's just something for you to be aware of. So let's say if our hour is under
00:21seven in the morning but only if it's six in the morning I want to do something special.
00:26Now you might say yeah but why don't you create I could create here another else if
00:31the hour is exactly six in the morning. Let me show you what I mean. I could create here an else if
00:37it is exactly six in the morning. Set here if my value is exactly
00:42six in the morning and do whatever I want right here. But really my problem with that is if I
00:48created here a lot of stuff I don't want to type in over again and add more code more than I need
00:53to. Another way I could do this is inside of my if itself after this condition was matched
00:58I know we're under seven or under or equal seven in the morning. I could ask your if hour equals
01:03equal six and by doing this I could create here something that is specific to if it's six in the
01:09morning. For example let's say we want to animate our image so how about we're gonna just let's
01:15just do something special for our image let's think. So let's do a tween max two or actually
01:22let's do a from and we're gonna go to our image because we have only one image I'm just gonna
01:28call it an image. I'm gonna have a two second animation and I'm gonna have that two second
01:33animation do let's try to do just top minus 200 pixels. Let's see what would happen with that.
01:42I have no idea what would happen. Let's put here a small let's not do a delay first but
01:46I'll add a delay in a second no pun intended and if I go back in here and we click on refresh
01:52first of all it is not six in the morning right because we're already at or is it six
01:59yeah I think we are at six so let's see if did we did something happen there let's try this again
02:06fade in six okay so let me look at this let's try to see what's going on so I'm gonna add here
02:12a delay of even five seconds and let's just double check double validate it is six in the
02:20morning still so that's not true this is true this is definitely true as well so it's going
02:27to go inside of here let's see what happens now that I added the delay maybe the animation was
02:32taking was so fast that we just didn't see it or maybe that we're animating a property
02:37that just doesn't animate right now so let me just go in into my firebug for this element
02:42and I'm going to try and just change something in our image by just adding here a style to it
02:48so let me just uh let me let's try oh let's see if I put here 100 pixels minus 100 px
02:55it's not going to do anything so let me try to find what would do something to it oh unless I
03:01said it to be absolute it's not going to really do anything so if I put here a padding and I put
03:06here let's say 100 minus 100 px no that's not doing anything either so let me just um position
03:15absolute oh that would mess up everything all right so you know what let's just keep something
03:21really really simple with this we'll just do a fade in so I'm going to go in here and I'm just
03:25going to set here because I don't want to play around with the CSS forgive me for that um because
03:30that's not our topic uh opacity I'll set it to be zero and it's only going to show if it's six in
03:35the morning it's only going to show after five seconds from when our site begins so if we click
03:40on refresh here now our item is not going to be there and then it's going to fade in after five
03:45seconds okay so that was a really long wait so let me just put here three seconds so we won't have to
03:51wait so long and how about if I want to do the same thing also if the time is 12 so I'm going
03:56to go ahead and just find the area where um because it would be right here because uh if the
04:03time is 12 right now it's not this won't be true this won't be true so it's going to skip
04:08this whole thing including that if it's not going to even check that if because if it's
04:12if our time is 12 it's going to skip this all together it's going to skip this one as well
04:16and it's going to be inside of that under two so I'm going to go right there and just paste there
04:20if hour is 12 and by the way I know this isn't efficient the goal is not to be efficient it's to
04:27show you that you could create ifs inside of ifs so if we do this just one more time and I
04:32click on refresh and I go onto my application and I click on refresh and I go into my console and
04:37I try to animate from six from 11 we'll see that in 11 it's going to be there in advance
04:43but if I go to 12 pm it's going to 12 yeah 12 pm it's going to not be there and then the actual
04:49element itself is going to fade in as well um so that's it that's about um it nested ifs in
04:56general you will meet them once in a while that you need them but it's it to be honest the main
05:02reason why I pushed the topic of ifs to such a late stage in our development even though it's
05:08not a hard topic it's because I don't want you to get accustomed to use if conditions as a as a
05:16you know developers use it too often and the more if conditions you have the more forks in the road
05:21the more complicated your code looks like just look at this look how complicated this looks like
05:26okay now in the next lesson we're going to go back to the exact same
05:31fade-in that we have right here but we're going to use something that's called switches to see how
05:36could we do it with a switch so see you in the next lesson when we will see how to do the exact
05:41same thing only using a switch instead of using if conditions