How to use Random API's with Python Django

yeah I hope uh that one should be recording so let me check on something more here F still okay so um and I hope you guys can see my screen kindly confirm if you can see my screen before we uh we lose you oh yeah thank you so uh we are going to use replit replit is a platform just like a visual studio code but it has more features you know Visual Studio code is where you define your language that you want to use is it HTML is it CSS is it jle is it C is it Java all that programming languages you uh build everything from scratch writing the templates writing the files and writing everything but replate is this platform that gives us that magic power where we can look for the programming language that we want to use then use uh some templates that have already been generated then after that we can actually deploy software directly from repit uh push that code to GitHub directly from repet even deployment even buildups and uh everything so that's why we chose to to do uh or to use replate for this session so what you do just go to rep.com David you can just type this on the chat for them to see or to click rep.com then you login or you register in case you have not registered then the next step is now know what you are doing we are doing an API what technologies are we using we are using python jungle so that means we can generate template for Jungle to generate template for Jungle is very simple so far we have covered around six lessons to do with python jungle installation setup and everything running low world so that we have covered in than five lessons so you can just go and watch those recordings in case you get lost uh why are we using template what is this settings.py what is these URLs what is these views in case you get lost you can just revisit the recordings and then you catch up so what we do either create a repo we call it repo or you just create repo anywhere you want it's all the same thing then after you click then over here as you can see we have the search bar here then over here you can select the programming language that you want for example I can select C you can see we have all this languages I can let's see if we have PHP you can see we have this PHP we have uh all these we have Java we have all these uh programming languages like my favorite let's see yes we have this one over here so you can just choose any but in our case we want jungle and jungle is just up here so I'll just click on that jungle then you see this input field here where we have the title then just click and uh type that uh project name so our project name we can give it a API H we can call it API lesson let me just use the correct name in convention API uh API lesson API lesson one you can call ITP lesson one so then after that you can uh actually create that repple then we wait for wait to create that boiler plate just wait for it and then you can see we have our basic HTML our basic jungle uh templates with us so we can see we have our basic jungle template that has been generated then it's now up to R to to use so where do you get these files When I close this I want us first to explore this repo so we have the console where you can just run uh your application you can test then you can also see the shell this is the command line you can LS and you can see every file you can clear just the normal command line interface that we have it's just the same thing that uh the same commands that you type still the same commands that you can type over here then the other thing that we have is tools tools is where you can integrate your program with AI you can deploy you can check all those things you can create dogs you can connect to GitHub git you can use postgress you can do everything according to uh these tools you can just just on your own Time explore these tools and you can test uh all these tools then the next thing is our files see these files over here here is where we have our jungle project so our jungle project is over here as you can see we have our normal manage.py file we have our normal database uh these queries we have them over here our normal files then we have our jungle project as usual we have them over here we have our normal URLs we have our normal settings do by just the same same thing that we used to do we have all these files uh with us so to test as I've said we have these boiler plates already built for you use that template and then you generate uh that code so to test if this uh code is working you just click on run then it should be working like that just wait for it to complete its Magics just wait for it it has its own sub browser over here then as you can see we have our jungle up uh and running remember the previous ways that we have been doing we have been doing a lot of work and here we have our application so let me see if this URL can work in a different uh I don't know if this one will work let me see and I'm not sure if this a link one two three 4 just testing 0.0 2.3.4 uh that one should be full colum 3,000 there it seems that uh we can access that link uh mhm let me see if I can actually move this in a new window by itself no yeah seems everything is buil H the web View and that's that mean means H we are not going to access the other part it's alone but I want it to be full screen maybe can't be uh full screen there's no way we can move this no we can just do with the same same uh window let me just unfl and just stick it over there so we can just work with it like that H we are going to be opening and hiding files so that we see all this window so if we find something that you're not seeing you just tell us we Zoom mhm the new tab C here oh wow let's see yeah thank you so so now we can work with our code on one side so that we can see clearly and then we still have our output so thank you uh MH okay uh opening the new tab okay uh so I want you to be attentive let me just K this project and maybe maybe uh I want to stop this so let me just create a new tab of replit go to rep.com like that uh API lesson one let me delete this so that we can recreate it okay so uh what you do I want us to pay attention on this click on the create rep or create Theo any of them it will work then once it pops up select jungle or just search for Jungle in case you're not seeing your jungle just select for Jungle then over here give it ER you can call it PLP API something like that any project any name that you want to give your project then you simply create repo once you create that repo then everything should be working well or everything should be working perfectly then you have your normal files that have been already generated over here we have our SQL we have manage.py we have when you go to the Jungle project you can see we have the settings we also have the URLs um then we can create our our own views so so we have said we want to create or we want to use an API so this API we are not going to build our own apis we have already apis that are existing so we need to just use those apis so what we do uh the F first thing first remember in our previous ways in the Five Lessons six lessons that we have covered first thing that needed to do is creating uh templates where we are going to create our HTML files so I'll just go straight to creating index. HTML then go straight to creating my document and then maybe go straight to uh something else like Hello World just like that and then I want us for now to ignore this HTML file so let's forget about that HTML file for a second we have created our templates and then this templates um is where we are going to write our HTML already we know what templates are from the previous five sessions something that I want us to create new we have never created CSS so I want us also to create that template for CSS so in CSS we write static so these are static files that doesn't do anything big just creating the normal things Styles we have we have already learned that in HTML and CSS that is in web development course so we know what is a static F images are static uh they do not have any or they do not function so much we just they are just static then inside the static folder let's create styles do CSS then just prepare that and then leave without anything inside it so we have created these templates and we have created the static in case you have created yours and they are failed maybe you have clicked this and then you came here and created a folder no that's not the correct way just click on the manage.py once you click that manage.py or SQL uh light then you can create a folder you can click create folder or create file depending with what you want to create so that is the first step The Next Step that we are used uh to do is registering our templates and registering our CSS so where do we register our HTML and CSS and our templates we register in our CS in our settings so go to settings and then scroll all the way down to templates see these templates here then just inside here this directory here directories here then type base no just type base uh directory like that but in case you wondering where are we getting this base directory this base directory is this that has already been defined up over here we have not created this this automatically was generated for us to use so just go here and uh copy that and just type that name over here to import it or to use it here inside this uh list so the next thing maybe we can do is actually also register our CSS so how do we register our CSS to register our CSS we can scroll down in an empty place like uh for example here where we see the static URLs maybe down here we can we can register our our Styles so what we do uh to register our Styles we just have to type static files CSS these CSS are static files static files uh directories all the static file directories register them inside this list so uh because as you can see our static file here or our static folder is in the base directory the base directory is the uh the overall directory or the root file or the root H directory that's what we are calling here the base directory if we interpret it according to this context so here we are going to go to the base uh the base directory then slash uh register that static the static is basically this static what if we add another uh maybe something else maybe we can have created another something here maybe uh media queries anything like that we could have created it or we could have registered it here so we have registered our static files and we have registered um our templates over here so our CSS and HTML they have been correctly registered inside our settings the next thing uh that we were uhuh uh someone tell the instructor is teaching beginners I've said um yes we understand but we have already covered around five good sessions on introduction to Jungle setting up setting up in different ways so we believe uh you should have already catched up you should have already watched the recordings so in case you are floating at some point maybe I can repeat you can tell me to repeat or you can um just revisit the recordings and most of these things you'll find that we have already covered in around six good sessions so I'm going to repeat just after we are done setting up with this I'm going to repeat it uh still later uh question why are we not registering our templates as based directory uh templates uh we don't need to register that because most of these things have already been defined here you see here we have the templates and we have let me just go back to our settings uh you see this path over here this path has covered most of the things that we need or most of the these things that we need they have already been taken care by this simple line of code that's why I don't need to complicate ourselves and maybe save by based directory templates blah blah blah that line of code has taken care of most of these things we just need to uh we just need to import the folder and then it will import and everything inside that uh folder uh please repeat the settings yeah actually I can repeat that the settings H we want to register two things or we want to include two things the static files where we are going to write our Styles CSS images everything we register that uh inside that so this one should be a list because we can have a list of files or list of things that we need to register that's why it needs to be a list it's not a master that we type it here you can just type it anywhere but you can see this code guided us on where the best place that we can fit or the best place that can fit our static files this code uh already gave you more directions once you register your CSS also make sure that when you go to the templates see these templates on line 54 we have these directories in our directories register anything either that has been named templates inside this base directory and the base directory just grab everything and register it inside here so that was simple and everything has been taken care by this line of code over here you have not written this code this code was automatically generated once we are creating our templates it says H not defined static files directories not defined maybe you can screenshot make sure that uh make sure that uh your static files directory is equal to that list see this list open a list then just type base directory slash static then um if you write the whole thing maybe you tell us if it still says not defined or something maybe if it says not defined maybe you have not created these templates not templates but static folder static maybe you have not created it or maybe you are whatever you are naming here is maybe different from whatever you are writing here maybe that's why it's complaining not yet defined uh kindly repeat the process of creating templates actually I can repeat that so just create a folder first before you create that templat click on manage to py click this second button here this second icon for new folder then just name it templates the same way that I've named mine here templates just name it the same way then go inside create just click here and then you see the first to an icon new file then you create our HTML file the normal way that we are used to creating our HTML file but in case you are having an issue uh it's empty and you want to be fast just type exclamation mark then press tab the tab key in your keyboard then over here is where we are going to create our normal HTML tags our normal HTML tags like this and say hello my name is uh evance like that or you can just type anything so with that then we are good to go for the first part and I hope I've repeated that please uh run your yes I know uh please run yours let's see let's see just click the Run button and mine is working mine is still working as you can see mine is still working well so in case you are getting those errors maybe you can share with that so uh now I can expand this to new tab how did we go about that where do we go to push that to new tab window view not that one change tabs not that one I'm still wondering what has happened but let me explain oh I Flo then I push this to new tab simple then once I push that to new tab now I can close that yeah perfect so uh now here is where we are going to edit our code and then here is where we are going to view so in case you have wonder you are wondering how I did it just H click the three buttons here then float then you'll be able to see a new tab and then you'll be able to push that to new tab so uh with that said we have created our HTML is ready our CSS templates is ready so our settings we have registered everything correctly so the next thing that we need to create is views so in our views is where we are going to do all the magic things that we uh we want to do so let's create and you click the jungle project it should be named that's just exactly is mine jungle project then click on new tab then just create views. Pi views. python enter Then here is where we are going to create our own views so as usual uh these views that we get we always have um we always have H this import no from jungle. shortcuts jle dot yeah this one you can just press tab to auto complete from Jungle do shortcut import no why is it behaving like this okay from jungle. shortcuts import render then here just Define a function and you can see it has some good auto complete let's see uh thank you like that we can just use that auto complete then just Define a random function function name here then you pass the request as the parameter then you return and once we return we want to render what we want to render the IND the home. HTML we can make sure this home. HTML is actually the same as what we named in our index so it should be index.html so just go to your views and then just rename this to index.html like that and then that one should be working but before we test it h remember there's one more setup that we need to do go to your URLs then add it here so what we need to do first is import you see this View we need to import these views in our URLs so we do from everything or from all import import uh let's see import views import settings import URLs import wsgi as you can see this is autoc completing you see these files settings URLs views wsgi uh all these files is trying to import this files so we just need to import views and that's it the next thing we need to actually map our views that we have imported uh over here so we can just autocomplete and then explain what this code does so from views. home you see this home home is this home here see this home the name way this the way it has been named is the way it should be named over here then we can just keep the name as still uh home and then that one should be uh working out so once you test your application at that point it will fail so let's see if this once we reload this if it will work yeah I know it has failed it should fail uh it's failing because uh because of one thing you see this index.html we have just imported this index.html but maybe the path is wrong so we want to make sure that the path is right so just type uh over here just go to the correct folder you know this is inside templates slash index.html so templates index.html and then there we have our app uh app and running just like that and we have our content over uh over there any question before we go to uh to the juy part are you using replate yes we said it's rep.com rep.com uh recap on the last Parts the last part yes yes David mhm for for okay let me see if there's any other uh thing that we are missing the files in Jungle are are they automatically linked not all of them that's why we are doing the basic setup creating the templates registering the templates then make sure that we set up our views so that we link correctly the not all of them are registered we are just provided with the boiler plates for making our work easier will you go back to the Views the then after views go to the URLs here so I'm going to go to My Views My Views here so in My Views let me see if I can zoom further yeah there we have it so from Jungle do shortcuts import render then we Define a function that we call it home then this function is going to take a request requ EST then uh that function it should be returned and then it should render this HTML template so we are returning the uh the request then we also returning this as a what do we call it these templates over here so as you can see we have a comma in case is does not have a comma it will complain so make sure that we have a to separate between the two so have a request once I save it keeps on running so have the comma then add your templates index. HTML this templates is this templates folder that we have the same way it has been named over here the same way it should be named over here the same way has be named over here index.html go to temp just name it exactly index. HTML that's it for the ER views then for the URLs what we have added from the boiler plate that you had you just imported uh from everything or from dot dot means all from on import views so from everywhere just import these views we are importing the views file then inside that views take the path then go to the Views and use exact H function that we have defined that is home this function is this function here you see this function name what if maybe we named it something like joho it should be reflecting something here like H H views dojo or whatever we have given it then we can just give it a name and we call it that name home maybe something similar just to avoid confusion and that's it for the views and the and the settings and also the URLs so uh we can just get to the juy part that is a I canot important name views check if you have named yours correctly make sure that uh your is important maybe check the spellings if you have just missed spellings please up not working after setting URL and the views take if you have named everything correctly maybe you are just missing some spellings so uh because of interest of time you're going to quickly use some good apis over here so this one I'm going to oh damn why is it how do I is it possible to remove the auto save maybe we can explore that later but these a window is giving us ack it will give us some serious ack we don't get careful we can just minimize it can just try to minimize it so over here we are going to use our apis so we are going to use uh using apis so our first API that we are going to use is using an AP that generates a random quotes random image or a random jog depending with whatever uh API data as so what we want us to understand we have some three things that we want to understand in API in API when you query that data comes as a form of Json so you need to format that Json and get the exact text or exact thing that you have in that Json so uh Json means JavaScript object notations just a form of we can you can actually you can create your own Json and call it a database kind of thing but that will be manual but also the data that you store in database it's stored in form of Json you just Gra it is also a form Json returns is a form of Json so Json is something that maybe you have been using on daily basis but you are not aware if that's uh is Json we are going to see an example of that Json file so here we want to maybe we can Define er a variable and call it response then we are going to use H yeah thank you we have it why is it a completing so here we have requests do get get is a method for fetch this is a f method that maybe you want to grab something from database and return it to uh to the frontend we use get so what do we get we get the URL for our API so that's what we actually get so that's one thing that we can do do so the request here that means uh this is a module in Python that we call import request like that so we should import the requests the request you should import the request and then you use the request uh over here but I'm going to show you something because as you can see it's not returning anything valuable it's failing I'm going to show you something maybe after we are done setting up this I'm going to show you something so one thing that you can also Define here we can grab the data in our Json file so data is equal to response you see this response here that we have grabbed dot Json but also if you would like you can just dot Json you can just grab and then you grab that uhon the same way but I would like just to work on one line to grab something maybe use another line to grab something different then over here we are going to return maybe ah we can call this results uh results is equal to maybe now return the data and then inside that data we can grab a particular thing that we we need to grab maybe we can grab a text maybe we can grab an ID of a person we can grab the age or we can just grab anything like that and then we are done setting up our uh our first API like that so I'm going to explain it again this bit so that we understand first we need to import request that will help us grab or will as a fetch or use this fetch method so uh after that we are going to pass the link or that API link that we have then we are going to return Json file of that API so we just want to grab the Json file we want to return the Json file that's why we are using we are defining another variable then we are assigning it response Json then this Json inside this Json maybe you want to grab a specific data or a specific value that's why we are defining these variable results or result H because it's a single result then we take that data that we have formatted in form of Json then uh that Json we grab maybe age or we grab gender anything that we want to grab once we are done that then we can actually test our application but before we test test let's make sure that we uh we use it here as a dictionary and as you can see it has aut completed for me uh what I've done is actually this thing is so intelligent it's using co-pilot out of the box so I just need to uh to do this just uh what have I done comma as you can see we have this suggestion over here and it exactly matches what I want to use this result should be named the same as result then this result is the result variable that we have uh assigned this data over here so this one should be the result then this one should be the result so this result is the same as this result so one more thing that we need to do remember everything in our views we need to render we want to render everything inside here in our HTML so let's go to our HTML then basically uh generate that uh code in case you want to use anything in our views this is how we do it just go to your HTML then type double calibra then the name of that maybe variable that we want to use we want to use the result see this result is the same as this result then the same as this state result that we have assigned to this key value pair so with that the next thing is actually testing our application and as you can see let's wait and see if we get an error uh couldn't reach repo let's see make sure that the repo is p p okay so let me go back to here and stop my server like that and run it again so that I can get the console the results in the console and then my console says a no modu named requests that means by the moment we were setting up our jungle our templates it didn't import everything it just imported the basic things that must be inside or must be used in our application so the rest is up to us to import these modules import these different libraries that you want to use and everything so what we need to do the normal way that we have been installing everything in our power shell or in our shell so just go to peip install requests request not request not request uh singular but request uh many request or plural after you do this just type enter and wait for it to install request this is a modu in Python that we need to uh to use uh in JavaScript this one we call the node modules that we need to import or we need to install for us to run our applications so with that our app is now well it should be actually showing some good results because it seems still is failing you can just stop and we can try to rerun and see if we get anything see everything is okay uh no bad request go back and see exactly inside you can see we have this error here inside our results we can't get data called age so because we don't have age let's make sure that we grab the exact thing that we need to use uh because in our data maybe we can get we can get text text or maybe I can go to this API and actually see the kind of data that we have uh we don't have text we have uh for example we have the ID we have type uh this is what I'm talking about when it comes when I'm saying uh Json file so Json file looks like this we have this as a list but inside that list we have a d different list inside that so the first one is this one and close inside that calibra the second one uh it should be somewhere should be somewhere uh first we have this ID then yeah yeah we have it so this one uh is one up to here the other one is all the way up to oh wow it's it should be somehow long you can just find the end of that uh of that H thing so this is what H Json file looks like so uh we want to grab the ID we also want to grab the URL or you can just uh grab anything for example like the payload everything or maybe something uh like that so that's what we want to uh we want to grab so we can go back to here and maybe change that from text to ID and uh let's see if it still works or it fails yeah still failing and we need to do something again inside here that we need to grab and maybe index of that uh ID let's see if it will work out and there we have it then this one should be working just wait for it to complete the loading yeah as you can see we have this ID that has been generated let's see let's reload and see if our app fails or still works correctly but in the meantime we can reload this and see if still our app uh it's okay any question up to there damn for sorry guys it seems I was kicked out by my network so uh I think I lost you here once I was trying to reload and uh maybe if I've lost you here H you see this Json file everything is named or uh you remember the we grabbed items in a list we grab them you see an ID so index sorry so we start from index zero index one index two index 3 so what I'm trying to do is go to that API grab the Json then inside that Json ER take everything or the first index of that Json and then just return the ID like that and then that's how we manage to return this ID just uh as simple as that someone is telling me please go slow yes I'm going to repeat so um H let me go to the index. HTML I know you want to see what I've done here so this is what I've done in case you are wondering what's this we need to in case we have a view here and maybe you want to use it this is how you use it use the variable name that we have defined just like this and then we have our data we have our results yeah and I want you to see something I want you to see something this is generating a random ID so let's grab something that is a that is common here maybe like uh huh maybe like repo you can use repo that is a repo we can use something like repo what is it where is my views we can just use something like uh repo because it's something that we have so let's just reload and see if we get any repo from our GitHub API as you can see this repo belongs to Lawrence M once we reload remember that was Lawrence M once we reload let's see my internet H still Lawrence M Lawrence M maybe let's see if it's generating something different yeah as you can see now it has generated uh another for a different person so that's how you just work around random things in apis in working with jungle maybe now you can twe this to be um maybe generating random repositories that you want to use for someone else or you want just to explore or you just want to use random quotes maybe your B at some point point you need to use or you need a motivation you can just go go around and grab um a repo maybe maybe a quot maybe a motivation maybe something interesting you want to uh work around movies you want to watch a movie a random movie you can create this thing for you to automate all those things instead of maybe going to Netflix and then you grabing you see this after this movie we have this after this movie so instead of having your own catalog Maybe just want to explore random things create this use a movie API then once it generates that link go and search for that movie or just uh go to that link and then you watch that good movie that uh it has been generated it's not a must that it to be a movie can be the fun things that we watch on Tik Tok doing things of course we have all that data online you can just use that API and then you uh you do that maybe you're in a different profession you would like to automate like the medicine of course you you can't like um something in medicine just go use that API for medicine Generate random facts about medicine or random um um tips about medicine about a about carpentry about anything we have all these apis available for R to use for pro tips about cooking use the API for food cooking just search for something random or you prepare something random and all that uh it will work for you so before we continue for the python jungle project this one we are building here we are not going to build the entire project we just showing you how to use maybe more than one API and uh already we have used one maybe we can add two then your assignment will be basically simple go to uh go just search online and maybe use a different API about anything then uh go ahead and style maybe this one I've generated is this I wanted maybe to generate this as a a small card St this to be a card maybe I just want to create an entire application entire website basically for using these apis maybe I can create a navigation bar with everything homepage then I can in the navigation bar I can say um food I can say something like verion fashion I can say something like medicine I can say something like um anything educ quotes all those things once you click that navigation for medicine then the data that will be loaded then it will be some random facts random tips about medicine when I go to uh construction I get random things random buildings random architecture designs uh random interior designs for that tab so if you be that creative then uh I know you can stand a chance to win the cash that we have for the haathon so uh for the haathon actually this is the theme the theme is to use an API then build on top of that API build whatever you want to build as long as you used you have used API it's not a master that you use our own API that we have provided but you can just use that API do whatever you want to use so the key point is make use of apis make uh learn how to use these apis that's it for uh using these apis so if time allows we are going to demo another API but uh we canot we can ignore using this maybe we can use something different like um maybe you can use another API here we can say example two example two then this one should be it should be example example one maybe you can use example two of U maybe create um something like we can just say response and maybe response two we can't name the same way as this one maybe we say request we need request dot that appear we are going to change that API we need to get the data we can just call that data too maybe you can name it whatever you want to name it then this response is this response over here we just duplicating the same thing then we are going to use results uh this one is the same as this one we are just uh duplicating everything over here so what we are going to change is this API so for this API let me see if I have any interesting API for us to use maybe maybe something like this random uh random image of a random thing so you want to generate a random image of a of a dog so we have this we want to generate a random image of uh of a dog so let me just collapse this no I can just collapse this this way yeah that looks nice so H this is example two of using another API so just go to here maybe this one we can try without the first index and then maybe we grab a text for example like that or we can grab anything we can go to this API and actually see what we have in this API after sh you just paste that API and you get the Json of it so here we have a message yeah so the message is actually the HTTP then we have a status of success oh wow so that's an example of this API so we just need to grab the message you don't need to grab this text you see this text should be uh should be a message that one should be a message because we want to get this message you see this key here the key is the message we need to grab this message so with that now we can actually also map our example two inside our dictionary here so just go to inside your dictionary and type comma then go to H just type results two then it has autoc completed for me like this see H results we have result two then we have the results this one should not be complaining the line is too long so we just have to ignore that so this one should actually be uh working perfectly so what we have not done is actually H you see this we have done result two we need also to mapk this inside here so we can just copy that and duplicate and duplicate and then just change this to result two then here I'm just going to add uh a random text then I'm going to say random random dog or random uh you can say random pet so this one here should be able to produce a result of that H random dog but in case it fails let's see the error and then we debug from the error so let's wait wait to reload some API require key how do we go about that maybe depends with how you are using it yes of course some depends uh they need key to use uh some of the API they are just defined their API to be used that way so for now you can just search for these API that don't need any uh any key why is application not loading we can just stop it I Rel yeah I see the error is inside here so we need to fix our code uh here this one should not be having this closing Mark then that one should be well so wait uh it's taking a lot of time so let's go back here and then un comment this and then should be showing the results now let's see if it works it's okay yeah and this can see he has generated that image uh our image over here and uh this is a text of that image so to make it an image as usual we need to use the image we need to use the image tags uh like that then here for the source not Source but SRC ER for our source should be um should actually be the results too should actually be the result to then maybe we can give it an ALT uh an ALT of a random pet be something like that should be like that let's see if it works so let's wait and see yeah there we have it we have our image loading once we reload you're going to see another random pet a random image of a dog yeah there we have our random image of our dog we can just reload just let's wait for it take in each time and you can see uh every time is generating a random dog a random text over here so now you can just H sty this make it a website a complete website then for people to use it maybe for people to see random dogs that they can be interested in purchasing then that's it and even actually you can actually create an e-commerce with this maybe a random pet or a random thing then you just add some buttons here for place an order or inquire more maybe once you place that order it will go to your card then after you add that to your cut then maybe the owner of that website can inbox you depending with what whatever you uh operations you want to perform with the website this is another tip of a project that you can use actually um something else that you can use maybe the Amazon API is it Amazon yeah the Amazon API you can use the Amazon API then put a bunch of things like the computers everything once new every customer comes into your website maybe they are having a different experience whatever I'm seeing maybe you are not seeing the same thing because we have not uh or we are not running the same um time so it's generating random computers in for your customers then now they can purchase that computer or they can just uh do whatever that they want or do whatever or purchase a book everything so that's using this API this random apis actually you can actually use these random apis and then make money from them if you use them correctly uh and also wisely any question before we go to the final part that is adding and styling our page anyone would like to speak I unmute them just raise up your hand only two people gra go Grace Grace we are waiting for you okay we can go to suzan Susan Mamu yes Susan how are you M MH maybe can you take then after the key error any other uh what you need to check make sure that you check you see let me raise it make sure that you see this result result two if you have mapped it correctly uh what a have you used first okay okay okay make sure that is the correct https SL api. github.com events the same way the same same nameing but let let me just copy this and you paste it yeah so let me also paste the second one you just copy paste maybe you have missed some small spellings just copy any or the first one and then you try it with the uh how do we get these apis I just Googled these apis just Google them and actually uh most of these apis have not been Googling I've just been using this you see this damn thing as an as a a in it for example I can just type this you see this I'm getting this random apis then for example what if I change this and then let's see if I have any autocomplete uh maybe let me just response three is equal to as you can see it's uh telling me to use anything random GitHub blah blah blah blah blah blah maybe I can ignore that and maybe type enter can see get up just generating this random APS from I don't know where just using AI to give me suggestions to this apis and one else one last person before we create the CSS Seth or winner evening have okay okay okay are you in the WhatsApp groups the python consultation group actually I've been texting a lot in that group you can just say anyone named JavaScript daddy you can touch me you can inbox me anytime okay okay so uh we can do the last part because of time you know it's evening we need to rest we can give it around um 7 minutes of consideration so we just going to go Marathon 7 Minutes of consideration so let's do this uh we have to agree 7 Minutes of uh concentration I Collapse this thing and I kind and collapse it let me see yeah yeah we have it so mhm it should be actually four five minutes of conentration so let's do this we want to style we want to style this a page so we need to add our CSS files already we have created our um our CSS inside here inside our static then remember we went to settings and we have already registered our CSS static file over here so we are done with the basic settings so the next thing that we need to do go to your HTML uh before we go to your HTML maybe you can go to the Styles maybe you can go to the styles. HTML uh styles. CSS sorry and maybe style the body and give it a background background uh of background of pink maybe we can play around with this color maybe hot pink and maybe we can start the image as well to have a wind wind how do we type winth wi of 5 TPX then height height still over 50 pixels maybe we can add some more Styles like a border radius border is it radius of I like 999 9949 like that maybe something like that so uh over here we have already styled but as you can see but as you can see our app should be failing should not be working let's see if it fails or it works um yes yes David I've not been sharing oh wow maybe it kicked me out uh did you see how I created this okay um first thing before we created this we made sure that we created the CSS file then that CSS file we registered it inside our settings can I get the settings I can close this uh we registered our CSS inside our settings like this static files directories is equal to this list you just include it inside this list David you need to mute yourself okay um so this is how we imported our directories or our static files so we made sure that we have a base directory then static the static is the folder name this static here so let's go to our CSS and maybe style this uh image and maybe our body our general body so our general body this is how we style it give it a background color or pink then style our image of 50 he of 50 maybe B radius of 999 and for this HTML and CSS we have already covered more than enough HTML and CSS in your web development class so I believe this should be H easy on you so let me try this out it seems It's failing let me see where the problem is I can stop now I can run it again let me see yeah there we have it but as you can see our background is not styled yet we have defined our colors over here so what we need to do is actually the normal way that you link your CSS we need to link it here but because we are using jungle we need to make sure that we load our um our CSS or we load our static files so on top of here in the first line of code just open a calibra with a double percentage then inside here just type load static here we are loading all the static we are loading the static folder that's the first step the second one is the normal way that you link your HTML H here we write the real is equal to it should be stylesheet then after here we type the hyper reference then here is where we are going to do the magic of importing these static files remember we have loaded these static files or uh up here so we need to do the same thing just use the D the calibres then inside the calra use uh the Double again percentage then inside here is where because we have already uh loaded our static use the static use static then inside our static you want to grab exact thing you want to grab styles CSS so just go to the static and grab styles do CSS so this in Layman language H can be defined as well as these this one can be termed uh as this in a normal way that should be static styles. CSS like that so that is the same thing that we are just interpreting it here but because we are using jungle that's why we are using it the same way as this we load static then we use it like this one so this one represents this then this one represents this so it's the same way the problem is thats or the difference that we are using jungle so let's command this maybe reload and see yeah there we go we have our pet we have our background we have our image of 50/50 and everything like that you have like that let's see if it generates another random image yeah we have another dog you can just style this and change um change the Styles and play around with the these values just play around with this uh values to get the size of this dog yeah there we have our dog there we have our random uh our random freelancer or fire dancer there we have it and that's how we basically H use style use AIS Generate random things Generate random quotes so we are going to provide this code ER but in case you have written this and you'd like to push that to GitHub so that you submit it's another simple thing just go here you see where you see here on your tools uh on your tools just go to your tools and uh open these tools then scroll down to git see this git see uh See this git oh wow why is it not using the correct you see this git I can just screen brush it see this git here this git is the one that you need to click so just click on this uh git oh wow is it not working man what have I done now oh yeah I remember so we need to click this git see this gate over here then click on initialize gate repository initialize get repository like that then you see this a notification this here click on settings then we can leave the repository name as default we can now create repository see create repository created a repository all repository created now you can collapse this now we need to push that code to GitHub the best thing that we can do um for us to get the best experience is actually refresh I think so yes David yeah this one still works uh in case you not finding this uh this button we have for push this to origin Main in case you are not getting this just need to refresh and then or you just need to go back to get then it will able to now open uh the stage you are and it comes to the pro so I'm going to push that code to GitHub then I'm going to confirm then I'm going to wait and see I'm going to wait and see and then that code has been pushed to my gab back David you need to mute your microphone again okay um so just go to GitHub and check if that repo has been created and you can see updated just now and this is the code just go to there then copy that code and share with us I'm going to share that one with you actually you can clone you can f you can use it the way you want to use that triple and that's it for our today's session we want to save on time because um I know it's evening we need to rest we need to do uh catch up with our family and everything but before we leave H I still have an update for the haathon this is what we are going to to build still this project that we have built go on top of that and then build something unique I've given different examples maybe a movie you want to watch a random movie style that page style everything for that movie style that card do whatever you want to do with it then watch that that random movie something else that you can do uh with a different API or a different thing that you can bu on top of this that we have learned is I've said you can use the Amazon API then after using the Amazon API you can scrap the content from there maybe when a user comes to your website they see a different machine from whatever someone has seen maybe a different electronic they can purchase that you can do all those things man so that's a that's uh actually an idea that you can use with our or with this example can I start building a fresh API not to use uh these ones you can build your own API in case h you are able to build or you know that you are capable of building API but for you to actually be added to the list of winners or people who are graded um you need to use an API there's no way that you're not going to use an API and maybe you add a very great project but you have not H been awarded as the winner because you have not used an API because still again we are taking the theme uh of making sure that you use API so our main point make use of API and maybe did something great that's it for our today's session but in case you have any question I'm going to give it to two people raise your hand and maybe you ask a question Daniel Kimi good evening Daniel Dan uh we have a very good Cas yeah I know we have a very good cash but Susan should be the right person to mention about that no no not for the winner only we have different around five people be awarded yeah okay welcome uh someone on the chat saying will be web scrapping if time allows of course we are going to build this project uh if time allows um for us to use web scrapping of course we are going to do that can you use your own API of course if you can be able to do that then you can just use your own API how do we submit the project um we shall share a form as usual where you are going to submit your project so don't worry about that I'm going to share so with that H because no one else has raised their hands uh we are going to end there so thank you guys for joining I hope you have learned I hope you have enjoyed see you in the next uh session

Channel: Code With Evans

Views: 748

Keywords:

Id: Prns10OhSok

Length: 94min 45sec (5685 seconds)

Published: Wed Apr 24 2024