Projet : Créer une application météo à l'aide de JavaScript et d'une API météo-js tutoriel-php.cn

Projet : Créer une application météo à l'aide de JavaScript et d'une API météo

Linda Hamilton

Libérer： 2024-12-27 04:02:13

original

515 Les gens l'ont consulté

Projet : Créer une application météo à l'aide de JavaScript et d'une API météo

Date : 18 décembre 2024

Créer une application météo est un excellent moyen de consolider votre compréhension de JavaScript, de la manipulation DOM, de la gestion des événements et de l'intégration d'API. Ce projet vous apprendra comment récupérer des données à partir d'une API et les afficher dynamiquement sur une page Web.

Aperçu du projet

Fonctionnalités de l'application Météo

Récupérez des données météorologiques en temps réel à partir d'une API météo (par exemple, OpenWeatherMap).
Fonctionnalité de saisie : les utilisateurs peuvent rechercher des détails météorologiques en saisissant le nom d'une ville.
Mises à jour dynamiques de l'interface utilisateur : affichez dynamiquement la température, l'humidité et les conditions météorologiques.
Gestion des erreurs pour les noms de villes non valides ou les problèmes d'API.

Guide étape par étape

1. Configurez votre projet

Créez les fichiers nécessaires à votre projet :

HTML : Structurez la mise en page.
CSS : stylisez l'application (facultatif pour les fonctionnalités de base).
JavaScript : Ajoutez de l'interactivité et intégrez l'API météo.

2. Obtenez une clé API Météo

Inscrivez-vous sur OpenWeatherMap et obtenez une clé API. Vous utiliserez leur API pour récupérer des données météorologiques.

Exemple d'URL d'API :

https://api.openweathermap.org/data/2.5/weather?q={city}&appid={API_KEY}&units=metric

Copier après la connexion

3. Structure HTML de base

Créez une mise en page simple avec un champ de saisie et une section pour afficher les informations météorologiques.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Weather App</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div>




<hr>

<h3>
  
  
  <strong>4. Styling (Optional)</strong>
</h3>

<p>Add some CSS to make your app visually appealing.<br>
</p>

<pre class="brush:php;toolbar:false">#weather-app {
  text-align: center;
  font-family: Arial, sans-serif;
  margin: 50px auto;
  width: 300px;
}

input, button {
  padding: 10px;
  margin: 10px 0;
}

#weather-result {
  margin-top: 20px;
}

Copier après la connexion

5. Écrire le code JavaScript

Manipulation DOM et gestion des événements

Utilisez JavaScript pour capturer les entrées de l'utilisateur, récupérer les données de l'API et afficher les résultats.

// JavaScript code for the weather app
const API_KEY = "your_api_key_here"; // Replace with your actual API key

document.getElementById("search-btn").addEventListener("click", () => {
  const city = document.getElementById("city-input").value;
  if (city) {
    fetchWeather(city);
  } else {
    displayError("Please enter a city name.");
  }
});

function fetchWeather(city) {
  const apiURL = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric`;

  fetch(apiURL)
    .then(response => {
      if (!response.ok) {
        throw new Error("City not found");
      }
      return response.json();
    })
    .then(data => displayWeather(data))
    .catch(error => displayError(error.message));
}

function displayWeather(data) {
  document.getElementById("error-message").textContent = "";
  document.getElementById("city-name").textContent = `Weather in ${data.name}`;
  document.getElementById("temperature").textContent = `Temperature: ${data.main.temp}°C`;
  document.getElementById("description").textContent = `Condition: ${data.weather[0].description}`;
  document.getElementById("humidity").textContent = `Humidity: ${data.main.humidity}%`;
}

function displayError(message) {
  document.getElementById("error-message").textContent = message;
  document.getElementById("city-name").textContent = "";
  document.getElementById("temperature").textContent = "";
  document.getElementById("description").textContent = "";
  document.getElementById("humidity").textContent = "";
}

Copier après la connexion

6. Tester l'application

Ouvrez le fichier HTML dans un navigateur.
Entrez le nom d'une ville (par exemple, « Londres ») et cliquez sur « Rechercher ».
Vérifiez que les détails météo apparaissent sur la page.
Testez les villes non valides et les entrées vides pour garantir que les messages d'erreur s'affichent correctement.

Project: Build a Weather App Using JavaScript and a Weather API

Mon dépôt GitHub ici, cliquez

7. Fonctionnalités à ajouter ultérieurement (améliorations facultatives)

Géolocalisation : Détectez automatiquement la position de l'utilisateur et affichez la météo.
Icônes météo : utilisez les icônes météo de la réponse de l'API.
Style : ajoutez des animations ou un design réactif pour les utilisateurs mobiles.
Prévisions : affichez des prévisions météorologiques sur 5 jours.

Résumé du projet

La création d'une application météo intègre de nombreuses compétences JavaScript importantes, telles que :

Récupération et gestion des données API.
Manipulation dynamique du DOM.
Gérer les entrées des utilisateurs et afficher les résultats de manière interactive.

En réalisant ce projet, vous gagnerez en confiance dans la création d'applications JavaScript plus complexes.

Prochaines étapes : Demain, nous nous concentrerons sur la Gestion des erreurs et débogage en JavaScript, en explorant les techniques permettant d'identifier et de résoudre efficacement les problèmes. Restez à l'écoute !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!