Weather_Website/home.js at main · anishcheraku/Weather_Website · 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
// the current day
let today = document.querySelector('#today');
let todayNumber = document.querySelector('#todayNumber');
let todayMonth = document.querySelector('#todayMonth');
let locationToday = document.querySelector('#location');
let todayTemperature = document.querySelector('#todayTemperature');
let todayConditionDesc = document.querySelector('#todayConditionDesc');
let todayConditionImg = document.querySelector('#todayConditionImg');
console.log(todayConditionImg);
let percentageWind = document.querySelector('#percentage-wind');
let speed = document.querySelector('#speed');
let direction = document.querySelector('#direction');
//the next day
let nextDayName = document.querySelector('#nextDayName');
let nextDayConditionImg = document.querySelector('#nextDayConditionImg');
let nextDayMorningTemp = document.querySelector('#nextDayMorningTemp');
let nextDayEveningTemp = document.querySelector('#nextDayEveningTemp');
let nextDayConditionDesc = document.querySelector('#nextDayConditionDesc');
// the last day

let lastDayName = document.querySelector('#lastDayName');
let lastDayConditionImg = document.querySelector('#lastDayConditionImg');
let lastDayMorningTemp = document.querySelector('#lastDayMorningTemp');
let lastDayEveningTemp = document.querySelector('#lastDayEveningTemp');
let lastDayConditionDesc = document.querySelector('#lastDayConditionDesc');


//the search button
let searchTerm=document.querySelector("#searchTerm");


//the date of the current day
let date = new Date();
today.innerHTML = date.toLocaleString('en-us', {
    weekday: "long"
});

todayNumber.innerHTML = date.getDate();
todayMonth.innerHTML = date.toLocaleString('en-us',
    {
        month: "long"
    }
);


async function getWeatherData(cityName) {
    let response = await fetch(`https://api.weatherapi.com/v1/forecast.json?key=a1134f9f97804cec9ae115653242606&q=${cityName}&days=3`);
    let data = await response.json();
    console.log("Weather data fetched:", data);
    return data;
}

// the function of today
function displayCurrentData(data) {
    locationToday.innerHTML = data.location.name;
    todayTemperature.innerHTML = data.current.temp_f;
    todayConditionDesc.innerHTML = data.current.condition.text;
    todayConditionImg.setAttribute('src', "https:"+data.current.condition.icon);
    percentageWind.innerHTML = data.current.humidity + '%';
    speed.innerHTML = data.current.wind_mph + 'mph';
    direction.innerHTML = data.current.wind_dir;

}


function displayNextData(data) {
    let arr = data.forecast.forecastday[1];

    nextDayConditionImg.setAttribute('src',"https:" + arr.day.condition.icon);
    nextDayMorningTemp.innerHTML = "High: " + arr.day.maxtemp_f + '&#176;F';
    nextDayEveningTemp.innerHTML = "Low: " + arr.day.mintemp_f + '&#176;F';
    nextDayConditionDesc.innerHTML = "Condition: " + arr.day.condition.text;
    let date=new Date(data.forecast.forecastday[1].date);
    console.log(date);
    nextDayName.innerHTML=date.toLocaleString('en-us',{
        weekday:"long"
    });

}


function displayLastData(data) {

    let arr = data.forecast.forecastday[2];
    nextDayConditionImg.setAttribute('src',"https:" + arr.day.condition.icon);
    lastDayMorningTemp.innerHTML = "High: " + arr.day.maxtemp_f + '&#176;F';
    lastDayEveningTemp.innerHTML = "Low: " + arr.day.mintemp_f + '&#176;F';
    lastDayConditionDesc.innerHTML = "Condition: " + arr.day.condition.text;

    let date=new Date( data.forecast.forecastday[2].date);
    lastDayName.innerHTML=date.toLocaleString('en-us',{
        weekday:"long"
    });


}

async function sequenceFunctions(city='Atlanta') {
    let weatherData = await getWeatherData(city);
    displayCurrentData(weatherData);
    displayNextData(weatherData);
    displayLastData(weatherData);
}

sequenceFunctions();


//search

searchTerm.addEventListener('input',function(eventInfo){
    console.log(searchTerm.value);
    sequenceFunctions(searchTerm.value)


});