Learning the JavaScript API: A Beginner's Guide
Keywords: JavaScript API, API basics, working with fetch.
Introduction
In this tutorial, we will get acquainted with the concept of API (Application Programming Interface) and learn how to work with it in JavaScript. You will learn what an API is, why it is needed, how to send requests, process responses and integrate data into your application. As an example, we will get weather data using the free OpenWeatherMap API. 🌥 This will allow you to master working with external services in practice and get acquainted with modern web development technologies.
What is an API?
An API is an interface that allows your application to interact with other services or programs. For example, the API can help you:
Check the weather in real time.
Get up-to-date exchange rates.
Search for pictures, videos, or other information.
To work with the API, you usually need:
HTTP methods (“GET” to receive data, “POST” to send data, etc.).
JSON format — most APIs return data in this format.
URL API is the address to which requests are sent.
API key (sometimes), which confirms your identity.
APIs are used everywhere, from mobile apps to complex web services. Understanding the API is an important step in developing web development skills.
What we will do
We will create a simple JavaScript application that will send a request to the OpenWeatherMap API and show the temperature in the selected city. ⛅ Our project includes:
Development of an HTML interface for user interaction.
Writing JavaScript code for processing requests and responses.
Error handling for user convenience.
Preparation
Create an HTML file with a basic page structure. This file will be the basis of our application.
Register on the website OpenWeatherMap and get a free API key. Without it, API requests will not work.
Make sure your browser supports modern JavaScript features such as
fetch()andasync/await.
Application code: HTML structure and JavaScript example for API
HTML: Let's create an interface for entering the city and displaying the temperature.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Погода</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 20px;
}
input {
padding: 10px;
font-size: 16px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
p {
font-size: 18px;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>🌤 Узнать погоду</h1>
<input type="text" id="city" placeholder="Enter city">
<button id="getWeather">Получить погоду</button>
<p id="weatherResult"></p>
<script src="script.js"></script>
</body>
</html>JavaScript:
Let's write the code to get the weather data.
const apiKey = 'YOUR_API_KEY';
// Getting elements from HTML
const cityInput = document.getElementById('city');
const getWeatherButton = document.getElementById('getWeather');
const weatherResult = document.getElementById('weatherResult');
// Function for getting weather
async function getWeather() {
const city = cityInput.value.trim(); // Get the entered city
if (!city) {
weatherResult.textContent = 'Enter the city name! ❌';
return;
}
const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;
try {
const response = await fetch(url); // Sending request
if (!response.ok) {
throw new Error('City not found ⚠');
}
const data = await response.json(); // We get the response in JSON format
const temperature = data.main.temp; // Extracting temperature
const description = data.weather[0].description; // Weather description
// Showing the result
weatherResult.textContent = `The temperature in ${city} is now ${temperature} ℃, ${description}.`;
} catch (error) {
weatherResult.textContent = error.message;
}
}
// Adding an event handler
getWeatherButton.addEventListener('click', getWeather);Code explanation
HTML structure:
The input field for the city (“input”) and the button (“button”) allow the user to interact with the application.
The paragraph (“p”) is used to display the result.
JavaScript connection:
The “script.js” file describes all the logic of working with the API.
GetWeather() function:
Gets the entered city from the input field.
Generates a URL for the API request.
Uses
fetch()to send a request.Processes the response and extracts the temperature from the data.
Additional data:
We also extract the weather description for a more detailed result.
Error handling:
If the city is not found or a network error occurs, the user sees the corresponding message.
Adding an event:
The function is launched when you click on the "Get weather" button.
Launching the application
Save the “index.html” and “script.js” files in the same folder.
Open the “index.html” file in the browser.
Enter the name of the city and click “Get weather”. 🌇
Conclusions
Now you know how to work with the JavaScript API! You have mastered the basics of HTTP requests, learned how to use fetch, and got an idea of how to interact with external services. This knowledge will help you create modern applications and deepen your understanding of JavaScript. 🚀
In addition, you have learned the basics of working with data formats such as JSON and gained experience in handling errors when interacting with the API. These skills are the foundation for working with advanced technologies in web development.
If you want to continue learning programming, try the “Kodik” app. In it you will find clear and fascinating lessons for beginners! 🌐