WeatherApp/script.js at main · chamzz99/WeatherApp · 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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
const apiKey = "6e58518b4db1fa527cf9895ad991e18e";
const colomboLatitude = 6.9271;
const colombolongitude = 79.8612;

//
let latitude = (document.getElementById("latitude").value = colomboLatitude);
let longitude = (document.getElementById("longitude").value = colombolongitude);

//Login Function
function login() {
  const username = document.getElementById("username").value;
  const password = document.getElementById("password").value;

  // Check if username and password are correct
  if (username === "hello" && password === "1234") {
    document.getElementById("login").style.display = "none";
    document.getElementById("weatherApp").style.display = "block";
  } else {
    alert("Incorrect username or password. Please try again.");
  }
}
//weather API Calling
function getLiveWeather() {
  let latitude = document.getElementById("latitude").value;
  let longitude = document.getElementById("longitude").value;
  document.getElementById("forcast").style.display = "block";
  document.getElementById("daily-forecast").style.display = "none";

  const liveWeatherUrl = `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${apiKey}`;

  fetch(liveWeatherUrl)
    .then((response) => response.json())
    .then((data) => {
      displayWeather(data);
    })
    .catch((error) => {
      console.error("Error fetching live weather data:", error);
      alert("Error fetching live weather data. try again !!.");
    });
}

function displayWeather(data) {
  const mainDivInfo = document.getElementById("main-div");
  const liveWeatherInfoDiv = document.getElementById("liveWeather-info");
  const weatherIcon = document.getElementById("weather-icon");

  // Clearing previous content
  liveWeatherInfoDiv.innerHTML = "";
  mainDivInfo.innerHTML = "";

  const cityName = data.name;
  const temperature = Math.round(data.main.temp - 273.15);
  const description = data.weather[0].description;
  const iconCode = data.weather[0].icon;
  const iconUrl = `https://openweathermap.org/img/wn/${iconCode}@4x.png`;

  const temperatureHTML = `
            <p>${temperature}°C</p>
        `;

  const weatherHtml = `
            <p>${cityName}</p>
            <p>${description}</p>
        `;

  mainDivInfo.innerHTML = temperatureHTML;
  liveWeatherInfoDiv.innerHTML = weatherHtml;
  weatherIcon.src = iconUrl;
  weatherIcon.alt = description;

  showImage();
}

//Weather Forcasting Function
async function showForecast() {
  let latitude = document.getElementById("latitude").value;
  let longitude = document.getElementById("longitude").value;
  document.getElementById("forcast").style.display = "none";
  document.getElementById("daily-forecast").style.display = "flex";

  try {
    const response = await fetch(
      `https://api.openweathermap.org/data/2.5/forecast?lat=${latitude}&lon=${longitude}&appid=${apiKey}`
    );
    const data = await response.json();

    // Display forecast
    const forecastData = data.list.filter((entry) =>
      entry.dt_txt.includes("12:00:00")
    );
    console.log(forecastData);
    document.getElementById("daily-forecast").innerHTML = `
            ${forecastData
              .map((data) => {
                // Get day of the week from dt_txt
                const date = new Date(data.dt_txt);
                const dayOfWeek = date.toLocaleDateString("en-US", {
                  weekday: "long",
                });
                const weatherIconCode = data.weather[0].icon;
                const temperature = Math.round(data.main.temp - 273.15);
                const weatherIconUrl = `https://openweathermap.org/img/wn/${weatherIconCode}.png`;
                return `
                <div class="daily-item">
                        <span>${dayOfWeek}</span>
                        <span>${temperature} °C</span>
                        <img src="${weatherIconUrl}" alt="Hourly Weather Icon">
                </div>
            `;
              })
              .join("")}
        `;
  } catch (error) {
    console.error("Error fetching forecast data:", error);
  }
  showImage();
}

//Weather ICON Funtion
function showImage() {
  const weatherIcon = document.getElementById("weather-icon");
  weatherIcon.style.display = "block";
}