 Right, so hey guys and welcome back to another Flask tutorial. So in today's tutorial we're going to be learning how to use conditional statements when we render out a dynamic HTML page. So obviously this page is going to be interpreted and run using our Flask server which is why we are going to be able to use some conditional statements in the HTML file that is rendered by our Flask. So first of all what I'm going to go ahead and do is open up Visual Studio Code and then in there I'm going to open up the website folder that I have right here. So in this my website folder I have all the resources that are needed to pretty much run my website. So all the dependencies including my app.py which controls the Flask server that I have, the app underscore blueprint file which pretty much stores the different routes and what actions have to be taken when a specific route is entered on my web server and the templates and all that stuff. So if you guys haven't already watched the part 2 and part 1 of this tutorial I really recommend you do. So there's already 3 parts that have been released on this Flask series. So I recommend you watch those first and then come back to this one unless you feel really confident and you only want to learn how to use if and else conditionals on your HTML templates and get them working using Flask. So what we have going here is in the last tutorial we had an array called popular products which had different dictionaries and the dictionaries pretty much stored details related to each product. So now if I go to my templates folder, index.html folder, because we were pretending to create a store, index.html folder pretty much had some text that said urn store and then it showed popular products. So the popular products were not entered static so they weren't added in a static manner where we type in each product one by one but instead they were imported from the popular products array right here. So we had a for loop that was running in our HTML template that was being compiled by the Flask engine and then once it recognizes and once through pretty much all the products it would set it up as the HTML tags that we've added in here and then that would work just fine. So I'm just going to show you what we had going by opening up CMD. What I'm going to do is zoom in a little bit so that it's easier for you guys to see. So I'm going to CD desktop and then my website because that's where my Flask server is at the moment and I'm going to do set Flask underscore debug equals one so that I don't have to keep refreshing the Flask server. It automatically will detect any changes and then lastly I'm going to do Flask run. Okay so once that's done I'm going to go ahead and open up Chrome because it's going to start hosting my server files and pretty much all the templates. I'm going to go to localhost 5,000 or not 5,500, 5,000 so localhost 5,000 and as you see right here this is the website we had in the last tutorial. It's a pretty basic website because obviously we're not dealing with HTML and CSS in these tutorials we're just learning about how to render a dynamic template instead of a static template using Flask. So if I show you the code, as you see right here you have three products being shown where there's different variables to these products. So one product has the size of small and the price is 5 pounds whereas the other products have a size of medium, large and price differences as well. So obviously only these line 11 to line 16 are pretty much importing all of these products from our popular products array and then they're assigning them to the relevant HTML tag and then compiling the entire document as relevant HTML and then passing it to the browser. So that's what we did in the last tutorial. So what if we had to use if conditionals or if we wanted to use if and else conditionals in here as well. So there is actually a way we can do that and it is pretty easy to use. So let's assume that on our store, so if I go back to my store right here, so let's assume that on our store right here instead of having just normal prices our website did discounts once in a while and what you wanted to do to increase sales was to pretty much show the discounted products in red color and show the non-discounted products or just normal products in green color and on the discounted products you also want to show how much is being deducted or how much the user will be saving. So in this case we could use if and else statements. So to do so what I'm going to go ahead and do is go back to Visual Studio Code, go back into my app underscore blueprint file and in my popular products array what I'm going to do is going to my dictionary for the products and on the first product I'm going to go ahead and create a new key value pair. So the name of the key is going to be discounted and then the value is going to be set to true. Now I'm doing this because I'm creating a new key on which I'm going to run an if statement in my template later on. So I'm going to run an if statement on my template where I say if this discounted field is true then what we want to do is we're going to find out how much the discounted. So we're going to create another field in here called discounted amount and then we're going to set the amount to pretty much how much the user is saving. So how much is being discounted from the normal price. Let's say five and for the rest of the products that you want to or do not want to be discounted. So let's make this one discounted as well make that true and then discounted amount. Let's make that two pounds and then the last one we're just going to make sure that it's not discounted. So at least one needs to be not discounted so that we can make sure that it's working fine. So on this one I'm just going to do discounted false and since it is not discounted we don't really need to specify how much is being discounted because hey if it's not discounted how can we have a price that's being discounted. Either way that's our data structure ready. So now we have two new key value pairs. This key value pair which defines whether the product is discounted or not. And if the product is discounted then we have the amount that's being discounted. So now that we know what to do we're going to go ahead and implement this logic in our index.html file so that it can be rendered later on. So we have a product name here and we also have a for loop that pretty much goes through all the all the dictionaries that exist in our popular product array and then it can give us the ability to grab their values based on the key we have. So for example here we do product name and then we grab the product.name attributes I mean dot name key which will pass which will return the name of each product in here. Now similarly we could access other properties of this dictionary as well such as the discounted and discounted amounts which is what we're going to be doing. So after the title I want to specify whether this product is discounted or not. So what I'm going to do is add a new code block by doing curly braces and then scented signs and then here I'm going to do an if statement. So I'm going to say if we need to do if product dot discounted then what we want to do is whatever action is going to be one after this statement right here is going to be under the if code block. So what I'm going to do is I'm going to say if the product dot discounted is true so technically what I could do is type in double equals true but instead of that if you just type in if product dot discounted it assumes that the value you are looking for is true well if it returns false then this if statement won't run. So that's the logic we're doing here. So when we have an if statement you also need to have an end if statement because this is how we're going to be coding inside our code blocks because we need to make sure we know where this if statement is ending. So now we know that this if statement right here will end right here so that it doesn't affect the other elements that are being rendered. Now we're also going to have an else statement so we're going to say if this product is discounted then we do so and so stuff else we're going to do so and so stuff under here. So the condition for else um let's just make a comment in here really quickly this is the condition for else and this is the condition for the if so if the product is discounted what we want to do is I'm going to create a paragraph tag in here and then I'm going to add a style attribute to it. Obviously this is not good practice but since we're just doing this for the sake of a flask tutorial it's fine to use. So in this style I'm going to define a color which is going to be set to since we decided discounted products are going to be set in red we're going to be using red. Now we also said we want to display how much the user is going to be saving. Now we're going to say discounted and then we're going to do a colon dot pound sign and then we're going to display how much the user is saving. Now if you remember we did save this as discounted amount so what we're going to do is we're going to type in product and then make sure whenever you're displaying a variable you need to use double curly braces in the start and then the end if you want to use a code block. So I'm going to do product dot discounted amount because that's the name of the key what we assigned in here if there is a discount so discount amount. So in this case it will grab five so we're saying if the product is discounted we want to display discounted and then how much is being discounted as well. Now we need to set the else as well so if pretty much else would run any product that doesn't have a discounted attribute set to true so style equals green because it's not a discounted product and then we're going to say normal price. Okay so we don't need to actually specify how much is being okay style equals color green my bad and then we don't need to specify how much is being discounted because obviously this product is just selling at a normal price. So that should be about it for the conditionals now if everything is working fine this html page should be rendered as we expected to where the discounted products the first two products are going to be in red and they're going to specify how much is being saved by the user and the normal products that are not discounted are going to be in green which is the last product. Let's go ahead and check so if I refresh my page we have an error um let's see I don't think it's actually refreshed since the last time we um let's see discounted I don't think it's refreshed because sometimes it just gets stuck in a loop so I'm going to go ahead and refresh this. Cool. Last run. It's refreshed now and as you see right here it did get stuck for some reason my computer um frees a cmd if I leave it running in the background too long so as you see right here for the discounted products which were the first two products it says discounted in a red color and then it says how much is being discounted now obviously it would be a bit more helpful if it put like a minus sign over here so if I go back to my html template and put minus pound sign so that the user can tell that they're saving something so something like this so discounted minus five then it's discounted minus two and then this is just selling at the normal price now obviously the html template knows this because we're using if conditionals and if we go back to our blueprint file the first product is discounted which because it's true and then the amount that is discounted is five pounds the second product is discounted two because it's true and then it's saving two pounds as the discounted amount and then the last product is not discounted because it's set to false and we know all of this because we're running fnl statements or conditional statements in our dynamic html file that is being rendered using our flask server so that was it for today's tutorial guys hope you have enjoyed this tutorial and learned something new about flask hope you'll be able to implement this in your own websites and find better ways of using it as well um i hope you're excited for the new upcoming videos for the flask tutorials uh if you guys would like to donate to the channel directly you can do so by either signing up as a patron using the patreon link in the description or purchasing a super chat emoji or a highlighted message when this video premiers not forcing anyone to do so but if you guys do it really helps out the channel um please make sure to drop a like comment share and subscribe guys because that's very important because i'm trying to get this channel going at the moment so if you guys could share that would be amazing and guys i will see your beautiful faces in the next tutorial peace