├── weather.jpg
├── README.md
├── index.html
├── style.css
└── script.js
/weather.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LemonSync/Weather_App/HEAD/weather.jpg
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 | ⛅ Weather App 🌦
3 |
4 |
5 |
6 |
8 |
9 |
10 | 🌍 Aplikasi Cuaca Sederhana dengan Prakiraan 5 Hari 📊
11 |
12 |
13 |
14 | Cek Websitenya Klik Saya
15 |
16 |
17 |
18 |
21 |
22 | ---
23 |
24 | ## ✨ Tentang Proyek Ini
25 | **Weather App** adalah aplikasi cuaca berbasis web yang menampilkan informasi cuaca terkini dan prakiraan 5 hari ke depan. Dibangun menggunakan **HTML, CSS, dan JavaScript** dengan integrasi API cuaca.
26 |
27 | 🔹 **Fitur Utama**:
28 | - 🔍 **Cari Kota** – Masukkan nama kota untuk melihat cuaca saat ini
29 | - 📍 **Gunakan Lokasi** – Dapatkan informasi cuaca berdasarkan lokasi langsung
30 | - 🌡 **Detail Cuaca** – Menampilkan suhu, kecepatan angin, dan kelembapan
31 | - 📅 **Prakiraan 5 Hari** – Lihat cuaca dalam beberapa hari ke depan
32 |
33 | ---
34 |
35 |
36 | ## 🛠️ Teknologi yang Digunakan
37 |
38 |
42 |
43 | ---
44 |
45 | ## 📬 Kontak
46 | Jika ada pertanyaan atau ingin berkontribusi, hubungi saya di:
47 | - 🌐 **GitHub**: [LemonSync](https://github.com/LemonSync)
48 | - 📧 **Email**: [grouplemon0@gmail.com](mailto:grouplemon0@gmail.com)
49 | - 🐦 **Twitter**: [@SyncLemon](https://twitter.com/SyncLemon)
50 | - 📞 **WhatsApp**: [Lemon](https://wa.me/6282172175234)
51 |
52 | ---
53 |
54 |
55 |
57 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 | Weather App
13 | Weather Dashboard
21 |
22 |
29 |
30 |
31 |
32 |
_______ ( ㅤㅤㅤㅤㅤ )
33 | Temperature: ㅤㅤㅤ°C
34 | Angin:ㅤㅤM/S
35 | Kelembapan: ㅤ%
36 |
37 |
38 |
39 |
Prakiraan 5-Hari
40 |
41 |
42 | ( ㅤㅤㅤㅤㅤ )
43 | Temp: ㅤㅤ°C
44 | Angin: ㅤㅤM/S
45 | Kelembapan: ㅤ%
46 |
47 |
48 | ( ㅤㅤㅤㅤㅤ )
49 | Temp: ㅤㅤ°C
50 | Angin: ㅤㅤM/S
51 | Kelembapan: ㅤ%
52 |
53 |
54 | ( ㅤㅤㅤㅤㅤ )
55 | Temp: ㅤㅤ°C
56 | Angin: ㅤㅤM/S
57 | Kelembapan: ㅤ%
58 |
59 |
60 | ( ㅤㅤㅤㅤㅤ )
61 | Temp: ㅤㅤ°C
62 | Angin: ㅤㅤM/S
63 | Kelembapan: ㅤ%
64 |
65 |
66 | ( ㅤㅤㅤㅤㅤ )
67 | Temp: ㅤㅤ°C
68 | Angin: ㅤㅤM/S
69 | Kelembapan: ㅤ%
70 |
71 |
72 |
73 |
74 |
11 |
${city} (${weatherData.dt_txt.split(" ")[0]})
12 | Temperature: ${(weatherData.main.temp - 273.15).toFixed(2)}°C
13 | Wind: ${weatherData.wind.speed} M/S
14 | Humidity: ${weatherData.main.humidity}%
15 |
16 |
17 |
18 |
${weatherData.weather[0].description}
19 |
23 | (${weatherData.dt_txt.split(" ")[0]})
24 | Temp: ${(weatherData.main.temp - 273.15).toFixed(2)}°C
26 | Wind: ${weatherData.wind.speed} M/S
27 | Humidity: ${weatherData.main.humidity}%
28 | `;
29 | }
30 | };
31 |
32 | const getWeatherDetails = (city, lat, lon) => {
33 | const apiKey = "267cf21554b098b03a55b035485b7dc6";
34 | const url = `https://api.openweathermap.org/data/2.5/forecast?lat=${lat}&lon=${lon}&appid=${apiKey}`;
35 |
36 | fetch(url)
37 | .then(response => response.json())
38 | .then(data => {
39 | const uniqueDates = [];
40 | const filteredData = data.list.filter(item => {
41 | const date = new Date(item.dt_txt).getDate();
42 | if (!uniqueDates.includes(date)) {
43 | uniqueDates.push(date);
44 | return true;
45 | }
46 | return false;
47 | });
48 |
49 | cityInput.value = '';
50 | currentWeatherDiv.innerHTML = '';
51 | weatherCardsDiv.innerHTML = '';
52 |
53 | filteredData.forEach((weatherData, index) => {
54 | const weatherCard = createWeatherCard(city, weatherData, index);
55 | if (index === 0) {
56 | currentWeatherDiv.insertAdjacentHTML("beforeend", weatherCard);
57 | } else {
58 | weatherCardsDiv.insertAdjacentHTML("beforeend", weatherCard);
59 | }
60 | });
61 | })
62 | .catch(() => {
63 | alert("Terjadi kesalahan saat mengambil ramalan cuaca!");
64 | });
65 | };
66 |
67 | const getCityCoordinates = () => {
68 | const cityName = cityInput.value.trim();
69 | if (cityName === '') return;
70 |
71 | const apiKey = "267cf21554b098b03a55b035485b7dc6";
72 | const url = `https://api.openweathermap.org/geo/1.0/direct?q=${cityName}&limit=1&appid=${apiKey}`;
73 |
74 | fetch(url)
75 | .then(response => response.json())
76 | .then(data => {
77 | if (!data.length) {
78 | alert(`Harap coba lagi, Tidak ada koordinat yang ditemukan untuk ${cityName}`);
79 | return;
80 | }
81 |
82 | const { lat, lon, name } = data[0];
83 | getWeatherDetails(name, lat, lon);
84 | })
85 | .catch(() => {
86 | alert("Harap coba lagi, Terjadi kesalahan saat mengambil koordinat!");
87 | });
88 | };
89 |
90 | const getUserLocation = () => {
91 | if (navigator.geolocation) {
92 | navigator.geolocation.getCurrentPosition(
93 | (position) => {
94 | const { latitude, longitude } = position.coords;
95 | getWeatherDetails("Lokasi Anda", latitude, longitude);
96 | },
97 | () => {
98 | alert("Gagal mendapatkan loasimu!");
99 | }
100 | );
101 | } else {
102 | alert("Geolocation tidak dapat digunakan di browser Anda!");
103 | }
104 | };
105 |
106 | searchButton.addEventListener("click", getCityCoordinates);
107 | locationButton.addEventListener("click", getUserLocation);
108 |
--------------------------------------------------------------------------------
39 | 
40 | 
41 | 
18 |