Commit 6b58d78f authored by Guilhem's avatar Guilhem
Browse files

avancements sur les checkbox

parent a05c66cc

css/style.css

+4 −0
Original line number Diff line number Diff line
@@ -53,3 +53,7 @@ button{ 
    font-family: 'Young Serif', sans-serif;



}



#choix_info_supp{

    

}
 
 No newline at end of file

index.html

+19 −0
Original line number Diff line number Diff line
@@ -11,10 +11,25 @@ 
    <input type="search" id="codePostalInput" placeholder="Entrez votre code postal" aria-label="code postal"><button id="recherche" >Rechercher</button>

    <br>



    <div class="choix_info_supp">

        <input type="checkbox" id="localisation" name="localisation">

        <label for="localisation">Localisation</label>



        <input type="checkbox" id="niveau_pluie" name="niveau_pluie">

        <label for="niveau_pluie">Niveau de pluie</label>



        <input type="checkbox" id="vent_moyen" name="vent_moyen">

        <label for="vent_moyen">Vent moyen</label>



        <input type="checkbox" id="direction_vent" name="direction_vent">

        <label for="direction_vent">Direction du vent</label>

    </div>



    <select id="villeListe" class="cache" aria-label="ville">

        <option>--Sélectionner une ville--</option>

    </select>

    



    <div class="resultat cache" id="resultat">

        <div class="weatherCard" id="weatherCard">

            <p>Ville : <span id="WCVille"></span></p>
@@ -23,6 +38,10 @@ 
            <p>Température max : <span id="WCTemperatureMax"></span></p>

            <p>Probabilité de pluie : <span id="WCPluie"></span></p>

            <p>Temps d'ensoleillements : <span id="WCEnsoleillement"></span> heures.</p>

            <p id="localisationData">Localisation : <span id="WCLocalisation"></span></p>

            <p id="niveauPluieData">Cumul de pluie : <span id="WCNiveauPluie"></span></p>

            <p id="ventMoyenData">Vent moyen : <span id="WCVentMoyen"></span></p>

            <p id="directionVentData">Direction du vent : <span id="WCDirectionVent"></span></p>

            <p>(valeurs de test)</p>

        </div>

    </div>

js/interface.js

+54 −0
Original line number Diff line number Diff line
@@ -5,9 +5,25 @@ const barreRechercheCodePostal = document.getElementById("codePostalInput"); 
const boutonRechercheCodePostal = document.getElementById("recherche");

const listeDeroulanteVilles = document.getElementById("villeListe");



const checkboxLocalisation = document.getElementById("localisation");

const checkboxNiveauDePluie = document.getElementById("niveau_pluie");

const checkboxVentMoyen = document.getElementById("vent_moyen");

const checkboxDirectionDuVent = document.getElementById("direction_vent");



console.log(typeof(checkboxLocalisation))





boutonRechercheCodePostal.addEventListener("click", onRechercher);

listeDeroulanteVilles.addEventListener("change", onSelectionneVille);





checkboxLocalisation.addEventListener("change", onLocalisation);

checkboxNiveauDePluie.addEventListener("change", onNiveauDePluie);

checkboxVentMoyen.addEventListener("change", onVentMoyen);

checkboxDirectionDuVent.addEventListener("change", onDirectionvent);







// Zones d'affichage

const zoneResultats = document.getElementById("resultat");

const labelVille = document.getElementById("WCVille");
@@ -43,6 +59,44 @@ function onErreurSaisieCodePostal(message){ 
    zoneResultats.classList.add("cache");

}









function onLocalisation(){

    if(!checkboxLocalisation.checked){

        document.getElementById("localisationData").style.display = "none";

    } else{

        document.getElementById("localisationData").style.display = "block";

    }

}



function onNiveauDePluie(){

    if(!checkboxNiveauDePluie.checked){

        document.getElementById("niveauPluieData").style.display = "none";

    } else{

        document.getElementById("niveauPluieData").style.display = "block";

    }

}



function onVentMoyen(){

    if(!checkboxVentMoyen.checked){

        document.getElementById("ventMoyenData").style.display = "none";

    } else{

        document.getElementById("ventMoyenData").style.display = "block";

    }

}



function onDirectionvent(){

    if(!checkboxDirectionDuVent.checked){

        document.getElementById("directionVentData").style.display = "none";

    } else{

        document.getElementById("directionVentData").style.display = "block";

    }

}









function listeVille(){

    listeDeroulanteVilles.innerHTML = `<option value="placeholder">--Sélectionner une ville--</option>`;