Séance 5 - 8

Projet final (noté)

Réaliser une application manipulant une API et affichant les données dans lesquels il est possible de naviguer.

API OpenWeather

Une fois votre compte créé (il faut parfois attendre 2heures pour que la clé d'API fonctionne), vous pouvez choisir entre deux accès.

Les données actuelles

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

La valeur cleApi est à remplacer par votre clé.

"troyes" peut être remplacée par n'importe quelle ville du monde (dans sa langue d'origine ou anglaise)

Les prévisions

https://api.openweathermap.org/data/2.5/forecast?q=troyes&appid=f09048b15950f446f8a54ea748fb65e3&units=metric

Le fonctionnement est identique à l'appel précédent (weather est remplacé par forecast)

{"coord":
{
    "lon":4.0833,
    "lat":48.3333
},
"weather":
[{
    "id":800,
    "main":"Clear",
    "description":"clear sky",
    "icon":"01d"
}],
"base":"stations",
"main":
{
    "temp":8.03,
    "feels_like":8.03,
    "temp_min":8.03,
    "temp_max":9.43,
    "pressure":1012,
    "humidity":93
},
"visibility":10000,
"wind":
{
    "speed":0.51,
    "deg":150
},
"clouds":
{
    "all":0
},
"dt":1653975602,
"sys":
{
    "type":1,
    "id":6555,
    "country":"FR",
    "sunrise":1653968878,
    "sunset":1654025702},
    "timezone":7200,
    "id":2971548,
    "name":"Arrondissement de Troyes",
    "cod":200
}

Base

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Météo</title>
    <link rel="stylesheets" href="css/bootstrap.min.css">
</head>
<body>
    <h1>Application météo</h1>
<p>Température : <span id="temperature"></span>°C</p>

<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){

    $.ajax({
        url: "https://api.openweathermap.org/data/2.5/weather?q=troyes&units=metric&appid=votrecle",
        method: "GET",
        success: function(data) {
            console.log(data)
            $("#temperature").text(data.main.temp)
        }
    })
})
</script>
</body>
</html>

Changement de ville

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Météo</title>
    <link rel="stylesheets" href="css/bootstrap.min.css">
</head>
<body>
<select id="villes">
    <option>Choisir</option>
    <option value="berlin">Berlin</option>
    <option value="london">Londres</option>
    <option value="troyes">Troyes</option>
    <option value="amsterdam">Amsterdam</option>
</select>


    <h1>Application météo <span id="ville"></span></h1>
<p>Température : <span id="temperature"></span>°C</p>

<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){

    $("#villes").change(function(){
        var ville = $(this).val() //valeur de la ville selectionnée
        $('#ville').text(ville)
        console.log(ville)
        $.ajax({
        url: "https://api.openweathermap.org/data/2.5/weather?q="+ville+"&units=metric&appid=cleApi",
        method: "GET",
        success: function(data) {
            console.log(data)
            $("#temperature").text(data.main.temp)
        }
    })
    })
})
</script>
</body>
</html>

Modifier une image

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <select id="villes">
        <option value="ville1">Ville 1</option>
        <option value="ville2">Ville 2</option>
        <option value="ville3">Ville 3</option>
    </select>


    <!--<img src="image1.jfif" id="img1" class="imageVille">
    <img src="image2.jfif" id="img2" class="imageVille">
    <img src="image3.jfif" id="img3" class="imageVille">-->
    
    <img src="" id="image" >

    <script src="jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $('#villes').change(function(){
               // $('.imageVille').hide()

                if ($(this).val() == "ville1") {
                    $('#image').attr('src', 'image1.jfif')
                }
                if ($(this).val() == "ville2") {
                    $('#image').attr('src', 'image2.jfif')
                }
                if ($(this).val() == "ville3") {
                    $('#image').attr('src', 'image3.jfif')
                }


                //masque totes les images
            /*    if ($(this).val() == "ville1") {
                    $('#img1').show()
                }
                if ($(this).val() == "ville2") {
                    $('#img2').show()
                }
                if ($(this).val() == "ville3") {
                    $('#img3').show()
                }*/

            })
        })
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <select id="villes">
        <option value="ville1">Ville 1</option>
        <option value="ville2">Ville 2</option>
        <option value="ville3">Ville 3</option>
    </select>


    <a href="#" class="dropdown" data-id="lien1">lien 1</a>
    <a href="#" class="dropdown"  data-id="lien2">lien 2</a>
    <a href="#" class="dropdown"  data-id="lien3">lien 3</a>



    <!--<img src="image1.jfif" id="img1" class="imageVille">
    <img src="image2.jfif" id="img2" class="imageVille">
    <img src="image3.jfif" id="img3" class="imageVille">-->
    
    <img src="" id="image" >

    <script src="jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){

            $('.dropdown').click(function(){
                console.log($(this).data('id'))
            })



            $('#villes').change(function(){
               // $('.imageVille').hide()

                if ($(this).val() == "ville1") {
                    $('#image').attr('src', 'image1.jfif')
                }
                if ($(this).val() == "ville2") {
                    $('#image').attr('src', 'image2.jfif')
                }
                if ($(this).val() == "ville3") {
                    $('#image').attr('src', 'image3.jfif')
                }


                /////
                /// Prévision (avec l'api sur forecast)
                // data.list[0].main.temp => température prévue pour le créneau 0
                // data.list[1].main.temp => témpérature pour le créneau 1

                //masque totes les images
            /*    if ($(this).val() == "ville1") {
                    $('#img1').show()
                }
                if ($(this).val() == "ville2") {
                    $('#img2').show()
                }
                if ($(this).val() == "ville3") {
                    $('#img3').show()
                }*/

            })
        })
    </script>
</body>
</html>

Consignes

Au moins 2 pages.
- Une pour les informations météos actuelles,
- Une pour les prévisions
Possibilité de choisir parmi une liste de ville
Affichage soignée (couleur, mise en page, interactions éventuelles, lisibilité)

Critères de notation

Qualité visuelle des pages
Fonctionnement des pages (possibilité de changer de ville)
Lisibilité des informations, mise en page
Variété et complexité des informations

PreviousSéance 4

Last updated 3 years ago