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

TL;DR

Learn how to take user input, pass it to an API query, retrieve data, and visualize it on the screen.

Transcript

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 the data come back into your program, and visualize something on the screen. So, this is an example that I built in the previous video, which I'll link to below, and what this example is doing is it's queryi... Read More

Key Insights

• 🔠 By breaking down the API query into components, it becomes easier to dynamically update specific parts based on user input.
• 🤔 The tutorial emphasizes the importance of thinking creatively and finding unique visual representations for the data.
• 😫 Regularly querying the API at set intervals can ensure that the displayed data is always up to date.

Questions & Answers

Q: How does the tutorial demonstrate passing user input to an API query?

The tutorial shows how to add a text input field and a submit button to the webpage. When the user types in a city name and clicks the submit button, the program dynamically updates the API query with the user input and retrieves the corresponding weather data.

Q: Can the user query the API for temperatures in both Celsius and Fahrenheit?

The tutorial suggests an exercise where the user can add a checkbox to toggle between Celsius and Fahrenheit units. Depending on the checkbox state, the program would modify the API query to retrieve temperature data in the selected unit.

Q: Is it possible to visualize the weather data in a more creative way?

Yes, the tutorial encourages users to think beyond literal visual representations. For example, if it's raining, one can make it rain on the canvas. The tutorial encourages users to explore different creative ways to display the weather data.

Q: How does the tutorial address the need for regularly updating the API data?

Although not covered in this video, the tutorial mentions that querying the API at regular intervals is useful for data that changes frequently. Future videos may address this topic and how to implement it in code.

Summary & Key Takeaways

• This video tutorial demonstrates how to query an API called Open Weather Map, retrieve weather data for a specific city, and display it on the screen.

• The tutorial teaches how to use user input to dynamically change the API query and retrieve data for different cities.

• The video also explores the concept of querying the API at regular intervals to update the displayed data.