├── index.html ├── script.js └── style.css /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Weather App 9 | 10 | 11 | 12 |
13 |
14 | 15 |
16 |
17 | 12:30 PM 18 |
19 |
20 | Monday, 25 May 21 |
22 | 23 |
24 | 25 | 26 |
27 |
28 | 29 |
30 |
Asia/Kolkata
31 |
IN
32 |
33 |
34 | 35 | 36 |
37 | 38 |
39 |
40 | weather icon 41 |
42 |
Monday
43 |
Night - 25.6° C
44 |
Day - 35.6° C
45 |
46 |
47 | 48 |
49 |
50 |
Tue
51 | weather icon 52 |
Night - 25.6° C
53 |
Day - 35.6° C
54 |
55 |
56 |
Wed
57 | weather icon 58 |
Night - 25.6° C
59 |
Day - 35.6° C
60 |
61 |
62 |
Thur
63 | weather icon 64 |
Night - 25.6° C
65 |
Day - 35.6° C
66 |
67 |
68 |
Fri
69 | weather icon 70 |
Night - 25.6° C
71 |
Day - 35.6° C
72 |
73 |
74 |
Sat
75 | weather icon 76 |
Night - 25.6° C
77 |
Day - 35.6° C
78 |
79 | 80 |
81 |
82 | 83 | 84 | 85 | 86 | 87 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | const timeEl = document.getElementById('time'); 2 | const dateEl = document.getElementById('date'); 3 | const currentWeatherItemsEl = document.getElementById('current-weather-items'); 4 | const timezone = document.getElementById('time-zone'); 5 | const countryEl = document.getElementById('country'); 6 | const weatherForecastEl = document.getElementById('weather-forecast'); 7 | const currentTempEl = document.getElementById('current-temp'); 8 | 9 | 10 | const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'] 11 | const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; 12 | 13 | const API_KEY ='49cc8c821cd2aff9af04c9f98c36eb74'; 14 | 15 | setInterval(() => { 16 | const time = new Date(); 17 | const month = time.getMonth(); 18 | const date = time.getDate(); 19 | const day = time.getDay(); 20 | const hour = time.getHours(); 21 | const hoursIn12HrFormat = hour >= 13 ? hour %12: hour 22 | const minutes = time.getMinutes(); 23 | const ampm = hour >=12 ? 'PM' : 'AM' 24 | 25 | timeEl.innerHTML = (hoursIn12HrFormat < 10? '0'+hoursIn12HrFormat : hoursIn12HrFormat) + ':' + (minutes < 10? '0'+minutes: minutes)+ ' ' + `${ampm}` 26 | 27 | dateEl.innerHTML = days[day] + ', ' + date+ ' ' + months[month] 28 | 29 | }, 1000); 30 | 31 | getWeatherData() 32 | function getWeatherData () { 33 | navigator.geolocation.getCurrentPosition((success) => { 34 | 35 | let {latitude, longitude } = success.coords; 36 | 37 | fetch(`https://api.openweathermap.org/data/2.5/onecall?lat=${latitude}&lon=${longitude}&exclude=hourly,minutely&units=metric&appid=${API_KEY}`).then(res => res.json()).then(data => { 38 | 39 | console.log(data) 40 | showWeatherData(data); 41 | }) 42 | 43 | }) 44 | } 45 | 46 | function showWeatherData (data){ 47 | let {humidity, pressure, sunrise, sunset, wind_speed} = data.current; 48 | 49 | timezone.innerHTML = data.timezone; 50 | countryEl.innerHTML = data.lat + 'N ' + data.lon+'E' 51 | 52 | currentWeatherItemsEl.innerHTML = 53 | `
54 |
Humidity
55 |
${humidity}%
56 |
57 |
58 |
Pressure
59 |
${pressure}
60 |
61 |
62 |
Wind Speed
63 |
${wind_speed}
64 |
65 | 66 |
67 |
Sunrise
68 |
${window.moment(sunrise * 1000).format('HH:mm a')}
69 |
70 |
71 |
Sunset
72 |
${window.moment(sunset*1000).format('HH:mm a')}
73 |
74 | 75 | 76 | `; 77 | 78 | let otherDayForcast = '' 79 | data.daily.forEach((day, idx) => { 80 | if(idx == 0){ 81 | currentTempEl.innerHTML = ` 82 | weather icon 83 |
84 |
${window.moment(day.dt*1000).format('dddd')}
85 |
Night - ${day.temp.night}°C
86 |
Day - ${day.temp.day}°C
87 |
88 | 89 | ` 90 | }else{ 91 | otherDayForcast += ` 92 |
93 |
${window.moment(day.dt*1000).format('ddd')}
94 | weather icon 95 |
Night - ${day.temp.night}°C
96 |
Day - ${day.temp.day}°C
97 |
98 | 99 | ` 100 | } 101 | }) 102 | 103 | 104 | weatherForecastEl.innerHTML = otherDayForcast; 105 | } -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;400;700&display=swap'); 2 | 3 | *{ 4 | box-sizing: border-box; 5 | margin:0; 6 | padding:0; 7 | } 8 | 9 | body{ 10 | background:url('https://images.unsplash.com/photo-1621274403997-37aace184f49?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1'); 11 | background-repeat: no-repeat; 12 | background-size:cover; 13 | overflow:hidden; 14 | height: 100vh; 15 | font-family: 'Poppins', sans-serif; 16 | } 17 | 18 | .container{ 19 | padding: 20px 70px; 20 | color:#fff; 21 | } 22 | 23 | .current-info{ 24 | display: flex; 25 | justify-content: space-between; 26 | flex-wrap: wrap; 27 | } 28 | .date-container{ 29 | font-weight: 100; 30 | } 31 | .date-container .time{ 32 | font-size: 70px; 33 | } 34 | 35 | .date-container #am-pm{ 36 | font-size: 30px; 37 | margin-left: 20px; 38 | } 39 | 40 | .date-container .date{ 41 | font-size: 30px; 42 | } 43 | 44 | .place-container{ 45 | text-align: end; 46 | } 47 | 48 | .place-container .time-zone{ 49 | font-size: 30px; 50 | font-weight: 100; 51 | } 52 | 53 | .place-container .country{ 54 | font-size: 12px; 55 | font-weight: 700; 56 | } 57 | 58 | .current-info .others{ 59 | display: flex; 60 | flex-direction: column; 61 | background: rgba(24,24,27, 0.6); 62 | padding:20px; 63 | border-radius: 10px; 64 | margin: 10px 0; 65 | border: 1px solid #eee; 66 | } 67 | 68 | .current-info .others .weather-item{ 69 | display: flex; 70 | justify-content: space-between; 71 | } 72 | 73 | 74 | .future-forecast{ 75 | background: rgba(24,24,27,0.8); 76 | padding: 25px; 77 | position: fixed; 78 | bottom: 0; 79 | display: flex; 80 | color:white; 81 | width: 100%; 82 | align-items: center; 83 | justify-content: center; 84 | overflow-y: hidden; 85 | } 86 | 87 | .future-forecast .today{ 88 | display: flex; 89 | align-items: center; 90 | justify-content: center; 91 | border: 1px solid #eee; 92 | border-radius: 10px; 93 | padding:15px; 94 | padding-right: 40px; 95 | border-radius: 10px; 96 | background: rgba(0,0,0,0.2) 97 | } 98 | 99 | .future-forecast .today .day{ 100 | padding: 5px 15px; 101 | background: #3c3c44; 102 | border-radius: 50px; 103 | text-align: center; 104 | } 105 | 106 | .future-forecast .today .temp{ 107 | font-size: 18px; 108 | padding-top: 15px; 109 | } 110 | 111 | .future-forecast .weather-forecast{ 112 | display: flex; 113 | } 114 | 115 | .weather-forecast .weather-forecast-item{ 116 | display: flex; 117 | flex-direction: column; 118 | align-items: center; 119 | justify-content: center; 120 | margin: 0 10px; 121 | border: 1px solid #eee; 122 | padding: 15px; 123 | border-radius: 10px; 124 | background: rgba(0,0,0,0.2) 125 | } 126 | 127 | .weather-forecast .weather-forecast-item .day{ 128 | padding: 5px 15px; 129 | background: #3C3C44; 130 | border-radius: 50px; 131 | text-align: center; 132 | } 133 | 134 | .weather-forecast .weather-forecast-item .temp{ 135 | font-weight: 100; 136 | font-size: 12px; 137 | } 138 | 139 | 140 | @media only screen and (max-width:730px){ 141 | 142 | .container{ 143 | padding: 20px; 144 | } 145 | 146 | .future-forecast{ 147 | justify-content: start; 148 | align-items: none; 149 | overflow-y: scroll; 150 | } 151 | 152 | .future-forecast .today .temp{ 153 | font-size: 16px; 154 | } 155 | 156 | .date-container .time{ 157 | font-size: 50px; 158 | } 159 | 160 | .date-container #am-pm{ 161 | font-size: 20px; 162 | } 163 | 164 | .date-container .date{ 165 | font-size: 20px; 166 | } 167 | 168 | .place-container{ 169 | text-align: end; 170 | margin-top: 15px; 171 | } 172 | 173 | .place-container .time-zone{ 174 | font-size: 20px; 175 | } 176 | 177 | .current-info .others{ 178 | padding: 12px; 179 | } 180 | 181 | .current-info .others .weather-item{ 182 | font-size: 14px; 183 | } 184 | 185 | } 186 | 187 | @media only screen and (max-width: 1400px){ 188 | .future-forecast{ 189 | justify-content: start; 190 | align-items: none; 191 | overflow-x: scroll; 192 | } 193 | } --------------------------------------------------------------------------------