Simple-Weather-App/script.js at main · Tyxiel/Simple-Weather-App · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
// API Key (Constant)
const API_KEY = "e0283766cee7e7e70be7e75409ae8042";

// Fetch weather data based on city input
async function fetchWeatherData(city) {
  const response = await fetch(
    `https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&lang=pt_br&appid=${API_KEY}`
  );
  const data = await response.json();
  console.log(data);
  displayWeatherData(data);
}

// Handle weather search input
function weatherSearch() {
  const city = document.querySelector(".search-text").value;
  fetchWeatherData(city);
}

// Display weather data on the page
function displayWeatherData(data) {
  document.querySelector(".city").textContent = data.name;
  document.querySelector(".description").textContent =
    data.weather[0].description;
  document.querySelector(".main-temp").textContent = `${data.main.temp}°`;
  document.querySelector(".max-temp").textContent = `${data.main.temp_max}°`;
  document.querySelector(".min-temp").textContent = `${data.main.temp_min}°`;
  document.querySelector(".humidity p").textContent = `${data.main.humidity}%`;
  document.querySelector(".wind p").textContent = `${data.wind.speed} m/s`;
  document.querySelector(".visibility p").textContent = `${
    data.visibility / 1000
  } km`;

  const iconCode = data.weather[0].icon;

  const appleTouchIcons = [
    { sizes: "57x57" },
    { sizes: "60x60" },
    { sizes: "72x72" },
    { sizes: "76x76" },
    { sizes: "114x114" },
    { sizes: "120x120" },
    { sizes: "144x144" },
    { sizes: "152x152" },
    { sizes: "180x180" },
  ];

  appleTouchIcons.forEach((icon) => {
    let link = document.querySelector(
      `link[rel='apple-touch-icon'][sizes='${icon.sizes}']`
    );
    if (link) {
      link.href = `https://openweathermap.org/img/wn/${iconCode}.png`;
    }
  });

  // Update favicon links dynamically
  const favicons = [
    { sizes: "192x192" },
    { sizes: "32x32" },
    { sizes: "96x96" },
    { sizes: "16x16" },
  ];

  favicons.forEach((icon) => {
    let link = document.querySelector(
      `link[rel='icon'][sizes='${icon.sizes}']`
    );
    if (link) {
      link.href = `https://openweathermap.org/img/wn/${iconCode}.png`;
    }
  });

  // Update Microsoft application tile meta tags dynamically
  let tileColorMeta = document.querySelector(
    'meta[name="msapplication-TileColor"]'
  );
  if (tileColorMeta) {
    tileColorMeta.content = "#ffffff"; // Update as needed
  }

  let tileImageMeta = document.querySelector(
    'meta[name="msapplication-TileImage"]'
  );
  if (tileImageMeta) {
    tileImageMeta.content = `https://openweathermap.org/img/wn/${iconCode}.png`;
  }

  // Also update the image inside .temperature img if needed
  document.querySelector(
    ".temperature img"
  ).src = `https://openweathermap.org/img/wn/${iconCode}.png`;

  document.querySelector(
    ".temperature img"
  ).src = `https://openweathermap.org/img/wn/${iconCode}.png`;
}

// Toggle dark mode
function toggleDarkMode() {
  document.body.classList.toggle("dark-theme");
}