How to put the time and weather on the site?

Question

JavaScript

Colleagues, hello!
there was a task to place the time and weather on the site, as it was done here, in the basement: https://chinavisacenter.ru/visa-online/
without pictures, without any elements, but purely in text.
can you suggest the best way to do this? maybe some jquery plugin?

Answer 1

ApiWeather is
the following code that implements the weather on the site.
Time is much easier to place, api is not necessary there :)

$.getJSON(getWeatheAPI, function(data) {

    var numberToConvertFahren = 273.15;
    var weather = data['main'];
    var temp = weather.temp - numberToConvertFahren;
    var detailsWeather = data['weather'];
    var windWeather = data['wind'];
    var degFixSvg = windWeather.deg + 90;

    $('.get-weather').html('<img src="/drupal/sites/all/themes/parallax_zymphonies_theme_pgok/images/weather-icon/' + 
      detailsWeather[0]['icon'] + '.png"  title="' + detailsWeather[0]['main'] + '" alt="' + 
      detailsWeather[0].description + '" />' + '<p>' + temp.toFixed(0) + '</p>');

    var id = ".get-weather";
    var $elem = $(id);

    $elem.on("mouseenter", function (e) {
        e.stopImmediatePropagation();
    });

    $elem.tooltip({ 
      position: {
        my: "left-20 top-100", // the "anchor point" in the tooltip element
        at: "left bottom-40", // the position of that anchor point relative to selected element
      },
      items: id, content: '<div class="weather-details"><p>Горишние Плавни</p><p>' + 
      detailsWeather[0]['description'] + '</p><p>Влажность: ' + weather.humidity + 
      '%</p><p>Ветер: ' + windWeather.speed + ' м/сек.<span class="degArrow" style="transform: rotate(' + degFixSvg + 'deg);"></span></p></div>'});

    $elem.on("click", function (e) {
        $elem.tooltip("open");
    });

    $elem.on("mouseleave", function (e) {
        e.stopImmediatePropagation();
    });
            
    $(document).mouseup(function (e) {
        var container = $(".ui-tooltip");
        if (! container.is(e.target) && 
            container.has(e.target).length === 0)
        {
            $elem.tooltip("close");
        }
    });
  });