Heimdall

Custom JavaScript

Cancel

const sortableElement = document.querySelector('.appheader');

function insertAfter(referenceNode, newNode) {
  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

function createAndInsertDiv(className, referenceNode) {
  var newDiv = document.createElement("div");
  newDiv.classList.add(className);
  referenceNode.appendChild(newDiv);
  return newDiv;
}

if (sortableElement) {
  var headerInfos = document.createElement('div');
  headerInfos.classList.add('headerInfos');
  insertAfter(sortableElement, headerInfos);

var divDate = createAndInsertDiv('divDate', headerInfos);
  var timeDiv = createAndInsertDiv('horloge', divDate);
  var dateDiv = createAndInsertDiv('ladate', divDate);

// Réduction taille police date
  dateDiv.style.fontSize = '1.2em';

var meteoDiv = createAndInsertDiv('meteo', headerInfos);

function afficherDateHeure() {
    const maintenant = new Date();

const optionsJour = {
      weekday: 'long'
    };

const optionsHeure = {
      hour: 'numeric',
      minute: 'numeric'
    };

const optionsDate = {
      year: 'numeric',
      month: 'long',
      day: 'numeric'
    };

const jourFormatted = maintenant.toLocaleDateString('fr-FR', optionsJour);
    const dateFormatted = maintenant.toLocaleDateString('fr-FR', optionsDate);
    const heureFormatted = maintenant.toLocaleTimeString('fr-FR', optionsHeure);

dateDiv.innerHTML = '';
    var spanJourSemaine = document.createElement('span');
    spanJourSemaine.textContent = jourFormatted;
    dateDiv.appendChild(spanJourSemaine);

timeDiv.textContent = heureFormatted;
    dateDiv.appendChild(document.createTextNode(dateFormatted));
  }

function afficherMeteo(latitude, longitude) {
    const apiKey = '10c9572181cd9fcdf21ac73568f7f06d';

fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${apiKey}&units=metric&lang=fr`)
      .then(response => response.json())
      .then(data => {
        const temperature = Math.round(data.main.temp);
        const ville = data.name;
        const icon = data.weather[0].icon;
        const description = data.weather[0].description;

meteoDiv.innerHTML = `
          <div class="ville-temp-container">
            <div class="temperature">${temperature}°C</div>
            <div class="icon"><img src="https://openweathermap.org/img/wn/${icon}.png" alt="${description}"></div>
          </div>
          <div class="ville-temp-container">
            <span class="ville">${ville}</span>
            <span class="description">${description}</span>
          </div>`;
      })
      .catch(error => {
        console.error('Erreur lors de la récupération des données météo', error);
        meteoDiv.textContent = 'Impossible de récupérer les données météo';
      });
  }

const latitudeDefault = 48.8566;
  const longitudeDefault = 2.3522;

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        afficherMeteo(position.coords.latitude, position.coords.longitude);
      },
      () => {
        afficherMeteo(latitudeDefault, longitudeDefault);
      }
    );
  } else {
    afficherMeteo(latitudeDefault, longitudeDefault);
  }

afficherDateHeure();
  setInterval(afficherDateHeure, 1000);
}