title
10.6: API Query with User Input - p5.js Tutorial

description
This video demonstrates how to query an API with input from the user. In other words, the user types in a city to a text input field and the JavaScript program asks the API for the weather in the city and shows it back to the user. All examples: https://github.com/shiffman/Video-Lesson-Materials Contact: https://twitter.com/shiffman Next video: https://youtu.be/UNtqhnhD-wo JavaScript basics: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA HTML/CSS basics: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6bI1SlcCRfLH79HZrFAtBvX Full Data playlist: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6a-SQiI4RtIwuOrLJGnel0r Help us caption & translate this video! http://amara.org/v/QbuA/ 📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct

detail
{'title': '10.6: API Query with User Input - p5.js Tutorial', 'heatmap': [{'end': 791.898, 'start': 779.95, 'weight': 0.793}, {'end': 951.623, 'start': 878.044, 'weight': 0.803}], 'summary': "Tutorial demonstrates user input to api query, data retrieval, and visualization, showcasing real-time weather api querying for london's temperature and humidity, dynamic api url construction, and future api exploration plans.", 'chapters': [{'end': 66.602, 'segs': [{'end': 66.602, 'src': 'embed', 'start': 1.417, 'weight': 0, 'content': [{'end': 2.298, 'text': 'In this video.', 'start': 1.417, 'duration': 0.881}, {'end': 10.386, 'text': '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.', 'start': 2.298, 'duration': 8.088}, {'end': 14.411, 'text': 'get some data, have that data, come back into your program and visualize something on the screen.', 'start': 10.386, 'duration': 4.025}, {'end': 19.836, 'text': "So this is an example that I built in the previous video, which I'll link to below.", 'start': 14.791, 'duration': 5.045}, {'end': 24.958, 'text': "And what this example is doing is it's querying an API called OpenWeatherMap.", 'start': 20.817, 'duration': 4.141}, {'end': 26.639, 'text': "It's sending a city.", 'start': 25.418, 'duration': 1.221}, {'end': 29.999, 'text': "The city that it's sending, you can see right there, is London.", 'start': 27.019, 'duration': 2.98}, {'end': 32.64, 'text': 'And then it gets back some data about London.', 'start': 30.42, 'duration': 2.22}, {'end': 33.94, 'text': "What's the current temperature??", 'start': 32.68, 'duration': 1.26}, {'end': 35.401, 'text': "What's the current humidity?", 'start': 34.22, 'duration': 1.181}, {'end': 40.302, 'text': "And in this example, I'm pulling that data out into two variables and drawing two circles on the screen.", 'start': 35.781, 'duration': 4.521}, {'end': 49.926, 'text': 'So first, I got to admit something, which is that this is perhaps the least visually interesting data visualization that anybody ever has ever done.', 'start': 40.362, 'duration': 9.564}, {'end': 57.333, 'text': "I don't have a visual bone, but I'm demonstrating the technique.", 'start': 50.647, 'duration': 6.686}, {'end': 65.48, 'text': 'So what you would do, hopefully, with this technique is thinking of a new way of presenting information by weather or doing some type of animation.', 'start': 57.793, 'duration': 7.687}, {'end': 66.602, 'text': "There's lots of possibilities.", 'start': 65.501, 'duration': 1.101}], 'summary': 'Demonstrating how to take user input, query an api, and visualize data on screen using openweathermap api with an example of querying data for london and visualizing temperature and humidity.', 'duration': 65.185, 'max_score': 1.417, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UoUqnjUC2c/pics/4UoUqnjUC2c1417.jpg'}], 'start': 1.417, 'title': 'User input to api data visualization', 'summary': "Demonstrates taking user input, passing it to an api query, retrieving and visualizing data, using openweathermap to display london's current temperature and humidity, and drawing circles on the screen.", 'chapters': [{'end': 66.602, 'start': 1.417, 'title': 'User input to api data visualization', 'summary': "Demonstrates how to take user input, pass it to an api query, retrieve and visualize the data, using the example of querying openweathermap for london's current temperature and humidity, and drawing circles on the screen.", 'duration': 65.185, 'highlights': ['The chapter demonstrates how to take user input, pass it to an API query, retrieve and visualize the data.', "The example showcases querying OpenWeatherMap for London's current temperature and humidity and visualizing it on the screen.", 'The technique opens up possibilities for presenting weather information in new ways or creating animations.']}], 'duration': 65.185, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UoUqnjUC2c/pics/4UoUqnjUC2c1417.jpg', 'highlights': ["The example showcases querying OpenWeatherMap for London's current temperature and humidity and visualizing it on the screen.", 'The chapter demonstrates how to take user input, pass it to an API query, retrieve and visualize the data.', 'The technique opens up possibilities for presenting weather information in new ways or creating animations.']}, {'end': 300.496, 'segs': [{'end': 109.122, 'src': 'embed', 'start': 67.458, 'weight': 0, 'content': [{'end': 75.784, 'text': "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.", 'start': 67.458, 'duration': 8.326}, {'end': 80.027, 'text': "And then it's going to get that weather from London, and it's never going to query the API again.", 'start': 76.324, 'duration': 3.703}, {'end': 90.973, 'text': 'So how do we make something that when the user enters a city, that we get that, then we query the API, show the information.', 'start': 80.507, 'duration': 10.466}, {'end': 92.714, 'text': 'The user could then enter another city.', 'start': 91.033, 'duration': 1.681}, {'end': 94.975, 'text': 'We get that information, query the API again.', 'start': 92.754, 'duration': 2.221}, {'end': 98.797, 'text': 'So how could we have query the API over time while the program is running??', 'start': 95.175, 'duration': 3.622}, {'end': 100.398, 'text': 'How do we think of that as a sequence of events?', 'start': 98.837, 'duration': 1.561}, {'end': 101.978, 'text': 'And how do we tie that to drawing?', 'start': 100.618, 'duration': 1.36}, {'end': 104.56, 'text': 'We being me right now and then you?', 'start': 102.098, 'duration': 2.462}, {'end': 106.741, 'text': 'I got this thing about pronouns.', 'start': 104.58, 'duration': 2.161}, {'end': 109.122, 'text': "It's really like a problem in my head all the time.", 'start': 106.921, 'duration': 2.201}], 'summary': 'Demonstrates querying api for weather and handling user input for different cities.', 'duration': 41.664, 'max_score': 67.458, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UoUqnjUC2c/pics/4UoUqnjUC2c67458.jpg'}, {'end': 188.909, 'src': 'embed', 'start': 159.599, 'weight': 3, 'content': [{'end': 168.104, 'text': "I'm going to add an input field And I'm going to give it an ID.", 'start': 159.599, 'duration': 8.505}, {'end': 174.388, 'text': "we'll call it city and I'll put London in there and I'll say city, colon.", 'start': 168.104, 'duration': 6.284}, {'end': 182.614, 'text': "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.", 'start': 174.388, 'duration': 8.226}, {'end': 185.445, 'text': 'and And if we run this, you can see there it is.', 'start': 182.614, 'duration': 2.831}, {'end': 188.189, 'text': 'Oops And by the way, so I did that incorrectly.', 'start': 185.465, 'duration': 2.724}, {'end': 188.909, 'text': 'Look at this.', 'start': 188.469, 'duration': 0.44}], 'summary': "Added an input field with id 'city' and value 'london', displaying user input on the page.", 'duration': 29.31, 'max_score': 159.599, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UoUqnjUC2c/pics/4UoUqnjUC2c159599.jpg'}, {'end': 262.939, 'src': 'embed', 'start': 235.053, 'weight': 1, 'content': [{'end': 240.895, 'text': 'so I now have this text input box at the top with the word London in it.', 'start': 235.053, 'duration': 5.842}, {'end': 242.175, 'text': "Okay, we're getting somewhere now.", 'start': 240.895, 'duration': 1.28}, {'end': 254.113, 'text': "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 And I'll say submit.", 'start': 242.235, 'duration': 11.878}, {'end': 258.216, 'text': "So now I've also added an HTML element button.", 'start': 254.353, 'duration': 3.863}, {'end': 262.939, 'text': 'So I have a text input element pre-populated with London, and I have a button.', 'start': 258.435, 'duration': 4.504}], 'summary': "Creating a text input box with the word 'london' and a submit button in html.", 'duration': 27.886, 'max_score': 235.053, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UoUqnjUC2c/pics/4UoUqnjUC2c235053.jpg'}], 'start': 67.458, 'title': 'Querying real-time weather api', 'summary': "Covers querying real-time weather api based on user input and adding city input for weather api, pre-populating the input field with 'london' and demonstrating the feature in the p5.js editor.", 'chapters': [{'end': 123.008, 'start': 67.458, 'title': 'Real-time weather api query', 'summary': 'Explores the concept of querying an api for real-time weather information based on user input, aiming to create a program that dynamically queries the api based on user input to display the weather information for different cities.', 'duration': 55.55, 'highlights': ['The program always queries the API on startup to get weather information for London and never queries it again, indicating the need to modify the program to query the API based on user input for different cities.', 'The need to create a sequence of events that allows querying the API over time while the program is running is emphasized, highlighting the challenge of dynamically updating weather information based on user input.', 'The speaker expresses a need to tie the concept of querying the API over time to drawing, indicating a potential integration with visual elements to dynamically display weather information based on user input.', 'The speaker mentions the need for user input and describes the current state of the program as a web page with a canvas, suggesting the potential for user interaction and input functionality within the web-based program.']}, {'end': 300.496, 'start': 123.268, 'title': 'Adding city input for weather api', 'summary': "Discusses adding an input field for a city and a submit button to request weather data from an api, pre-populating the input field with 'london' and demonstrating the feature in the p5.js editor.", 'duration': 177.228, 'highlights': ["A text input field with 'London' pre-populated and a submit button are added to the HTML page for the user to input and request weather data for a city from an API. pre-populated with 'London'", 'The process of adding an input field and a button to the HTML page is demonstrated in the p5.js editor, showcasing the functionality of pre-populating the input field and using the submit button to request weather data. demonstrated in the p5.js editor', 'The instructor discusses the excitement and anticipation for using the input field and submit button to dynamically change the canvas drawing based on the weather data for a specified city. discusses the excitement and anticipation']}], 'duration': 233.038, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UoUqnjUC2c/pics/4UoUqnjUC2c67458.jpg', 'highlights': ['The program always queries the API on startup to get weather information for London and never queries it again, indicating the need to modify the program to query the API based on user input for different cities.', "A text input field with 'London' pre-populated and a submit button are added to the HTML page for the user to input and request weather data for a city from an API. pre-populated with 'London'", 'The need to create a sequence of events that allows querying the API over time while the program is running is emphasized, highlighting the challenge of dynamically updating weather information based on user input.', 'The process of adding an input field and a button to the HTML page is demonstrated in the p5.js editor, showcasing the functionality of pre-populating the input field and using the submit button to request weather data. demonstrated in the p5.js editor', 'The speaker expresses a need to tie the concept of querying the API over time to drawing, indicating a potential integration with visual elements to dynamically display weather information based on user input.']}, {'end': 574.862, 'segs': [{'end': 347.419, 'src': 'embed', 'start': 324.056, 'weight': 2, 'content': [{'end': 331.023, 'text': "Right? So what do we need to do? And to figure this out, I'm going to come over here to my trusty friend, the whiteboard.", 'start': 324.056, 'duration': 6.967}, {'end': 332.605, 'text': 'Hi, trusty friend, the whiteboard.', 'start': 331.043, 'duration': 1.562}, {'end': 336.389, 'text': "And let's think about this URL.", 'start': 334.007, 'duration': 2.382}, {'end': 338.351, 'text': 'So most APIs.', 'start': 336.689, 'duration': 1.662}, {'end': 343.516, 'text': "If you're making an API query, it's very similar to typing a URL into the browser.", 'start': 339.332, 'duration': 4.184}, {'end': 347.419, 'text': "In fact, if I pasted that URL into the browser, we're going to see the data associated with it.", 'start': 343.536, 'duration': 3.883}], 'summary': 'Api queries resemble typing a url into a browser, leading to data display.', 'duration': 23.363, 'max_score': 324.056, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UoUqnjUC2c/pics/4UoUqnjUC2c324056.jpg'}, {'end': 417.369, 'src': 'embed', 'start': 388.601, 'weight': 1, 'content': [{'end': 391.984, 'text': "I make the same stupid joke in all my videos about how I'm talking to a camera by myself.", 'start': 388.601, 'duration': 3.383}, {'end': 392.564, 'text': 'But it is true.', 'start': 392.024, 'duration': 0.54}, {'end': 396.145, 'text': "OK, so that's what I'm doing.", 'start': 394.045, 'duration': 2.1}, {'end': 400.106, 'text': 'OK, so now you can see the way that you could get a different city.', 'start': 396.245, 'duration': 3.861}, {'end': 404.587, 'text': "Now over here I could type Tokyo, and I'm going to get the weather for Tokyo.", 'start': 400.926, 'duration': 3.661}, {'end': 410.108, 'text': 'The way that I get the data from a different city is to change the URL.', 'start': 404.627, 'duration': 5.481}, {'end': 413.389, 'text': "So somehow I'm able to do that manually in the browser.", 'start': 410.408, 'duration': 2.981}, {'end': 417.369, 'text': 'Somehow I need to figure out a way of doing that in code.', 'start': 413.769, 'duration': 3.6}], 'summary': 'Video creator discusses manually accessing weather data for different cities and aims to automate this process using code.', 'duration': 28.768, 'max_score': 388.601, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UoUqnjUC2c/pics/4UoUqnjUC2c388601.jpg'}, {'end': 495.25, 'src': 'embed', 'start': 465.934, 'weight': 0, 'content': [{'end': 476.001, 'text': '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.', 'start': 465.934, 'duration': 10.067}, {'end': 478.602, 'text': "that's that's happening with input from the user.", 'start': 476.001, 'duration': 2.601}, {'end': 490.47, 'text': '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,', 'start': 478.602, 'duration': 11.868}, {'end': 495.25, 'text': 'org slash weather Question mark.', 'start': 490.47, 'duration': 4.78}], 'summary': 'To create a dynamic url, piece together its components based on user input.', 'duration': 29.316, 'max_score': 465.934, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UoUqnjUC2c/pics/4UoUqnjUC2c465934.jpg'}], 'start': 300.576, 'title': 'Api url structure and weather data retrieval', 'summary': 'Covers the structure of an api url, demonstrating its components and the process of manually changing the url to retrieve weather data for different cities. it also emphasizes the need to automate this process using code and dynamically piecing together the url.', 'chapters': [{'end': 368.146, 'start': 300.576, 'title': 'Understanding api url structure', 'summary': 'Explains the structure of an api url and demonstrates how to use it to retrieve data, mentioning the components such as the path, query parameters, and data units.', 'duration': 67.57, 'highlights': ['The URL structure of an API, including the path, query parameters, and data units, is explained, with a demonstration of using the URL to retrieve data from the browser.', 'The use of a specific example URL to access weather information for London with the metric units is demonstrated using a browser, showcasing the practical application of the API URL structure.', 'The demonstration of pasting the API URL into a browser to retrieve data associated with it emphasizes the similarity between making an API query and typing a URL into a browser.']}, {'end': 574.862, 'start': 368.187, 'title': 'Weather api url building', 'summary': 'Discusses the process of manually changing the url to get weather data for different cities, highlights the need to automate this process using code, and outlines the approach of piecing together the url from its components dynamically.', 'duration': 206.675, 'highlights': ['The process of manually changing the URL to obtain weather data for different cities is demonstrated, such as changing the URL to New York and Tokyo, showcasing the temperature and weather conditions. (e.g., temperature in New York is about 18 degrees Celsius)', 'The need to automate the process of obtaining weather data for different cities using code is emphasized, indicating the goal of dynamically piecing together the URL from its components, including a dynamic city variable and API key.', "The approach of dynamically constructing the URL for the weather API using variables such as 'API' and 'city' is detailed, illustrating the formation of the complete URL by concatenating these components, thus enabling the user to input different cities for weather data retrieval."]}], 'duration': 274.286, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UoUqnjUC2c/pics/4UoUqnjUC2c300576.jpg', 'highlights': ["The approach of dynamically constructing the URL for the weather API using variables such as 'API' and 'city' is detailed, illustrating the formation of the complete URL by concatenating these components, thus enabling the user to input different cities for weather data retrieval.", 'The process of manually changing the URL to obtain weather data for different cities is demonstrated, such as changing the URL to New York and Tokyo, showcasing the temperature and weather conditions. (e.g., temperature in New York is about 18 degrees Celsius)', 'The URL structure of an API, including the path, query parameters, and data units, is explained, with a demonstration of using the URL to retrieve data from the browser.']}, {'end': 1110.401, 'segs': [{'end': 606.697, 'src': 'embed', 'start': 575.102, 'weight': 0, 'content': [{'end': 576.343, 'text': 'This is not going well.', 'start': 575.102, 'duration': 1.241}, {'end': 578.044, 'text': 'It feels forced today.', 'start': 576.723, 'duration': 1.321}, {'end': 590.79, 'text': 'So this is the way that you can put together the pieces of an API call as a URL by having them in components.', 'start': 578.984, 'duration': 11.806}, {'end': 593.852, 'text': "The whole reason I'm talking about this is because now this one can be dynamic.", 'start': 590.83, 'duration': 3.022}, {'end': 598.033, 'text': "So if city is not a hard coded value, it's coming from the user.", 'start': 594.392, 'duration': 3.641}, {'end': 600.755, 'text': 'And every time we want to query the API, this always stays the same.', 'start': 598.073, 'duration': 2.682}, {'end': 601.995, 'text': 'This always stays the same.', 'start': 601.015, 'duration': 0.98}, {'end': 603.516, 'text': 'This is the thing that changes.', 'start': 602.335, 'duration': 1.181}, {'end': 606.697, 'text': "So let's go see if we can add that to the code and make this work.", 'start': 603.896, 'duration': 2.801}], 'summary': 'Dynamic api calls allow user input for city, while the rest remains constant.', 'duration': 31.595, 'max_score': 575.102, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UoUqnjUC2c/pics/4UoUqnjUC2c575102.jpg'}, {'end': 663.402, 'src': 'embed', 'start': 624.145, 'weight': 2, 'content': [{'end': 626.306, 'text': "So I'm just going to call this the API.", 'start': 624.145, 'duration': 2.161}, {'end': 629.849, 'text': "And maybe I'll call it API path, so sort of like the path or the API.", 'start': 626.346, 'duration': 3.503}, {'end': 630.83, 'text': "Let's just call it API.", 'start': 629.889, 'duration': 0.941}, {'end': 633.332, 'text': "Then I'm going to make a variable called city.", 'start': 631.591, 'duration': 1.741}, {'end': 635.514, 'text': "And I'm going to make that London.", 'start': 634.033, 'duration': 1.481}, {'end': 640.314, 'text': "Then I'm going to make a variable called API key.", 'start': 637.173, 'duration': 3.141}, {'end': 643.196, 'text': "And it's going to be this whole thing.", 'start': 641.415, 'duration': 1.781}, {'end': 648.418, 'text': "And then I'm going to make a variable called units and add this.", 'start': 646.317, 'duration': 2.101}, {'end': 663.402, 'text': "So you can see now, and I think if I make this a little bit wider, unfortunately, it's sort of hard to fit everything.", 'start': 657, 'duration': 6.402}], 'summary': 'Creating api variables for city, api key, and units.', 'duration': 39.257, 'max_score': 624.145, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UoUqnjUC2c/pics/4UoUqnjUC2c624145.jpg'}, {'end': 806.322, 'src': 'heatmap', 'start': 779.95, 'weight': 0.793, 'content': [{'end': 786.675, 'text': 'submit. so if you remember, in the HTML page the button has an ID submit.', 'start': 779.95, 'duration': 6.725}, {'end': 791.898, 'text': 'so the ID is a way that I can select that element in my code and do things to it.', 'start': 786.675, 'duration': 5.223}, {'end': 806.322, 'text': "so now in my code, as long as I select by the buttons ID submit, I can now say button dot, mouse pressed, Ask for, but I don't like ask.", 'start': 791.898, 'duration': 14.424}], 'summary': "Using the id 'submit' to select and interact with the button element in the html page.", 'duration': 26.372, 'max_score': 779.95, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UoUqnjUC2c/pics/4UoUqnjUC2c779950.jpg'}, {'end': 869.154, 'src': 'embed', 'start': 834.081, 'weight': 1, 'content': [{'end': 835.661, 'text': "So if I move this over, that'll help you.", 'start': 834.081, 'duration': 1.58}, {'end': 838.603, 'text': "So now, right, I've selected the button.", 'start': 835.882, 'duration': 2.721}, {'end': 841.364, 'text': 'When I press the button, call weather ask.', 'start': 839.143, 'duration': 2.221}, {'end': 847.627, 'text': "When I call weather ask, ask for the weather based on this URL that I've made of all these components from the API call.", 'start': 841.604, 'duration': 6.023}, {'end': 848.888, 'text': 'Now run this.', 'start': 848.147, 'duration': 0.741}, {'end': 851.889, 'text': 'And every time I hit submit, I get that weather.', 'start': 849.628, 'duration': 2.261}, {'end': 854.87, 'text': "Now notice, every time I hit submit, it's the same thing.", 'start': 851.969, 'duration': 2.901}, {'end': 858.291, 'text': 'Why? Because city is still hard coded as New York.', 'start': 854.99, 'duration': 3.301}, {'end': 861.752, 'text': 'But now we can do something really exciting.', 'start': 859.231, 'duration': 2.521}, {'end': 869.154, 'text': "That's just a variable, right? Why not get the value of what? This text input field.", 'start': 862.072, 'duration': 7.082}], 'summary': 'Demonstrating how to dynamically fetch weather based on user input', 'duration': 35.073, 'max_score': 834.081, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UoUqnjUC2c/pics/4UoUqnjUC2c834081.jpg'}, {'end': 951.623, 'src': 'heatmap', 'start': 878.044, 'weight': 0.803, 'content': [{'end': 879.045, 'text': 'OK, so here we go.', 'start': 878.044, 'duration': 1.001}, {'end': 883.068, 'text': 'So first of all, I need a variable called input.', 'start': 879.165, 'duration': 3.903}, {'end': 885.529, 'text': 'And I need to also select that input.', 'start': 883.548, 'duration': 1.981}, {'end': 886.91, 'text': 'Input equals select.', 'start': 885.83, 'duration': 1.08}, {'end': 888.952, 'text': "Now, I don't remember what ID I gave it.", 'start': 887.211, 'duration': 1.741}, {'end': 890.873, 'text': 'I gave it an ID city.', 'start': 889.472, 'duration': 1.401}, {'end': 894.696, 'text': 'So now I need to say select city.', 'start': 891.494, 'duration': 3.202}, {'end': 904.362, 'text': 'And then what am I doing here? Instead of city being hard coded as New York, I can overwrite.', 'start': 895.316, 'duration': 9.046}, {'end': 909.725, 'text': "Actually, we don't even need this variable anymore, honestly, because we don't want to hard code the city.", 'start': 904.382, 'duration': 5.343}, {'end': 910.885, 'text': 'So I can take that out.', 'start': 909.765, 'duration': 1.12}, {'end': 914.007, 'text': 'And actually, instead of, I can make it a separate variable.', 'start': 911.246, 'duration': 2.761}, {'end': 917.969, 'text': 'But all I need to do now is put input.value here.', 'start': 914.027, 'duration': 3.942}, {'end': 925.032, 'text': "Because I've gotten that text input element there, I can get the value and add that to my API call.", 'start': 918.189, 'duration': 6.843}, {'end': 927.613, 'text': "So again, the path to the API doesn't change.", 'start': 925.272, 'duration': 2.341}, {'end': 929.134, 'text': "My API key doesn't change.", 'start': 927.793, 'duration': 1.341}, {'end': 931.274, 'text': 'I always want it in metric units.', 'start': 929.394, 'duration': 1.88}, {'end': 936.837, 'text': 'Want the city, that piece of it, to be from that text input field.', 'start': 932.735, 'duration': 4.102}, {'end': 939.538, 'text': 'and here we go.', 'start': 936.837, 'duration': 2.701}, {'end': 940.879, 'text': "It's running like to see it.", 'start': 939.538, 'duration': 1.341}, {'end': 951.623, 'text': "submit, and I've got London and let's try some other cities like Tokyo, Los Angeles.", 'start': 940.879, 'duration': 10.744}], 'summary': 'Creating a dynamic input for city selection in api call.', 'duration': 73.579, 'max_score': 878.044, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UoUqnjUC2c/pics/4UoUqnjUC2c878044.jpg'}, {'end': 1086.89, 'src': 'embed', 'start': 1055.404, 'weight': 5, 'content': [{'end': 1059.73, 'text': 'how do you set to do it every 100 milliseconds or every one second or every 30 seconds,', 'start': 1055.404, 'duration': 4.326}, {'end': 1062.854, 'text': 'and just have that happen in the background while an animation is continuing?', 'start': 1059.73, 'duration': 3.124}, {'end': 1065.876, 'text': "So I'll take a look at that in the next video.", 'start': 1063.354, 'duration': 2.522}, {'end': 1068.598, 'text': 'And the other things I want to do in some of these future videos is just look at other APIs.', 'start': 1065.896, 'duration': 2.702}, {'end': 1069.999, 'text': 'New York Times is on my list.', 'start': 1068.958, 'duration': 1.041}, {'end': 1070.859, 'text': 'Wordnik is on my list.', 'start': 1070.059, 'duration': 0.8}, {'end': 1071.399, 'text': 'That sort of thing.', 'start': 1070.879, 'duration': 0.52}, {'end': 1071.96, 'text': "So let's see.", 'start': 1071.66, 'duration': 0.3}, {'end': 1073.721, 'text': 'This ended up being a very long video.', 'start': 1071.98, 'duration': 1.741}, {'end': 1074.882, 'text': 'It was so short for a while.', 'start': 1073.761, 'duration': 1.121}, {'end': 1078.864, 'text': "But I had this section in the middle where I just like, I wasn't sure if I was in the right place.", 'start': 1074.902, 'duration': 3.962}, {'end': 1080.726, 'text': 'And I started rambling about wearing a tutu.', 'start': 1078.924, 'duration': 1.802}, {'end': 1086.89, 'text': "If you're still watching this video right now, hashtag Shiffman tutu or something to let me know you were watching.", 'start': 1081.566, 'duration': 5.324}], 'summary': 'Upcoming videos to cover apis like new york times and wordnik, with a brief tangent on wearing a tutu.', 'duration': 31.486, 'max_score': 1055.404, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UoUqnjUC2c/pics/4UoUqnjUC2c1055404.jpg'}], 'start': 575.102, 'title': 'Dynamic api url building and using apis to get weather data', 'summary': 'Discusses building a dynamic api url using city, api key, and units as variables, enabling user input and consistency in the api call. it also covers breaking down the api call, creating dynamic api calls based on user input, and exploring future video plans on other apis.', 'chapters': [{'end': 676.145, 'start': 575.102, 'title': 'Dynamic api url building', 'summary': 'Discusses building a dynamic api url by using components like city, api key, and units as variables to construct the url, allowing for user input and consistency in the api call.', 'duration': 101.043, 'highlights': ['The chapter discusses the process of building a dynamic API URL using components like city, API key, and units as variables to construct the URL, enabling user input and maintaining consistency in the API call.', 'Variables like city, API key, and units are utilized to create a dynamic API URL, allowing for user input and ensuring consistency in the API call.', 'The concept of constructing a dynamic API URL by utilizing variables such as city, API key, and units to enable user input and maintain consistency in the API call is explained.']}, {'end': 1110.401, 'start': 676.425, 'title': 'Using apis to get weather data', 'summary': 'Covers breaking down the api call into its parts, creating a dynamic api call based on user input, and suggests potential exercises for further development. it also touches on querying the api periodically and explores plans for future videos on other apis.', 'duration': 433.976, 'highlights': ['Creating a dynamic API call based on user input The speaker demonstrates how to modify the API call based on user input by using the city entered in a text input field, resulting in the ability to retrieve weather data for different cities.', 'Breaking down the API call into its parts The chapter illustrates breaking down the API call into distinct components such as API, API key, and units, emphasizing their static nature and the only variable being the city.', 'Exploring plans for future videos on other APIs The speaker mentions plans for future videos to explore other APIs like New York Times and Wordnik, indicating a forthcoming expansion in the scope of API usage and learning opportunities.']}], 'duration': 535.299, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UoUqnjUC2c/pics/4UoUqnjUC2c575102.jpg', 'highlights': ['The chapter discusses the process of building a dynamic API URL using components like city, API key, and units as variables to construct the URL, enabling user input and maintaining consistency in the API call.', 'Creating a dynamic API call based on user input The speaker demonstrates how to modify the API call based on user input by using the city entered in a text input field, resulting in the ability to retrieve weather data for different cities.', 'Variables like city, API key, and units are utilized to create a dynamic API URL, allowing for user input and ensuring consistency in the API call.', 'Breaking down the API call into its parts The chapter illustrates breaking down the API call into distinct components such as API, API key, and units, emphasizing their static nature and the only variable being the city.', 'The concept of constructing a dynamic API URL by utilizing variables such as city, API key, and units to enable user input and maintain consistency in the API call is explained.', 'Exploring plans for future videos on other APIs The speaker mentions plans for future videos to explore other APIs like New York Times and Wordnik, indicating a forthcoming expansion in the scope of API usage and learning opportunities.']}], 'highlights': ["The approach of dynamically constructing the URL for the weather API using variables such as 'API' and 'city' is detailed, illustrating the formation of the complete URL by concatenating these components, thus enabling the user to input different cities for weather data retrieval.", 'The process of building a dynamic API URL using components like city, API key, and units as variables to construct the URL, enabling user input and maintaining consistency in the API call.', 'Creating a dynamic API call based on user input The speaker demonstrates how to modify the API call based on user input by using the city entered in a text input field, resulting in the ability to retrieve weather data for different cities.', "The example showcases querying OpenWeatherMap for London's current temperature and humidity and visualizing it on the screen.", 'The chapter demonstrates how to take user input, pass it to an API query, retrieve and visualize the data.', 'The technique opens up possibilities for presenting weather information in new ways or creating animations.', 'The process of manually changing the URL to obtain weather data for different cities is demonstrated, such as changing the URL to New York and Tokyo, showcasing the temperature and weather conditions. (e.g., temperature in New York is about 18 degrees Celsius)', 'The program always queries the API on startup to get weather information for London and never queries it again, indicating the need to modify the program to query the API based on user input for different cities.', "A text input field with 'London' pre-populated and a submit button are added to the HTML page for the user to input and request weather data for a city from an API. pre-populated with 'London'", 'The need to create a sequence of events that allows querying the API over time while the program is running is emphasized, highlighting the challenge of dynamically updating weather information based on user input.', 'The process of adding an input field and a button to the HTML page is demonstrated in the p5.js editor, showcasing the functionality of pre-populating the input field and using the submit button to request weather data. demonstrated in the p5.js editor', 'The speaker expresses a need to tie the concept of querying the API over time to drawing, indicating a potential integration with visual elements to dynamically display weather information based on user input.', 'Breaking down the API call into its parts The chapter illustrates breaking down the API call into distinct components such as API, API key, and units, emphasizing their static nature and the only variable being the city.', 'The concept of constructing a dynamic API URL by utilizing variables such as city, API key, and units to enable user input and maintain consistency in the API call is explained.', 'Exploring plans for future videos on other APIs The speaker mentions plans for future videos to explore other APIs like New York Times and Wordnik, indicating a forthcoming expansion in the scope of API usage and learning opportunities.']}