PromptBase
🤖 GPT
Generate JavaScript code for a feature-rich web page that seamlessly integrates multiple APIs for enhanced functionality.
...more
$2.99
After purchasing, you will gain access to the prompt file which you can use with GPT or the app builder. You'll receive 20 free generation credits with this purchase. By purchasing this prompt, you agree to our terms of service.
Updated: Over 1 month ago
Prompt Details
Model
Chat - GPT-3.5 (gpt-3.5-turbo)
Token size
306 ($0.00030 / call)
Example input
Generate JavaScript code for a feature-rich web page that seamlessly integrates multiple APIs for enhanced functionality. Prioritize [Company]: [Tone of voice]:
Example output
Creating a feature-rich web page that seamlessly integrates multiple APIs involves several steps. For the sake of brevity, I'll demonstrate a simple example that combines the GitHub API to fetch user information and the OpenWeatherMap API to display weather information. Make sure to replace placeholder values with your actual API keys.
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>API Integration Example</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
#weather-container {
margin-top: 20px;
}
</style>
</head>
<body>
<h1>API Integration Example</h1>
<label for="github-username">GitHub Username:</label>
<input type="text" id="github-username">
<button onclick="getGitHubData()">Get GitHub Data</button>
<div id="github-container">
<!-- GitHub data will be displayed here -->
</div>
<hr>
<label for="city">City:</label>
<input type="text" id="city">
<button onclick="getWeatherData()">Get Weather Data</button>
<div id="weather-container">
<!-- Weather data will be displayed here -->
</div>
<script>
async function fetchData(url) {
const response = await fetch(url);
return response.json();
}
async function getGitHubData() {
const username = document.getElementById('github-username').value;
const url = `https://api.github.com/users/${username}`;
const data = await fetchData(url);
const githubContainer = document.getElementById('github-container');
githubContainer.innerHTML = `
<h2>${data.name}</h2>
<p>Followers: ${data.followers}</p>
<p>Public Repositories: ${data.public_repos}</p>
`;
}
async function getWeatherData() {
const city = document.getElementById('city').value;
const apiKey = 'YOUR_OPENWEATHERMAP_API_KEY';
const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`;
const data = await fetchData(url);
const weatherContainer = document.getElementById('weather-container');
weatherContainer.innerHTML = `
<h2>Weather in ${city}</h2>
<p>Temperature: ${data.main.temp}°C</p>
<p>Weather: ${data.weather[0].description}</p>
`;
}
</script>
</body>
</html>
Remember to replace 'YOUR_OPENWEATHERMAP_API_KEY' with your actual OpenWeatherMap API key. This example includes two sections for GitHub data and weather data. The functions getGitHubData and getWeatherData are triggered by button clicks, fetching data from the respective APIs and updating the HTML content dynamically. This code aims to be readable and efficient, using asynchronous functions and modularizing the fetching process.