22 подписчика
🧑💻Случайный промт для программиста по средам от ИИ🧑💻
ПРОМПТ ДЛЯ СОЗДАНИЯ МИНИ-ПРИЛОЖЕНИЯ НА JAVASCRIPT С ИСПОЛЬЗОВАНИЕМ API
Промпт для создания мини-приложения на JavaScript с использованием API
Задача:
Создать мини-приложение на JavaScript, которое будет взаимодействовать с публичным API для получения данных о погоде. Приложение должно отображать текущую погоду в заданном городе, а также предоставлять возможность пользователю вводить название города для получения актуальной информации.
Требования к приложению:
1. Интерфейс пользователя:
- Простая и интуитивно понятная форма для ввода названия города.
- Кнопка "Получить погоду", которая будет инициировать запрос к API.
- Поле для отображения текущей погоды, включая температуру, описание погоды и иконку, соответствующую погодным условиям.
2. Функциональность:
- Использовать Fetch API для выполнения GET-запроса к публичному API погоды (например, OpenWeatherMap).
- Обработать ответ от API и отобразить данные на странице.
- Обработать возможные ошибки, такие как неправильное название города или проблемы с сетью.
3. Технические детали:
- Использовать HTML, CSS и JavaScript (ES6).
- Приложение должно быть адаптивным и корректно отображаться на мобильных устройствах.
- Добавить стилизацию с помощью CSS для улучшения визуального восприятия.
Примерный код:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Погода в городе</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Узнайте погоду в вашем городе</h1>
<input type="text" id="cityInput" placeholder="Введите название города">
<button id="getWeatherBtn">Получить погоду</button>
<div id="weatherResult"></div>
</div>
<script src="script.js"></script>
</body>
</html>
javascript
const apiKey = 'ВАШ_API_КЛЮЧ';
const weatherResult = document.getElementById('weatherResult');
const getWeatherBtn = document.getElementById('getWeatherBtn');
getWeatherBtn.addEventListener('click', () => {
const city = document.getElementById('cityInput').value;
if (city) {
fetch(https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric)
.then(response => {
if (!response.ok) {
throw new Error('Город не найден');
}
return response.json();
})
.then(data => {
const temperature = data.main.temp;
const description = data.weather[0].description;
const icon = data.weather[0].icon;
weatherResult.innerHTML =
<h2>Погода в ${city}</h2>
<p>Температура:
${temperature}°C</p>
<p>Описание:
${description}</p>
<img src="http://openweathermap.org/img/wn/${icon}.png" alt="Иконка погоды">
;
})
.catch(error => {
weatherResult.innerHTML = <p>${error.message}</p>;
});
} else {
weatherResult.innerHTML = '<p>Пожалуйста, введите название города.</p>';
}
});
Дополнительные рекомендации:
- Используйте CSS для стилизации элементов, чтобы сделать интерфейс более привлекательным.
- Рассмотрите возможность добавления функционала для отображения прогноза погоды на несколько дней вперед.
- Подумайте о добавлении возможности выбора единиц измерения (Цельсий/Фаренгейт).
🔻🔻🔻🔻🔻🔻🔻🔻🔻🔻
Заменим сотрудника на ИИ
по цене 1 месяца работы!!!
Получи комиссию 10% (~20к)
за рекомендацию
Присылайте варианты созданных ботов, сайтов и приложений в комментариях!
#prompt
2 минуты
8 января 2025