Build a website with OpenAI integration (aka Chat GPT) using PHP and vanilla JavaScript

well hello there I'm sure that you've heard the news chat GPT has taken over the universe and everybody's talking about open AI it's the hottest Topic in all of it but the trouble is most of the tutorials are using things like next and node and all sorts of command line Shenanigans well in this tutorial I'm going to show you how to build a complete website that integrates with the open AI API we're going to have chat GPT integrated with your website and we're gonna do this with PHP and vanilla JavaScript this is the app that we're gonna build it's called clone news now the idea here is that we enter a headline like a negative news headline like the bank has been robbed and what this is going to do is it's going to generate a headline that blames the bad news on a gang of evil creepy clowns then it's going to generate a picture that has something to do with our news story so here you can see a creepy clown outside the bank laughing that's what's coming up it's all here and let's get started alright folks to get started with this one I'm gonna recommend that you get PHP and MySQL or Maria DB onto your computer now there's a variety of different ways of doing this but I'm going to recommend going with zamp okay so head to your favorite search engine and search for zamp you should be taken to the Apache friends website and you can get zamp for Mac windows or Linux this thing has a wizard that's super easy but if you have any challenges just let me know in the comments okay now the next thing is we're going to be using a PHP framework here now there's not going to be any command line Shenanigans or third-party dependencies or anything like that however we are going to be using one framework and that will be the Tron gate framework and I'm using this because it's the closest thing that I can find to Pure PHP and it's really really easy and also it's going to enable us to do a ton of work really really quickly is this page down no it was not I was about to start crying like a baby anyway the best way to get John gate is to go to John gate dot IO forward slash download and from here you can download a little app called the Tron gate desktop app it's actually just a headless browser believe it or not so it's just exactly like having a browser except without the address bar and it's going to enable us to do things much much more quickly this is free it will always be free and by the way interesting little factoid parts of this framework where actually written by the chat GPT application that's right so this framework is partly made by AI which seems kind of appropriate now I know that there's some of you who are completely paranoid about downloading things well there is a link to a GitHub page and you can get try and get straight from GitHub if you want however you might find that things are a little bit slower um I would recommend look if in doubt just watch the tutorial okay listen to The Friendly voice no I happen to have try and get on this computer so I'm going to click this little icon down here and it's going to say please make sure you have PHP and your database up and running so let me do just that I'm going to navigate to localhost and it looks like we have here's PHP my admin I'm just checking here and yeah everything is uh looking fine okay so we've got that no I'm gonna let's see where are we gonna go here let's go back to the Tron gate desktop app I'll say okay and what I'm going to do is I'm going to create a new app so I'm gonna enter an app name now I'm gonna call this app clone news before I press submit by the way can I just show you very very quickly um remember I said that the desktop app is a headless browser well just to show you what I mean if I go to target.io now I I think this is the address uh you can see this is actually just a normal page here so again please do not be too impressed by this stuff here there's nothing weird going on this is literally just a browser that's reading pages from the Tron gate site okay so I'm gonna call this app clone news I'm going to hit submit it's going to suggest that's a strange background let me just change that to something a bit less distracting okay so it's going to suggest a base URL now I'm perfectly happy with the one that it has so or the one that it has suggested so I'm going to click submit and now we have to enter our database connection details now if you click here you'll see that it auto completes you may need to change a password or whatever but for me this is just fine so I'm going to submit again no it's going to ask us to choose a location for the new app so I'm going to click and I'm gonna choose for me on this computer it's inside zamp HT docs but your path may be different nevertheless htdocs is where all of my own websites live so over on the right here I'm going to click create new app here okay now I'm going to click generate new app now remember folks everything that has been happening here is literally this is just a browser that's all it is okay but when we click generate new app I'll tell you what's going to happen right it's going to go out to GitHub and you know how on GitHub you can download zip files here well it's gonna actually download the zip file automatically then it's going to move it into the folder that you selected it's going to extract the zip file do a little bit of configuration and create a database which sounds like a lot but watch how fast this is so here we go and there you are so app successfully created if we click on view your new app it will open up the browser and you'll get a page that looks something like this I'm really zoomed in and I'm on quite a small monitor but you should get a page that looks something like that have a look at the URL you'll see that it says localhost forward slash clown news and if you go to your database here or your database management software you should see that we have our database here called cloud news that has been created so now we're gonna do some crud create read update and delete for Speed we're going to use the dawngate desktop app I'm going to click create new module and I'm going to choose new Tron gate module now the module name singular is gonna be story I'm going to click submit it's going to ask if you want to add a navigation label now you can leave this blank if you want or you can change it anything you want but I'm I'm happy with this I'm going to just click submit and no it's asking if you want a navigation icon this is referring to an admin panel that you're going to have in just a minute so I'm gonna say yes just for fun and it's going to open up another window here you can see we've got a whole bunch of icons choose anything that makes you feel good as for me I'm going to type in newspaper and I'll choose this little newspaper icon all right now it says let's add some properties so I'm going to click ok and we now have a properties Builder again folks all of this is being read from the Tron gate website there's actually nothing on my computer here remember that right don't be too impressed okay so I'm gonna choose variable character from the top left and this is going to be called Original headline and I'm going to click add new property so the original headline is going to be required max length of 255 minimum length of two you can change these numbers if you want by the way you can click onto these and literally change them but I'm not going to bother and this is going to represent our original headline the one that we type in and that's that okay now the next field is going to be a text area and this text area is going to be called funny headlight this is the headline that's going to be generated by open AI let's add this one and the reason why I'm making a text area is because I have this thing made in such a way that it could potentially return something with more than 255 characters okay so that's what's Happening Here now I'm going to take out this required thing because it's not required and by the way you can see that you can close these and expand them and all of that okay but this one is not required and it's a text area all right let's have one more field it's going to be another text area this one is going to be called picture and this is going to contain a URL that if we go to the URL it's where the picture is right the reason why I'm making this a text area is because this is going to be a generated picture from open Ai and sometimes the URLs that you get back are really really really big so let's not take any chances we'll just make it a text area let's add this okay and again I'll keep that one along with the funny headline they will not be required but the original headline is required okay so when you're happy click on submit all right so we're back here now we've got a thing called choose URL column this is a thing that well if you've ever used WordPress have you ever heard them talking about a slug it's where you have a thing in the URL that is let's say easy to read so you could potentially take your original headline and if your headline was unemployment On The Rise you could have in the URL unemployment hyphen on hyphen they're hyphen rise now we're not going to do that today it's one of those things that might be useful in the future though especially if you're interested in things like SEO but I'm going to just keep this one empty and now we're going to choose a default order buy so when we look at things on the admin panel how would you like them to be ordered I'm going to click I'm going to choose ID ascending and now we're going to generate new module so let's do that so it's doing its thing and there we go and it says view module now when we click view module it opens your browser takes you to a full admin panel with complete Security and everything and we can now click create new Story Record I'm going to click here and you can see I had a little practice on I'm just going to say first try Ahoy and I'll just say this is super let me Zoom you in a little bit will you this is super funny and uh no pick today it doesn't matter we're just testing it right so if we click submit there you go so we've created a record have a look on the top left you'll see our navigation complete with the icon we have comments I'll just show you that here is a comment and we've got all sorts of token based authorization and everything so not too bad right now I think that some people when they see that they kind of freak out a little bit so again let me just take a moment to explain what happened right so everything that we were doing on this Tron gate desktop app is just reading pages from the website so remember this is just a browser right it's nothing weird it's just a browser now when you selected all of the stuff the properties Builder and all that it was all just pages from the tongate site and then when you had submit or generate module what it did is it sent a request to this website here and then the website generated a module now a module is just a folder that contains some code right so that thing got generated on the trongate website then it got turned into a zip file then it got downloaded onto your application and immediately it got deleted from the Tron gate website so the point is that the Tron gate site you know has no means of looking at what you're building or anything like that okay so all of this stuff is really just for Speed and I hope you'll agree that this has been kind of fast right so now let's have a closer look at the home page here so you can see we've got this blue home page it's not too impressive and I think that we can actually do a whole lot better than this so I'm going to ask you to open up your favorite text editor whatever works for you is fine and I'm gonna open up my clone news thing all right so this is our website here this is what we've just created okay no just to give you a super quick tour on the very top left you can see a folder called config this is where our configuration files for this website live if you open up config.php oh by the way please do give Changi a star on GitHub if you like using this but in any event for clarity I'll just get rid of that for now I'll save and I'll Zoom you in a little bit so you can see here that we've got these constants a constant is kind of like a special type of variable where the value does not change you know so one of the constants is base URL and here it is and we now have our base URL here so that's our home page you know now there's a few other configuration things in here for example here's database.php sure enough here's all of our database settings and by the way take a little trip here have a look and you'll see that we've now got a bunch of database tables and even our stories database table it's all here and it's all ready to go okay now the next folder that I'll mention very briefly is the engine folder this is where most of the inner workings of the Tron gate framework exist I'm gonna recommend that you don't mess about with that folder actually one of the cool things about drongate is that whenever new features come out all you have to do is swap the engine folder and it's just a much nicer way of working than receiving an email that says your stuff has broken you know because of some insane rewrite schedule by the way I clicked into license there let me just show you something I'm gonna change this number and make it lower right now just watch for a second I'm gonna close now we do have a little license in here somewhere I'm going to change that to our lower version number okay I'm Gonna Save I'm gonna close Okay so just imagine if you will that this is an old version of Tron gay and there's been some kind of update okay now I'm going to reset this app watch how Tron get handles framework updates imagine we go in one day and we see let's modify our app I'm gonna work on this app check this out it says tongue version blah blah blah is available aha how did it know the answer is it read the license file it read the number it saw that there was a mismatch so when we click here we've now got three choices update to version you know the latest one 1.3.3 whatever about that continue using the one that you're on or click here and find out what's new so if I click here watch this have a look at this successfully updated framework engine to the new version and we say okay so that's how easy it is to have framework updates added to your website and what happened there is it was swapping out the engine folder okay just to let you know now there's a few other folders here I don't want to turn this into a full tour of the framework but what I will say is that this modules folder is where most of the action happens almost everything in transgate is a module so we just created a stories module have a look you can see it's got assets controllers views by the way if we go back to the site suppose we go to maybe uh how about this page let's see how about this page here where we create a new Story Record okay take away your guess what view file if I click in do you think is being called for this page here that's right it's the create view file and here it is and it's just a very simple form with a little bit of PHP so the key takeaway is this is a really really easy framework to use now if we go back to config for a moment here config.php you can see that we've got a default module called Welcome a default controller called welcome and a default method called index so with that in mind let's look at modules you'll see we've got a welcome module here no it says that's the default module fine now I've got a default controller called welcome and if we look inside this controllers folder you'll find a welcome.php file with our welcome dot PHP class inside here we have a method called index don't forget a method is just a function that's inside a class and so what's happening here is we're saying that this is the default module and this is where we start from so if we had said that the default method is hello I'm Gonna Save and if we had a little thing here that said function hello and I'm just gonna if I can type go like this and Save now if I go back to the home page and refresh you know what's gonna happen it's gonna say hello so now you know how this works okay so let me just put this back to the way it was and so we're now back to oh what normal home page here but we are going to make this page look a whole lot better you see so far this is just loading up a welcome view file this thing in here and as you can see it's just some HTML you know congratulations it totally works so this is the code that gives us this blue page here now that's kind of okay and sometimes it might be nice to do that but wouldn't it be super cool if we had an HTML template something a little bit more sophisticated so here's how we're going to do this we'll take this line out we're going to see data view module equals welcome I'm tailing the framework hey framework some stuff's gonna happen and it's inside the welcome module next I'm gonna say data view file equals now let's have a new view file I'll call this one home page and we'll create this in just a second right finally I'm going to say this let's call upon template now Tron gate does have a template class and do you remember our admin panel here this is actually the admin template that comes with the framework but there's another template called public it's just a little starter template so we're gonna have the public template and we're going to pass in the data and save okay now let's go to our views folder here we'll make up a new file and I'm going to call it homepage.php of course you can call it anything you want but around about here I'll do an H1 and I'll say welcome and then I'll do a paragraph and I'll say let's blame all of the bad news on a gang of creepy clones okay now if we save and then go back to the home page now you can see we have a much better looking home page and right here this is where Our viewfile Lives now one other thing if you have a look at config again have a look at site owner you can see we've got a variety of other settings here you can change these of course you can add your own settings you can do anything you like but you see how I've got one here that says website name well if we go to our headline and say welcome to and then I'm just going to Echo actually it's a constant it's a website name you write it like this right if we do that save and refresh you can see that now it says welcome to clone news kind of cool right kinda cool okay so let's now build the page I'm gonna have a form on this page or at least some form tags now it doesn't have to be an ordinary form we're actually going to be using a whole bunch of JavaScript here but don't worry it's going to be easy ordinary form tags will be just fine but to speed things up I am going to go into PHP and I'm going to use a few things that come with strong gate that will make this process really fast so first of all we're going to have a form label I'm going to Echo form label and our label is going to say original headline there you go okay now if we save and refresh there's what we've got and if I show you the source code you can see right down here there's a very small font but you can just about see that we've got a form label here so that's what we're doing we're adding in these different form elements here the next one is going to be our text input field I'm going to Echo form input now this is going to have a name of original headline so that's original underscore headline then it's going to have a default value so I'll just leave this empty and that's us okay so if we save and if we go back here zoom out a little bit refresh there's our text input field here now underneath this I'm gonna Echo form button and this is just going to be an ordinary button so I'll just say submit that's going to be the name of this element and this here will be the button text so it's going to say the word submit with an uppercase s so save refresh and there you go kind of easy right kind of easy so when we use these things what's happening is Tron gate is drawing all of the form elements that we have asked for and there they are however I think that we can do a little bit better let's have a placeholder on our foreman put field here to do this I'm going to add a third argument and the third argument is going to be an array now there's different ways of doing arrays with PHP I'm going to do this method I'm going to say attribute and then I'm going to say in square brackets placeholder equals enter Title Here actually it's enter original headline uh I'll just say enter headline here there we go okay so I'm now gonna pass my attributes array into form input as the third argument save and refresh and now we have a nice little placeholder now how about if we make this form maybe a little bit more narrow would that be cool okay so we'll do some styling I'll do it directly on the page Just For Speed and I'll say a form so if we have a form going on it's going to have a maximum width of maybe 420 pixels and then I'm going to say margin 0 Auto that's going to move it to the center so save refresh there you go if you want you can also align the headline to the center we can say class text hyphen Center okay and we can do the same with the paragraphs class is text Center and there you go let's take Center class comes with the Tron gate framework strongy actually has its own CSS Library you don't need to use it you can use something else like bootstrap or something if you want but sometimes it's nice just to get things up and running quickly okay so there we go no from this point on we're going to be doing quite a bit of JavaScript but don't worry I'll keep you right and the first thing we're going to do is we're going to attach a little thing on this that's an on click so when we click this JavaScript is going to Spring to life and do a whole bunch of cool stuff so here's what we're gonna do on our form button here remember how we passed in this array called attributes well we're going to do the same with the button so this time I'm going to say button attributes so BTN attributes right now its key value pairs so the key is going to be on click and that's going to be equal to and let's have it saying something like oh gee what will we see here fetch funny headline okay there we go fetch funny headline now I did have a practice run last night but I don't have any notes so I apologize if I was falling over my words there so whenever we click on submit button we want some JavaScript to run now let's add our button attributes onto the form Button as the third argument so there you go and if we save and refresh and now I'm going to show you the page source code and have a look it's kind of over here if you look really closely you should see that we've got our button here and it says on click fetch funny headline all right so now let's do a little bit of JavaScript again just for Speed I'll do this directly on the page I'm going to say function fetch funny headline like that okay and what this is going to do is we're going to read the value that's inside this form input here and then we're going to send it to an API endpoint and hopefully we'll have a funny headline returned now in order to read this form element I'm going to make life a little bit easier by giving this thing an element ID to do that we can see attributes ID equals and I'll say original hyphen headline save so again if I just show you the source code you'll see that we've now got an ID as part of our text input here now the reason why that's cool is because it means that we can see in our JavaScript even right at the top here we can say const orange headline L which means the original headline element now you can call it anything you want call it form input anything you want right but I'm going to go with this and what does it equal document dot get element by ID and of course it's our original headline so because we've declared this at the top of the script here it means that we can reference this anywhere in the JavaScript and everything will be fine so for example we could see f orange headline element dot value does not equal an empty string then let's just do an alert that says Orange headline element dot value let's just try that right so save we're going to refresh now if we don't have anything in here and we submit nothing happens but if we type something here like hello and submit you see that we have a little alert that says hello so this is reading this text area now did you notice that when I clicked in here we have these autocomplete site this is obviously the browser trying to be helpful sometimes that's a good thing to have but sometimes it can be a little bit annoying if that bothers you and all you have to do is go back to your attributes here and we're going to add one more attribute this attribute is going to be called autocomplete and we're going to give it a value of off and save that so refresh have a little click and now we don't have those annoying autocompletes so there you go reading the value and I want to make you feel good now before we get entangled with API endpoints and all of that stuff I'd really like to take a minute to focus on the flow of this web page you know and just sort of do the groundwork so that we have something that looks cool you know so what I think we're gonna do is when people click submit let's have it so that the form immediately disappears and will have a little spinner on the page to let them know that something's happening now the way that we're going to do this is we'll go underneath our form here and we're going to have a div with a class of spinner I'm using Emmett here by the way just for Speed it's a plug-in and it's enabling me to do this so it's just an empty div with a class of spinner so it's underneath the form right now I'm going to save I'm gonna refresh and as you can see we have I thought that was under the form oh pardon me I'm in the wrong place here underneath the forearm here we go underneath the form thank you very much save and refresh and there you go I think I'm zoomed in too much okay so we've added a little spinner here now that's cool and of course this is a little bit of CSS that comes with the framework it saves lots of time right and what we're going to do is when we land on the page for the first time We're not gonna see this spinner so let's just go straight into the div here and we're going to see stale equals display none and we'll save it and refresh so as you can see there's no spinner to be seen but you and I know that there's a little spinner there okay that's our secret and that sounded a little bit perverse anyway what we're going to do now is we're going to reference this spinner and when somebody submits the form this spinner is going to magically reappear and the form is gonna disappear so let's create references for these things that will make life a whole lot easier we'll start with the form I'm going to say const the form by the way I like to use camel case when I'm with JavaScript and snake case when I'm in PHP not all the time I'm sort of all over the place but you can do whatever makes you feel good but I'm going to say that the form is document dot get Elements by tag name so the tag name is form and this thing is expecting an array so for that reason I'm going to add on a key of zero and that means that now we've got this constant that refers to our form let's do one for the spinner I'm going to say const spinner equals document dot get elements now this time it's going to be by class name the name of the class is Spinner and again because it's expecting an array I'll pass in a key of 0 and square brackets so what that means is that when we submit our form let's get rid of the alert it has served its purpose and what we're going to do is I'll leave a comment I'll say hide the form okay now the way that we hide the form as we say the form dot style dot display equals none then I'm gonna display the spinner so I'm going to do that by saying spinner dot display a pardon me spinner dot style dot display equals and it's actually Flex you could say block but Flex makes it go to the center okay so there we go now let's just save this and we'll have a little refresh now I'm going to add a headline I'm going to click submit and there you go so the form disappeared The Spinners are on the screen and all is well the only thing is I think this spin is a little bit high up here so let's go to where the styling is and we'll see that for DOT spinner so anything with a class of spinner will give it a minimum height of 7 m save refresh let's try it now submit and there you go looks kind of cool right Luke's kind of cool no I want us to simulate how all of this stuff's gonna work okay normally when you're dealing with open EI normally it takes maybe about five seconds something like that to get a response back so what we'll do is we'll build a sort of dummy page and hopefully this means that we'll be ready when we come on to adding in all of the cool stuff so what I'm going to do then is underneath our spinner here let's have a div with an ID if I can type of story okay so it's a Dev with an ID of story now this is where our funny headlines gonna go and it's also where our picture is gonna go when it gets generated it's all going to be inside here and inside here let's have an H2 like this and I'll just say funny headline to go here let's just save that and refresh so you can see how this is going to work right now since it's a headline by the way how about if we make it so that the H2 has a text transform of uppercase makes it look a little bit more like a newspaper you know so this is where our funny headline is going to go and the picture is going to go above that now let's clear this H2 here we're going to make this empty okay so there you go and I'm going to create a JavaScript reference to this H2 now you can call it anything you want but I'm going to say const funny headline l so the funny headline element I'll see its document dot get Elements by tag name let's Chuck in an H2 and we'll say zero because once again this is expecting an array so the idea here is going to be that when we submit the form we're going to fetch a funny headline so let's just say funny headline element dot inner HTML equals this is funny something like that right now let's save refresh so I'm just going to do that hit submit and there you go so this is the flow right this is the flow but of course just to do a realistic simulation let's add in a little set timeout now this is just for the moment we'll take it out later right we'll have a set timeout with maybe a two second Gap here and then let's just have a thing in here that says draw funny head Lane okay so something like that and we'll have a little function here that says draw funny headline and so now we're just gonna see funny headline element dot Anna HTML equals this is actually it's not very funny but it will be soon and whilst we're here let's now do the opposite of these two things so let's now display the form okay so instead of hiding the form we're now going to display the form so I'm going to say that display is blocked and let's now hide the spinner so for the spinner display is going to be none again and also let's clear the form field so the form field is our original headline element here that's the form field so if we just say original headline element dot value is empty and there you go okay so let's just save this I'll shrink this down in case you need to look at the code so there's what we've got so far something like that I'm Gonna Save and refresh and then add in some headline doesn't matter what it is here click submit you can see it's doing its thing and then boom there you go there you go now if you want you can Center the H2 I just thought of that actually so let's do a little uh text align Center or alternatively you can have exactly the same effect by going to the H2 and seeing classes text Center it's up to you right so here we go this is the flow and that's how it's going to work and don't it make you feel good all right so now we're gonna do some fantastic custom API development here we already have an admin panel remember this so we can already use this if we want to but wouldn't it be cool if we had some kind of API endpoint where we could post stuff using JavaScript and have that take care of adding the records well done so you've already built one because if you go to your website base URL then API forward slash Explorer forward slash stories there you will find a whole bunch of API endpoints and these were all created when you generated the module now just to show you how this works we've got one at the top here that says get if we click on that you'll see a pop-up and if you click submit by the way it will say invalid token there is token authorization here but if we just tick bypass authorization then click submit look at that it's returning the information that happens to be from this table here pretty cool right pretty cool no over on our website we are interested in creating a new record when somebody fills out a headline and presses submit so if you look down here you'll see that with one we've got one actually called create so if you click on it you can see that this one is an API that accepts post requests okay so this is going to be an HTTP post request and with this one if we click in here you can see that it auto completes to help you get started these are the fields that this is expecting now I'm going to add in some stuff let's just say BBB if you see something like that right I'm going to click bypass authorization there's a deliberate mistake coming up here because when we submit you'll see that it says endpoint not activated since no authorization rules have been declared this is not an error this is just a little bit of security because I think that it would be really irresponsible to just leave something like this wide open even if you had basic token authorization it's just not good you know so we're gonna have to activate this end point and let me show you how easy this is open up your text editor head to stories assets api.json now in here you'll see a whole bunch of settings for API endpoints and if you look really closely you'll see that all of the endpoints on this page match the settings here so this is where we Define these end points now if you look down you'll see that there's one called create okay I'll just zoom you in a bit so that's our create endpoint we've got a URL we've got a request type and some other stuff but you'll notice that the one above has got some authorization rules and this one has no authorization rules so let's fix that now I'm going to do a little comma I'm going to see authorization and just to keep this really easy I'll do a semicolon and in quotations and asterisk that means that this API endpoint is wide open and I'll save now obviously we would not do this in a live situation but it's just a tutorial and I want to keep moving forward right so save that and now we're gonna press submit and as you can see it says the server response is 200 that's our HTTP Response Code it means everything's okay and it Returns the ID the headline basically all of the details for our brand new record which has just been added pretty cool right pretty pretty cool but you know I think we can do a whole lot better than this let's make it so that we are only submitting an original headline so very carefully let's just remove this okay so I'm hitting the backspace button here and I'm only going to be posting the original headline however before our end point just takes this original headline and adds a record I want to add what's called a before hook let me show you how this works so if we go to our create thing here we're going to say comma and then it's before hook with an uppercase h we're going to do our goal on our before Hook is going to be called fetch underscore funny underscore head Lane and save right so what this means is before we do the usual insert we're going to run everything through a little function with this name Now open up your stories controller file it's inside there stories module looks something like this and right at the top here we're gonna see function fetch funny headline and in here I'm just going to Echo super cool with a little die statement and Save so this time when we hit submit the you'll see that it says super cool and then the script stops and that my friends is a before hook now the way that before hooks worked the whole idea is is we take in whatever is coming in I'm gonna represent this by a thing called input then we're going to do some manipulation we're actually going to call open Ai and all sorts of stuff but then when we change the input we're going to return it and that's it then it's just going to insert the database record if you want to impress your friends by the way what we're doing here is we are creating middleware that's the fancy name because it's jumping in front of the request right so it just so happens that we do have some stuff coming in let me prove that I'm going to say Json input comma two now Json is a little function that comes with the Tron gate framework and it displays our rays and objects and things in a nice way and comma through just adds a die statement it's exactly the same as saying this okay so we're gonna say Json input 2 and if we save and then submit now you can see that a whole bunch of stuff has been submitted here we've got token I've got some parameters module name and so on now suppose we wanted to get this headline here that has been submitted we can do this by saying original headline is input params original headline and just to prove that we do have this I'm going to Echo original headline with an i statement and if we submit no there is our headline there it is okay so what we're going to be doing now is well maybe not right now but the idea is we're going to send the original headline to open EI to get a funny headline okay we'll do that just in a short while but right now let me just show you how this is going to work open AI is going to give us some kind of funny head Lane now let's just imagine that this is a totally funny headline just imagine that we've received this from open AI right so what we're now going to do is we're going to say input params and then we're going to see funny head Lane equals and we'll add in whatever the funny headline is now we also have a picture column on our database here let's just for the moment say input params picture equals and we'll make it an empty string okay so that's how our before hook works we are taking in a bunch of stuff we are changing the bunch of stuff and then we're returning the input the try and get framework is going to then pick this up do the database insert and all as well now let me save this and I'm going to demonstrate this working so I'll say another headline let me do here I go again I should have said on my own but anyway I'm gonna hit submit and as you can see a new record has been created it's maybe easier if I show you this on the actual database so I've got a new record here and you can see that we've now added this funny head Lane and we've given the picture an empty string pretty cool right pretty pretty cool so this end point is in quite good shape and now what I want to do is have the home page sending a message or sending an HTTP request actually to this endpoint now look down the bottom left you see how it says URL segments that is telling us where this endpoint is so I'm going to copy those URL segments right and no let's go back to our home page file here and when we have this fetch funny headline going on right around here let's get rid of set timeout just get rid of this that was just for testing it right and so what we're going to do is we're gonna fetch a funny headline from the API endpoint that we've created so to do this I'm going to say const Target URL equals and I'm going to Chuck in the URL segments by the way if you want to be super proper and have a full URL you can Echo with PHP base URL so that's going to give us the full URL that takes us to the end point remember base URL is defined inside config so it's perfectly okay to just jump into PHP and have PHP at the full URL there all right so now we're gonna do our HTTP request there's a variety of different ways of doing this with JavaScript and in fact um what I'm going to do here might even be a little bit crude I'm sure there's a way to do this asynchronously but I'm going to keep this tutorial really simple and this is the way that I'm going to do this I'm going to say const HTTP equals new XML HTTP request okay then I'm gonna say HTTP dot open and I'm going to pass in two arguments the first argument is the request type so this is going to be a post request and the second argument is going to be the target URL okay so what we're saying is here's the target URL and we're going to be doing a post request to this target URL of course the question is what are we going to be posting well let's just clarify that I'm going to say const params equals and I'm going to make a little JavaScript object thing here and this is going to have a key of original underscore headline which actually is what this is expecting right and it's going to have a value of the original headline element dot value so this is what's going to be posted and obviously if you had more Fields you would do a comma and you know do something like that okay but this one's quite simple don't forget you do not need a semicolon here and that's going to be fine so moving on with this thing we're going to say HTTP dot set request header I'm going to see content type is application forward slash Json and then I'm going to say http.send and I'm going to pass in Json dot stringify params so I'm going to turn this thing into a little Json string and hopefully that will keep JavaScript happy now by the way wasn't that miserable I think it was kind of miserable but stay cool everything from here onwards is easy now we're gonna say HTTP dot onload so whenever this thing has finished doing whatever it's going to do we're going to call a function okay there's other ways of doing this syntax by the way but for me this is the easiest right now this function is going to have access to an HTTP object and from that we can read the text we can even read the HTTP Response Code let me just demonstrate if we console.log HTTP dot status then if we console.log http.responsetext I'm going to save and Watch What Happens here I go again on my own all right I'm gonna submit actually I'm at the wrong place let me go back to my home page here all right so here's our original headline I'll do it from here here I go again on my own now I'll open up the inspector I'll get the console up here there it is on the left right I'm going to click submit and as you can see on the top left here we've got our HTTP Response Code which is 200 which in this case means everything's okay so that's this part here and then we've got our response text which is of course this Json string that represents our new database record and there it is pretty cool right pretty pretty cool no if something goes wrong the HTTP status will not equal 200. so what I'm going to do is I'm going to just say F HTTP dot status does not equal 200. now hopefully that won't happen much but if that happens I'm gonna say handle error and I'm gonna pass in the HTTP response text okay so let's do that but otherwise we're gonna call draw funny headline this is how it's going to work okay and we'll deal with draw funny headline in just a minute but first of all I want to deal with this error handling thing let's be responsible Developers so we'll head over to our endpoint here and we're just gonna imagine that something went wrong okay so let's imagine that there's some kind of error message something went wrong I'm sure there'll be better error messages but there you go now we're going to simulate an error of some sort we can do that by saying HTTP Response Code maybe say something like 400 or anything you want actually and then I'm just going to Echo the error message and then I'm going to have a die statement so none of this stuff is going to work we're just pretending that there's an error okay so if I go back to the API Explorer just to show you you'll see that it says 400 bad requests something went wrong now by the way in the tron gate documentation there is a page inside the docs if you search for HTTP response there's a page here that gives you a list of all of the HTTP response status codes here and what they mean you know so there's one that says 403 Forbidden so we could say okay let's have a 403 and we'll just say uh you are not allowed this is how errors we get handled okay now to show you this with our website let's make a thing called handle error so say function handle era now this is taking an or response text which is actually an error message you can see error message like that if you want so it's entirely up to you what you do how about if we do a little I'll lay up with the error message so we could do that and then we could just reset the form so just copy this and then do something like that and it's not a hundred percent perfect but hopefully it will be acceptable so let's now simulate an error or just make sure that everything's okay as far as that goes so here we go I'm adding in I'll refresh this I'm adding in a headline I'm going to submit it says you are not allowed and when we say okay everything goes back perfect right so that's a nice little bit of error handling hopefully we won't need this but there you go now let's deal with the business of drawing the funny head Lane now what I'm going to do with this is I'm going to just pass in the HTTP response text and by the way let's take this stuff out so we're all back to normal here right there we go so we're gonna pass in our HTTP response text and it's gonna run draw funny headline and what's going to happen is instead of us just hard coding Nissan we're gonna read whatever has come in from our end point so let's just pass in response text we know that that's what we've got now actually that is a Json string maybe we could just call this Json string right and we're now going to see const text object equals and I'm going to say Json dot parse the Json string by the way you can use different variable names if you want I'm just making this up as I go along you know but in any event now I've got access to this text object that means that I can go here and I can see text object dot funny headline and there you go and with a little bit of lot no if I type in an original headline hit submit you'll see that it says this is a totally funny headline and it was getting that from our end point pretty cool pretty pretty cool and just look at how fast that was as well super fast boom all right so now we are ready to do the bit that you came here for and that is the open E.I shenanigans so most of the action for us is going to take place on this story's controller file and what we want to do now is send our original headline to open AI in order to do this you're gonna have to go to the open AI website of course so it's open EI and from here just create an account you can do all of this for free everything I'm showing you here is Free by the way and then just sign in I'm going to sign in right now okay all right I hope this works sometimes it can be a bit busy you know anyway it looks like we're okay all right so assuming that you have an account the first thing that you're gonna have to do is get an API key now I'm going to show you how I got the API key but if there's an easier way please help us out and tell us in the comments also if this method stops working have a look at the description and I'll update you and I'll leave some instructions there but today this is how I get an API key I click into quick start tutorial and very carefully I want you to scroll down and look for a little button that says create new secret key now if you click on that it's going to give you an API key so then we just copy the key here by clicking this green button and now I'm going to go back into config and I'm going to add in our API key I'm going to do this by saying Define I'll call this one API underscore key and I'm going to paste in the API key and Save okay it's as easy as that now let me just clean this up a bit we've got a whole bunch of stuff open here all right so that's that now once again let's go back to the stories controller file and so we have an API key and we're ready to now send our request to open AI to generate a funny headline this is something that we can achieve with pure PHP doing a cuddle request Carl is an extension that is available on almost all installations of PHP I mean you've probably got it right and like I say there's no command line there's no third-party libraries but the code can be a little bit awkward so to speed things up I have created a repo on GitHub and all it's got is just some PHP functions it's really really simple stuff no big deal and it's just some PHP functions to get us all started here so the first function I'm going to show you is make funny headline so let me show you this in fact I'm just going to click on the raw file here and here it is so it's just some PHP right I'm going to copy that and then I'm going to paste it underneath our fetch funny headline okay so let me talk you through how this works and there is a chance that I've changed it perhaps by the time you watch this okay but in any event here's how it works this is going to accept our headline that is our original headline then we're going to do some Coral Shenanigans this is all just PHP okay now the key part of this that I want you to pay attention to is this prompt here I don't know if you've tried the open AI chat system chat GPT but you know how you can go here and add in a question here this area down the bottom here this text area this is what we are referring to when we say prompt and as you can see I've added in some text maybe I've changed it by now but here I've got create a news headline that blames all bad news on a gang of evil creepy clowns give an absurd and funny explanation as to why clones are responsible for the bad news the headline should be based on this and then we pass in our headline so it's exactly as if you had gone to this website here and typed in the thing here and then you know your headline goes here so that's exactly what we're doing except we're doing it with PHP now you can see that we've got some options here for example we are defining the language model here that we're using I'm not gonna read all of that because I've left some notes on the readme and right there I explain what each and every one of these things does so you're welcome to read that if you want but if we go down a little bit further you'll see that we are passing in our API key remember we set that up so here we're passing in the API key and it's doing its thing and eventually it's going to create an output object and so you can see that this output has got some text and it's got a status that's actually an HTTP Response Code now I want to really test this endpoint on its own before we go any further so let me head to the website here and I'm going to go to stories forward slash make funny headline now before we run this let's just hard code a headline here let's say something like the Mona Lisa Bond or destroyed destroyed in fire let's just imagine that that's the headline okay and we're going to let this do its thing and I really want you to see what's coming back so I'm going to say Json output true I'm Gonna Save so now let's test this out here we go oh hang on there's a typo I forgot the letter i there you go and it's doing its thing and there's what we get back so you can see that we've got some text Mona Lisa destroyed evil creepy clowns to blame and so on and you can also see that we've got the status so if you have something like that coming back congratulations it means that this is working so now that we know that this is working I'll take out the headline and I'll take out this line here and so now we know that we're going to have this thing returned text and Status okay so let's now go upstairs and where we've got this funny headline equals now we are going to call upon make funny headline and we're gonna pass in our original headline but beware it's actually not a funny headline that we get back do you remember it's actually this output object that's what we get back okay so what we're gonna do then is we're gonna say if output calling upon status and remember we do have a status right hopefully it's 200 but if the status does not equal 200 then we're going to say HTTP Response Code and we're going to Chuck in the output status and then we're going to Echo the output text that's the error message and then we'll do a die statement so if anything goes wrong that's what's going to happen and we have already prepared our page to deal with this gracefully but otherwise well strictly speaking we don't even need an else statement because remember we've added a die statement here so what we can do is we can say that the funny headline is output loading up text and by the way you don't you could say HTTP Response Code 200 if you want but the truth is that happens automatically I'll keep it in anyway doesn't matter right but there you go and hopefully that's going to now give us a headline from open AI so save let's go back to the home page and let's try this from here so I'll just say Mona Lisa destroyed and fire I'll hit submit so it's querying open Ai and there you go Mona Lisa destroyed an evil clown fire the Mona Lisa was destroyed in a file last night and investigators are pointing the finger at a gang of evil clowns okay pretty cool pretty cool all right so now we're gonna move on to the last part of this tutorial I think it's the most fun part and that is where we get open AI to generate a picture that represents our story now the way that this is going to work is we're going to add a headline such as Mona Lisa destroyed in fire for example and we're gonna send the original headline to open AI but we're gonna have to do this in a sort of two-step process because what we really want is a picture of the Mona Lisa with a clown right and before we can do that we're going to have to extract the main subject it's actually technically called the direct object of the sentence so I'm speaking to you a little bit like a linguist here right and so what we're going to do is we're going to query open EI and we're going to say what is the direct object of this sentence so for example if we have a sentence um exotic Bud found dead on the beach the direct object is the Exotic Bond it's the thing the animal the person or the group of people that are most affected by the sentence right so we are going to ask open AI that question open AI is hopefully going to say it's the Mona Lisa then we're going to send a second request to open AI that says draw a picture of a clown laughing at the Mona Lisa or something like that and then we're going to get it to generate a picture right so that's how it works now when we do the Foster stage open AI is gonna give us a response something like this okay now we're still using this prompt business here you can see I had a little shot of it a minute ago actually we're still basically using this it's the same type of thing as before and these are the kinds of responses that we can expect to get back so sometimes you can see it adds double quotations sometimes it gives you a long sentence sometimes it gives you a short sentence okay so what we're going to do is after we've done our query we'll do a little bit of string manipulation and hopefully we can extract the direct object and get rid of all of this junk here okay now again to speed things up a little bit I have made a little PHP function for you this one is called Fetch Target subject it's over on that GitHub page and the link is in the description so if I just show you the raw code here it's just a PHP function perhaps I have changed it actually at least slightly but let's copy that function and we're going to paste it in underneath make funny headline and you're going to find that these two things are very very similar so fetch Target subject takes in our headlines just like before and you can see the main difference here is our prompt this time it says what is the direct object in the following English sentence and then we pass in our headline okay so that's going to give us one of these types of responses and then down here we're obviously passing in our API key and all of that but down here I'm doing a little bit of string manipulation which I have no confidence in at all so I'm probably going to tweak this later on but nevertheless a little bit string manipulation and hopefully when all is said and done it's gonna return an output object that's useful so let's test this before we go any further I'm just gonna write in a headline so we'll see Headliners Mona Lisa destroyed in fire okay I'll just hard code this in then I'm going gonna go right downstairs I'm gonna say Json output Commander save it now we know that this is called Fetch Target subject so let's copy that and we're going to go to our website here and then go to stories forward slash fetch Target subject and hopefully you can see here it's responding with Mona Lisa and it's giving us a status of 200. hopefully you know anyway that's that right so that's going to fetch the target subject now let's just stay with open eye and we'll go straight on to the next function so the next function and the final one by the way there's a storm here did you hear the door slamming there is a storm apologies for that anyway the next function the final one is generate image let me show you that one again pure PHP no third party libraries no command line nothing like that just a function let's just copy this one and let's just go straight on and paste this one in here let's get all of this open AI stuff out of the way right so this one janity image this takes in a Target subject now the model here is different this is calling a model called the image Alpha blah blah blah model I say blah blah blah because maybe that number has changed I don't know but the prompt this time is where we add in a description of what we want and this time I'm saying let's have a clone laughing in front of and we're going to pass in the Mona Lisa now sometimes the sentence might not be perfect it makes a clone laughing in front of dog or instead of a lost dog or something but it should be enough for open EI to generate something that's meaningful you can see we're asking for one picture here's the picture size and there's a couple of other things you can see that it says response format URL so it's going to return a path to a picture right and that's pretty much it the rest well passing another API key no surprises it's doing its thing and again we're returning one of those output things so let's give this one a little try now these picture URLs can be absolutely huge so I'm not going to Jace an object with this one I'm just going to Echo output calling upon text and then a die statement right so let's test this out and again let's just hard code in for the moment a Target subject now the kind of thing that we're getting back is something like Mona Lisa so let's just do that Mona Lisa so we can simulate how this might work so there we go and we're going to save and so now let's test this one out if this works it'll be a really huge step forward so here we go it's doing its thing and hopefully oh there we go I told you that the URLs can be a bit big okay but copy this URL here and open up a new tab and you should find it's actually a pretty cool picture so you can see a picture frame the picture has gone it's been destroyed and we've actually got a looks like maybe two clones laughing and that's absolutely fine now by the way I've run this a few times and sometimes it just shows you a kind of generic oil painting so it's just to let you know that I think open AI does sometimes have challenges if you put in things like a politician's name or a company name or even something like the Mona Lisa you know it seems to be respecting things like copyrights and whatnot so uh in any event there you go that's the picture I've got I wonder what one you got and I tell you what I'm feeling quite good so let's now wrap this thing up and know that we know that these two things are working let's bring the whole thing to life now I'll start off by preparing this I'll get rid of this target subject so I know we're really taking in a Target subject and I'll get rid of this output text that's excellent let's go to the other one now we'll take out this here and we'll go upstairs and once again we'll take out the headline excellent so we are ready to rock no we said earlier on let's send the original headline to open AI later well we've done that so we can get rid of the later thing now I'm just going to save this and now let's have a quick look at our home page here so we've got quite a nice home page here it does a good job of displaying the headline but now we are going to go a little bit further so what we're going to do is head to where it says draw funny headline okay and you can see that we've got a point here where we clear the form text field that happens right here okay so what I'm going to do is I'm going to just jump in here and I'm going to say generate image and before just before we clear this value I'm going to run generate image and I'm going to pass in the value that is on the form field so that's our original headline here okay now once again folks I know that you could do this asynchronously but I don't want to make this any more complicated than it already is so a little function here it's going to be called generate image and it's gonna take in our original headline element but by the way wouldn't it be cool if as well as doing the image we could update the database and add in the image path that means we could reference all of our stuff later on right so let's not just pass in the original headline how about if we pass in update ID as well and we can do that by saying comma and we're gonna say do you see here we've got this text object here where we can say text object dot ID and so now we have a headline and an update ID being passed into this JavaScript thing called generate image now before we go talking to API endpoints I'd like to do a little bit of work on the page I'm going to dynamically create an element so I'll just say create an info div so I'll say const info Dev is document dot create element div I'm gonna say info Dev set attribute ID is info hyphen div so we're making a div here with JavaScript right and I'm gonna say info Dev dot set attribute class I'm going to give it two classes I'm going to have a class of tech center a little space and another class called blink these are both classes that come with Tron gate you can do this you can stack classes it's absolutely fine next I'm going to say info Dev and I'm going to say HTML equals little asterisk and I'll say loading picture hyphen please wait and another little asterisk then if we scroll back up you may remember that we created a div with an ID of story so let's reference this at the top of the code I'm going to say const ant story element or story L is document get element by ID story and what we're going to do is we're going to add our info div inside the story element so I'm going to say story element but I don't want it to go after the headline I want it to go before the funny headline so I'm going to say insert before we're going to insert the new Dev and it's going to be inserted before the funny headline element there you go now let's just save that and in fact let's go to the style section here whilst we can and uh we'll just say hash symbol info Dev and I'll just say minimum height is uh actually how about just margin 3M that'll do us okay now save that let's go back here and refresh and I'm going to just say police give up hope of finding lost dog so we'll click submit now it's going to fetch the headline but as you can see now I've got this div here that says loading picture please wait and it's really given us a crazy story here you know but there you go right so we're getting a nice little presentation on the screen here so now we are going to create a custom API endpoint previously I had you do stuff with the API Explorer do you remember all of that stuff well that was pretty much manipulating endpoints that come with the framework but you can actually create your own entirely custom endpoints and it's quite easy I'll show you how if you go to api.json I'll copy Let's Get By Post maybe paste up here and I'm going to just call this one generate image something like that okay am I calling it generally image or generate picture generate image all right so this is gonna B and the URL segments of the way we do this is we see stories forward slash and net gen image that'll do us and next gem gen image and we'll just see in the description generally an image using open AI now we can accept some parameters I'll simplify the authorization just for the purposes of this tutorial and if we save and refresh you can see that we've now got this thing ready to rock now you don't need to do that by the way you could set up a custom endpoint without this but sometimes it's nice to do this because it's kind of good for testing stuff so if we now open up stories and right underneath fetch funny headline we're going to have a function here called init gen image I'm going to just Echo hello there with a die statement and if we test this then I'll Zoom you in you can see that it says hello there did you hear the door slamming there's actually a storm outside believe it or not how's that for drama so in any event here is Annette Jen image now what's this thing going to actually do well first of all it's going to get some posted data the way that we're going to do that is we're going to say params equals and it's fail get contents and we pass in PHP colon slash slash input now that's going to be our Json string so to get the posted params we're gonna say posted params is Json decode params then we're going to get an update ID I'll say that the update ID is posted params loading up update ID something like that I'm confusing everybody here by juggling between camel case and snake case but in any event we'll do that now if we don't have an update ID we could do question marks and then zero this is the null coalescing operator it means if you don't find an update ID just assume that the update ID is zero next we're going to do the same thing with the headline I'll say that the headline equals posted params calling upon the headline and if we don't find a headline we'll just assume it to be an empty string okay so we now have the posted data shall we go over to the home page and we'll send the posted data okay so let's uh send the headline and up the ID to our custom API so the first thing we'll do is we'll see const Target URL equals I'm going to use PHP and say base URL makes me feel good and then if you look here you can see the URL segments so it's stories init gen image that's our Target URL okay then build an object uh containing all the things we want to post okay so we're gonna say const params equals now this time it's going to be update ID a little comma and headline as simple as that okay then we're going to do the actual post requests so create the HTTP post request now to save time I'll just copy the one that we had previously here it is here I'm just going to copy this head in here and go like this okay we'll backtrack here so that's going to do all of that now if the status is not 200 we'll handle the error that's fine and if everything is okay well we know that we're going to draw a picture but first of all I think that I would like to uh actually do you know what I think I'd like to test it so let me head over here on a net gen image and I'm going to just say you posted and let's Chuck in the update ID and I'll see headline of and we'll Chuck in the headline it does no harm to test this out okay so let's head here and we're going to test this by adding in an update ID I'll just say something like 88 then I'll say headline equals Here We Go Again little curly bracket here and I'm going to hit submit and it says you posted 88 and a headline of here we go again so that's excellent right we now know that this is working which is pretty cool again over on our home page we're going to do exactly the same thing we're posting the stuff here right now if we have an error we handle the error but let's just focus on this init Jane image here the first thing that we're going to do is we're gonna say well first of all I suppose you could see if the headline is equivalent to empty well we could do an HTTP response go to 400 or something and say something like no headline uh something like that you know I'm gonna ignore the error checking from here onwards if that's okay though because I want to move forward right so let's just say that the first thing we're gonna do is figure out what the main uh Target subject is from the headline now remember if we scroll down here we've got fetch Target subject so I'm gonna say output equals this it's going to be fetch Target subject with our submitted headline no don't forget that this is going to be an output object so just like we said before we're going to see if the status is not 200 then we're just going to Output whatever the error message is and that will be the end of the road okay however if everything is okay well no we know that the target subject is going to be output calling upon text now don't forget folks these objects here that we're getting the returning text and they are returning a status thing right so hopefully we have a Target subject now we're gonna generate an image using open AI so how do we do that or scroll down and once again we've got January image here this is going to accept our Target subject this time so I'll call this one output let's call it output underscore IMG just for clarity right so that's going to be this generally image and of course we're passing in the Target subject now once again let's make sure maybe we are going to do a little bit better checking right if the output status is not or pardon me if the output image underscore IMG status is not 200. then it's going to be an error and there you go but assuming that everything is okay well that means that our picture path I'll just write this actually the picture path is output image loading up text so we can do an HTTP 200 Response Code and we can Echo out the picture path but we can do even more than that because remember folks we passed in an update ID so we can also say let's update the picture column on the database so the way that we do this is we simply say data picture equals now let's save a line of code here we'll go like that and then I'm going to see this model I'm calling upon the model which is part of trying you I'm going to say update now we do have an update ID here okay so we do have an update ID and then I'm going to pass in the data and the name of the table is stories that's that now if you want to be super secure we can also say update ID equals an integer of update ID we probably don't need to do this but that's going to convert the update ID into an integer and sometimes when you're doing SQL this is a very healthy thing to do it eliminates any possibility of SQL injection okay so that says now updating the picture column on the database so now we have our PEC path I mean let me just see that starter picture yeah that's cool and then we output the pickpath asset that's basically it okay so well done as now back to the home page here if everything is okay we're gonna say draw picture no hold on a minute so this is a net fetch image I suppose I should call it image so draw image now this is going to accept HTTP response text so we'll have a little JavaScript function here it's going to be called Draw image it's taking in a pick path and here's what we're going to do let's say const info Dev is document dot get element by ID info hyphen Dev now I'm going to say infodiv.nrhtml is empty and then I'm going to say info Dev let's see classlist dot remove blink because we don't want it blinking anymore right so we're clearing out the info div in fact maybe I should just say that clear the info Dev then we're gonna create an image on the page so to do that I'll say const um new pick I'll call it is document dot create element IMG I'm going to say new pick set attribute Source now the source is going to be equal to the pick path and then do you remember how we had our partner forget me my headaches exploded there we add it to the info Dev yeah okay so here we go so it's info Dev dot append child and it's going to be the new pet and there you go okay so that's that now there's just one little tweak that I'm going to do before we wrap this up at the point when we fetch a funny headline we're gonna clear or actually we're gonna remove the info Dev it exists so I'm going to just say const info Dev is document get element by ID info Dev and if there is an info Dev then I'm just gonna say infodiv dot remove that will get rid of the div and the picture Okay so that's about us I'm gonna now give this thing a quick shot so let's try this uh rare Bud found on the beach we'll say submit so there's our headline the clowns are responsible here comes the picture hopefully and it's loading it up and you can see that we've got a beach it has a clone and there is a bod shall we do a couple more all right let's try um Mona Lisa destroyed in fire and again now hold on a second oh well well well something not quite right there it says info is not defined now what is this talking about fetch funny head Lane oh of course it's infodev dot remove okay refresh that's fine that's fine all right let's try another let's try the bank has been robbed we'll hit submit so there you go we're blaming the clowns here comes the picture here it comes and there is the pictures not a bad one actually and let's do another one let's do um uh how about a dangerous tiger escapes from zoo let's hit submit so there you go loading the picture and here it comes and there you go crazy pretty cool the only thing is this could do with being cleared as well so let's just uh clear the contents of the funny headline so to do that we're just going to say funny headline element HTML is empty can I just do a couple more all right police give up hope of finding lost dog so here we go so clones to blame for dog going missing here comes the picture and that's really really excellent I'm gonna do just one more and this was our real headline believe it or not here in the UK so the headline was um let's see it was a exotic bod turned out to be seagull covered and curry sauce I'm gonna hit submit so it's doing that and there we go we're blaming the clowns and here comes hopefully a picture and there you have it so I hope you've enjoyed this one I will Chuck my entire app here on GitHub for you I know that this has been a long one but I've had a lot of fun with this and if you enjoy this type of content I'm not too proud to beg you know not Too Proud to Beg please do consider giving this a star but most importantly please if you like using Tron gate please do give us a start on GitHub it's all we ask for and it would really mean the world to us okay thanks very much well done I'll see you later

Channel: David Connelly

Views: 10,334

Keywords:

Id: oE_rZHbMg1M

Length: 110min 15sec (6615 seconds)

Published: Thu Jan 05 2023