script.js

// Récupérer les coordonnées GPS
// https://geocoding-api.open-meteo.com/v1/search?name=VILLE&count=1&language=fr&format=json

// Récupérer la météo
// https://api.open-meteo.com/v1/forecast?latitude=LAT&longitude=LONG&current_weather=true

// Lorsque l'utilisateur clique sur le bouton de recherche, on récupère la ville

const searchBtn = document.querySelector('#search')
searchBtn.addEventListener('click', async () => {
    // On reset le message d'erreur
    document.querySelector('.error').innerText = ""
    // On récupère l'input
    const input = document.querySelector('input')

    if(input.value.length <= 0){
        document.querySelector('.error').innerText = "Le champ ne doit pas être vide"
    }

    const city = input.value

    const meteo = await getMeteo(city)

    // On affiche la météo sur le DOM
    showUI(meteo)
})

const getCoords = async (city) => {
    const req = await fetch(`https://geocoding-api.open-meteo.com/v1/search?name=${city}&count=1&language=fr&format=json`)

    if(!req.ok){
        console.error("Nop")
        return
    }

    // Si on arrive ici, c'est qu'on obtien une réponse
    const res = await req.json()
    return {
        lat: res.results[0].latitude,
        long: res.results[0].longitude
    }
}

const getWeather = async (latitude, longitude) => {
    const req = await fetch(`https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}&current_weather=true`)

    if(!req.ok){
        console.error("Nop")
        return
    }

    const res = await req.json()
    return {
        temperature: res.current_weather.temperature + res.current_weather_units.temperature,
        windspeed: res.current_weather.windspeed + res.current_weather_units.windspeed
    }
}

const showUI = (meteo) => {
    // Sélectionné mon interface
    const h2 = document.querySelector('#temp')
    h2.textContent = `Météo ${meteo.city}`

    const meteoUI = document.querySelector('#meteo')
    meteoUI.innerHTML = `<b>Temp : </b> ${meteo.temperature} <br/> <b>Vitesse vent : </b> ${meteo.windspeed}` 
}

const getMeteo = async (city) => {
     // On Fait appel à la première URL pour récupérer lat et long
    const coords = await getCoords(city)
    
    // On fait appel à la deuxième URL pour envoyer lat et long et récup météo
    const meteo = await getWeather(coords.lat, coords.long)

    // On rajoute la ville sur l'objet météo
    meteo.city = capitalize(city)

    return meteo
}

// On gère l'ajout aux favoris
const favButton = document.querySelector('#favorite')
favButton.addEventListener('click', async () => {
    // On reset le message d'erreur
    document.querySelector('.error').innerText = ""
    // On récupère ce qu'il y a sur le champ input
    const input = document.querySelector('input')
    
    const city = input.value

    // S'il n'y a rien, on affiche un message d'erreur
    if(city.length <= 1){
        document.querySelector('.error').innerText = "Le champ ne doit pas être vide"
    }


    // On récupère le contenu du localStorage
    //  ?? → opérateur de coalescence null
    // Si l'expression à gauche de ?? produit un résultat vide/erreur → on attribut
    // ce qui se trouve à droite au lieu de fournir une erreur
    const datas = JSON.parse(localStorage.getItem('meteo')) ?? []

    // datas → tableau d'objet

    // → includes → tableau d'objets → utiliser some à la place
    const isAlreadyExists = datas.some(data => data.city === city)

    
    // isAlreadyExists → true/false
    // Si ça existe déjà, on sort de la fonction
    if(isAlreadyExists){
        return
    }

   const meteo = await getMeteo(city)

   datas.push(meteo)
   /*
        meteo = {
            city: "Toulon",
            temperature: "35°C",
            windspeed: "11Km/h"
        }
   */
   // On enregistre sur le localStorage
   localStorage.setItem('meteo', JSON.stringify(datas))
   showFavUI(meteo)
})

// Une fonction qui permet de mettre à jour l'UI pour les favoris
const showFavUI = (city = null) => {

    const ul = document.querySelector('ul')
    if(city === null){
        // On récupère le localStorage
        const datas = JSON.parse(localStorage.getItem('meteo')) ?? []
    
        // On passe sur chacune des données et on met à jour le DOM
        ul.innerHTML = "" // Vider le contenu du UL
        datas.forEach(data => {
            const li = `<li>${data.city}</li>`
            ul.insertAdjacentHTML('afterbegin', li)
        })
    }

    if(city !== null){
        // city → objet
        const li = `<li>${city.city}</li>`
        ul.insertAdjacentHTML('afterbegin', li)
    }

}
showFavUI()

// Fonction qui permet de mettre la première lettre en majuscule
const capitalize = ([first, ...rest]) => first ? first.toUpperCase() + rest.join('').toLowerCase() : '';