in this video what I want to look at is how you can take user input from a user and pass that user input to an API query get some data have that data come back into your program and visualize something on the screen so this is a example that I built in the previous video which I'll link to below and what this example is doing is it's querying an API called open weather map it's sending a city the city that it's sending you can see right there is London and then it gets back some data about London what's the current temperature what's the current humidity and in this example I'm pulling that data out into two variables and drawing two circles on the screen so first I gotta admit something which is that this is like a perhaps the least visually interesting you know data visualization I you know anybody ever has ever done so I'm making I don't have I don't have a visual bone so I'm but I'm demonstrating the technique so what you would do hopefully with my with this technique is thinking of a new way of presenting information by weather or doing some type of animation there's lots of possibilities but what I want to show you here is no matter how many times I run this it's always just going to query the API boom as soon as the program starts and then it's going to get that weather from London and it's never to query the API again so how do we make something that when the user enters a city that we get that well that then we query the API show the information the user can then enter another city we get that information query the API again so how could we have query the API over time while the program is running how do we think about as a sequence of events and how do we tie that to drawing we being me right now and then you I got this thing about pronouns it's really like a problem as in my head all the time like I only think about what pronoun I use what's that but I'll link to something in the description below about why I think about that all the time okay so let's make that happen so first of all I need somewhere to get user input so right now what this actually is is a web page just with this canvas on it so what I would like to do is add to the web page something where the user could type in some type in a city so guess what I'm going to add to there's an HTML page with this javascript code it's the it's the page that's loading this code so I'm going to go there first so in this p5.js editor I'm going to hit the Settings button and say show sidebar and there's a bunch of extra stuff in here that I'm not using because this was built and I'm going to go to this index.html file and now in the HTML body what I want to do is add paragraph and then I'm going to add an input can you see this I'm going to add an input field and I'm going to give it an ID we'll call it city and I'll put London in there and I'll say city : so now what I've added is just some HTML that on the page I want to see a field that a user could type something into and if we run this you can see there it is oops and by the way so I did that incorrectly look at this so what I wanted to do if we look back at that window this is this was going so well until I got confused like look what's here what I wanted to do is I wanted to have the word London populate that sit that that text input field automatically and I thought I don't know how to do this but it must it's sometimes it works this way I could just create this HTML input element and put London in the middle but I forgot that the text that is in the text input element is actually its value value being an attribute of this HTML element so if I want to do that I just need to say value equals London so now if I fix that and let me make this a little bit wider so you can kind of see it and I run this again you can see there we go so I now have this text input box at the top with the word London in it okay we're getting somewhere now maybe I should also add very briefly I'll put like a line break and then I'm going to add a button with an ID called submit and I'll say submit so now I've also added an HTML element of button so I have a text input element pre-populated with London and I a button so when I press that button I'm going to ask the API to give me the weather for whatever city is in that field excellent okay so let's look at this run this you can see there we go now I could do a better job like styling this and putting line breaks in and that sort of thing but the point here is that I could do this and then I could type New York and I want to see what what's in the canvass what's in the drawing change based on that current weather so how do we do that I'm excited you excited if I don't know you shouldn't be as excited to be I'm a little bit excitable it's a bit of a problem because me a lot of anxiety in life but I'm but but I'm doing well today and I'm happy to talk about this with you okay so let's look first to answer this question we have to look at something we have to look at this URL look at this URL it's a long thing I figured it out in the last video that I got I have a path to the API that's whether I have a question mark Q equals London that's the city app ID that's my API key units equal metric that's giving me the information in Celsius right so how do we what what do we need to do and to figure this out I'm going to come over here to my trusty friend the whiteboard I trust you friend the weight forwards and um let's think about this URL so most api's if you're making a P I query it's very similar to typing a URL into the browser in fact if I pasted that URL into the browser we're going to see the data associated with it I kind of I kind of wish I was doing that right now let's do that for a second I'll come back to the whiteboard right so let me go over here and I'm going to copy this whole thing I'm going to go into Chrome and I'm going to paste it in up here and I'm going to look and say look here's the data coming in and you can see that up here is the city so even if I just in the brown up here if I just change that to New York for example you can see aha now I have the weather associated with New York which the temperature about you know 18 degrees Celsius that's of all right it's actually quite a beautiful day sun's shining I don't know why inside talking to a camera all by myself is I think the same stupid joke in all my videos about I'm talking camera by myself but it is true okay so that's what I'm doing okay so now you can see the way that you could get a different city you know I could now I could over here I could type Tokyo and I'm gonna get the weather for Tokyo the way that I get the data from a different city is to change the URL so somehow I'm able to do that manually in the browser somehow I need to figure out a way of doing that in code and the reason why I was coming over here is oops what was I not know I was here was I in the right place the whole time missing London army yeah I'm sorry tell me in the chat hopefully I record I'll have to fix this video if I know I'm lower huh this is like Charlie Chaplin I could if someone playing like download this edit this and add some like music to it um I yeah I'm not like Charlie Chow wish I was like Charlie Chaplin that'd be good um okay so alright so how do we do this huh I don't know this videos I kind of want to rerecord this video but um so in my code there is a URL and it's one long string it starts with like HTTP it has like open weather map blah blah blah blah blah blah so somehow we have to figure out the way that to do this is to piece together the URL from its components one of which happens to be dynamic that's that's happening with input from the user so for example one way that I could think about doing this is I could say var API equals HTTP colon slash slash open weather map dot org slash weather question mark so like this is the beginning of the API query then I might have another variable called like city which I say these are strings which I say is London then I might have another variable where I say something like API key equals you know my crazy API key and then when I want to make the actual URL which is the actual URL that I will send to the API then all I need to do is say I want to have the API plus the city plus the API key right remember the plus symbol with text right two plus two equals four but the string two plus the string to it this is actually a valid use of air quotes by the way you usually do the air buds is just kind of an obnoxious thing in general but I feel like if you're trying to indicate a string like this is like a time in my life where I'm allowed to use air now I feel ridiculous but um this the two the two in quotes plus two in quotes is 22 right two plus two is two – not 22 but two – so what this is – – like like I think that you wear when you're doing ballet um so this I'm trying trying much too hard to be important just talking about this it's not going well feels forced today so this so this is the way that you can put together the pieces of an API call in as a as in your hell by having them in components the whole reason I'm talking about this is because now this one can be dynamic so if City is not a hard-coded value it's coming from the user and every time I want to query the API this always stays the same this always stays the same this is the thing that changes so let's go see if we can add that to the code and make this work I'm over here now okay so coming back to the program let me minimize this coming back to the program we can look now at the components of this URL so let's say what I want is all the way up to here is going to be kind of like the first part so I'm just going to call this the API and maybe I'll call like API path which were like the path or the API let's just call it API then I'm going to make a variable called City and I'm going to make that London then I'm going to make a variable called like API key and it's going to be this whole thing and then I'm going to make a variable UPS and then I'm going to make a variable called units and add this so you can see now and I think if I if think if I make this a little bit wide unfortunately like it's sort of hard to fit everything ah but now I've got it I've got it you can see now and what do I have some I have some like weird warnings here missing a semicolon somewhere and see my semi oh you know what I did is I used a double quote and a single quote that'll fix things up okay so you can see now that I broke the API call into its parts so all of these things all of these things are are not going to the API API teen units are not going to change I always want to query open weather map I always wanted in metric and I always have this API key now of course you're scenario might be different but for this particular scenario the only thing that changes is the city and so now when I want to load the data I would say VAR URL equals API plus city plus API key plus units and now we can see let's see let's just make sure this still works as before it still works as before so instead of having the full API call as one long string I now have it in pieces and we could see if I change this to do New York now I'm seeing the New York weather you're just gonna have to trust that that's kind of the right values again because this is my pathetic little I'm just drawing the temperature and the humidity as circles on the screen okay so we're getting somewhere though because now I can move this right I can I don't this this API call is happening in set up only in setup where do I want it to happen now if we look at this web page that I've made I want that API call to happen when I click the submit button so how do I make that happen I need two steps one I need access to that Dom element I need to select that Dom element then I also need to attach a mouse pressed event to that Dom element so let's add those two things to this program I'm going to say oops whoopsie a VAR button equals select submit so if you remember in the HTML page the button an ID submit so the ID is a way that I can select that element in my code and do things to it so now in my code as long as I select by the buttons ID submit I can now say button dot mousepressed asked for but I don't like asked you know whether whether asked I don't know think of a better I'm so bad at functioning do you think of a better functioning me but the event that I want is whether asked so now I can take this and I can write a function called whether asked and I can paste that in there and whoops I need to parenthesis and by the way I'm kind of standing in front of my code which is the thing that always happens so if I move this over that'll help you so now right I selected the button when I press the button call whether asked when I call whether asked ask for the weather based on this URL that I've made of all these components from the API call now run this and every time I hit and I hit submit I get that weather now notice every time I hit submit it's the same thing why because city is still hard coded as New York but now we could do something really exciting that's just a variable right why not get the value of what this text input field why not get what's in that text input field and store that in that particular variable this is going to make things really really great okay so here we go so first of all I need a I need a variable called input and I need to also select that input input equals select now I don't remember what ID I gave it I gave it an ID city so now I need to say select city and then what am I doing here I'm instead of this instead of city being hard-coded as New York I can overwrite you know X we don't even need this variable anymore honestly because we don't want a hard code the city so I can take that out and actually instead of I could make it a separate variable but all I need to do now is put input dot value here but so right because I've gotten that text input element there I can get the value and add that to my API call so again the path of the API doesn't change my API key doesn't change I always wanted in metric units but I want the city that piece of it to be from that text input field and here we go it's running like to see its submit and I've got London and let's try some other cities like Tokyo Los Angeles you can see oh it's not very humid in Los Angeles New York Toronto right okay so you get it it works oh it's great that it works so this is a this is a nice thing to practice with api's I mean this is kind of one obvious way of doing things you take some from the you take some information from the user you send that to the API you get some data back you display the data back to the user so I might suggest you know what else could you imagine here could you could you create a check box and whether the check box is checked you would when it's checked you would get Celsius when it's unchecked you would get Fahrenheit so could you that would be one thing to try to add to this as an exercise I think if you're looking for like a technical exercise to do you know mostly I would say get what true data is in there what kind of more interesting way can you display the data if it's raining can you make it rain in the canvas you know look again these are kind of like obvious literal visual representations of the data but I think you might be also be able to think more creatively and what I would like to do now I think that kind of covers the whole basis there's actually a there's a missing piece here I just realized which is that so we've done two things one we query the API the moment the program runs and then we're done now we've done second thing any time the user performs an action like pressing a button we query the API and we get data back a third thing would be have the program automatically query the API every so often and this is something you want to do if you have data that's changing a lot and there's a there's an example of an API that gives you the latitude longitude of the International Space Station where it is sort of above the earth and so that's an API that the space station is moving I think continuing believe that you get different data all the time so I will also like to do it maybe I'll do that in the next videos look at how you query an API you know over how do you set like to do it every 100 milliseconds or every one second or every 30 seconds just have that happen in the background while animation is continuing so I'll take a look at that in the next video and the other things I want to do in these future videos just look at other api's new york times is on my list word nick is on my list that sort of thing so let's see this is Nick a very long video was like so short for awhile but I had this like section in the middle where I just like I wasn't sure if I was in the right place and I started like rambling about wearing a tutu if you're still watching this video right now you know hashtag Schiffman – – or something to let me know you weren't watching because no one's going to be at 18 minutes in this video I swear okay I think that's a thing that maybe I'll do at the end of a hashtag Schiffman air quotes I think I need to put shipping in there oh there may be air just stop watching alright it go it's a butyl you hopefully you live somewhere where it's a beautiful day and even it's not a beautiful day being outside is nice okay like the mouse even my mouse went to sleep even that's how long I've been reported
