Latihan Ngoding Bareng Decomus WeatherApp
Kerangka yang digunakan didalam HTML
| Elemen HTML | Deskripsi |
|---|---|
| <body> | Elemen tubuh dokumen HTML yang berisi konten yang akan ditampilkan pada halaman web. |
| <div class="container"> | Div utama yang digunakan untuk mengelompokkan konten halaman. |
| <div class="search-box"> | Div yang berisi kotak pencarian dan tombol pencarian. |
| <input type="text" placeholder="Enter Your Location" class="input-box"> | Input teks untuk memasukkan lokasi. |
| <button class="fa-solid fa-magnifying-glass" id="searchBtn"></button> | Tombol pencarian dengan ikon Font Awesome. |
| <div class="location-not-found"> | Div yang akan ditampilkan jika lokasi tidak ditemukan. |
| <h1>Sorry, Location not found!!!</h1> | Judul pesan kesalahan. |
| <img src="/assets/404.png" alt="404 Error"> | Gambar kesalahan. |
| <div class="weather-body"> | Div yang berisi informasi cuaca. |
| <img src="/assets/cloud.png" alt="Weather Image" class="weather-img"> | Gambar cuaca. |
| <div class="weather-box"> | Div yang berisi informasi cuaca. |
| <p class="temperature">0 <sup>°C</sup></p> | Paragraf yang menampilkan suhu dalam derajat Celsius. |
| <p class="description">light rain</p> | Paragraf yang menampilkan deskripsi cuaca. |
| <div class="weather-details"> | Div yang berisi detail cuaca. |
| <div class="humidity"> | Div yang berisi informasi kelembaban cuaca. |
| <i class="fa-sharp fa-solid fa-droplet"></i> | Ikon yang menunjukkan kelembaban. |
| <div class="text"> | Div yang berisi teks informasi. |
| <span id="humidity">45%</span> | Elemen yang menampilkan nilai kelembaban. |
| <p>Humidity</p> | Paragraf yang menampilkan label "Humidity". |
| <div class="wind"> | Div yang berisi informasi kecepatan angin. |
| <i class="fa-solid fa-wind"></i> | Ikon yang menunjukkan kecepatan angin. |
| <div class="text"> | Div yang berisi teks informasi. |
| <span id="wind-speed">12Km/H</span> | Elemen yang menampilkan nilai kecepatan angin. |
| <p>Wind Speed</p> | Paragraf yang menampilkan label "Wind Speed". |
Kerangka yang digunakan didalam CSS
| Elemen CSS | Deskripsi |
|---|---|
| * | Selector universal yang memengaruhi semua elemen. Mengatur margin dan padding menjadi 0, box-sizing menjadi border-box, border menjadi none, outline menjadi none, dan font-family menjadi sans-serif. |
| body | Selector untuk elemen <body>. Mengatur tinggi minimum menjadi 100vh, menampilkan elemen sebagai flex container yang terpusat secara horizontal dan vertikal, dan mengatur latar belakang menjadi #3ec0e0. |
| .container | Selector untuk elemen dengan kelas "container". Mengatur lebar menjadi 400px, tinggi yang menyesuaikan kontennya, latar belakang menjadi #fff, diberi border-radius 12px untuk sudut yang melengkung, dan memiliki padding 28px. |
| .search-box input | Selector untuk elemen input di dalam elemen dengan kelas "search-box". Mengatur lebar menjadi 100%, ukuran font menjadi 20px, teks menjadi kapital, warna teks menjadi hitam, latar belakang menjadi #e6f5fb, padding 12px di atas dan bawah serta 16px di kiri dan kanan, diberi border-radius 14px. |
| .search-box input ::placeholder | Selector untuk pseudo-elemen placeholder pada elemen input di dalam elemen dengan kelas "search-box". Mengatur warna teks placeholder menjadi hitam. |
| .search-box button | Selector untuk elemen button di dalam elemen dengan kelas "search-box". Mengatur lebar dan tinggi menjadi 46px, latar belakang menjadi #e6f5fb, diberi border-radius 50%, menampilkan kursor pointer, dan ukuran font menjadi 20px. |
| .search-box button:hover | Selector untuk elemen button di dalam elemen dengan kelas "search-box" saat digerakkan (hover). Mengatur warna teks menjadi putih dan latar belakang menjadi #ababab. |
| .weather-body | Selector untuk elemen dengan kelas "weather-body". Mengatur tampilan elemen menjadi flex container dengan penataan konten dan arah kolom, serta margin atas sebesar 20px. Awalnya, elemen ini tidak ditampilkan (display: none). |
| .weather-body img | Selector untuk elemen <img> di dalam elemen dengan kelas "weather-body". Mengatur lebar menjadi 60%. |
| .weather-box | Selector untuk elemen dengan kelas "weather-box". Mengatur tampilan elemen ini dan seluruh kontennya menjadi tengah, serta margin atas sebesar 20px. |
| .weather-box .temperature | Selector untuk elemen dengan kelas "temperature" di dalam elemen "weather-box". Mengatur ukuran font menjadi 40px, ketebalan font menjadi 800, dan menambahkan elemen <sup> sebagai anak dengan ukuran font 20px dan ketebalan font 600. |
| .weather-box .description | Selector untuk elemen dengan kelas "description" di dalam elemen "weather-box". Mengatur ukuran font menjadi 20px, ketebalan font menjadi 700, dan mengubah teks menjadi kapital. |
| .weather-details | Selector untuk elemen dengan kelas "weather-details". Mengatur lebar menjadi 100% dan menampilkan elemen ini sebagai flex container dengan penataan konten terdistribusi seimbang di antara elemen-elemen anaknya. |
| .humidity, .wind | Selector untuk elemen dengan kelas "humidity" dan "wind". Mengatur tampilan elemen ini sebagai flex container dengan anak-anak yang diatur untuk menampilkan konten secara vertikal. |
| .humidity | Selector untuk elemen dengan kelas "humidity". Mengatur margin kiri sebesar 20px. |
| .wind | Selector untuk elemen dengan kelas "wind". Mengatur margin kanan sebesar 20px. |
| .weather-details i | Selector untuk elemen <i> di dalam elemen dengan kelas "weather-details". Mengatur ukuran font menjadi 36px. |
| .weather-details .text | Selector untuk elemen dengan kelas "text" di dalam elemen "weather-details". Mengatur margin kiri sebesar 10px dan ukuran font menjadi 16px. |
| .text span | Selector untuk elemen <span> di dalam elemen dengan kelas "text". Mengatur ukuran font menjadi 20px dan ketebalan font menjadi 700. |
| .location-not-found | Selector untuk elemen dengan kelas "location-not-found". Mengatur margin atas sebesar 20px dan menampilkan elemen ini sebagai flex container dengan penataan konten, arah kolom, dan posisi yang terpusat. |
| .location-not-found h1 | Selector untuk elemen <h1> di dalam elemen dengan kelas "location-not-found". Mengatur ukuran font menjadi 20px, warna teks menjadi #6b6b6b, dan margin bawah sebesar 15px. |
| .location-not-found img | Selector untuk elemen <img> di dalam elemen dengan kelas "location-not-found". Mengatur lebar menjadi 80%. |
Kerangka yang digunakan didalam Javascript
| Kode JavaScript | Penjelasan |
|---|---|
const inputBox = document.querySelector(".input-box"); |
Menggunakan document.querySelector untuk memilih elemen HTML dengan kelas CSS "input-box", yang merupakan kotak input untuk memasukkan lokasi. |
const searchBtn = document.getElementById("searchBtn"); |
Menggunakan document.getElementById untuk memilih elemen HTML dengan ID "searchBtn", yang merupakan tombol pencarian. |
const weather_img = document.querySelector(".weather-img"); |
Menggunakan document.querySelector untuk memilih elemen HTML dengan kelas CSS "weather-img", yang akan menampilkan gambar cuaca. |
const temperature = document.querySelector(".temperature"); |
Menggunakan document.querySelector untuk memilih elemen HTML dengan kelas CSS "temperature", yang akan menampilkan temperatur cuaca. |
const description = document.querySelector(".description"); |
Menggunakan document.querySelector untuk memilih elemen HTML dengan kelas CSS "description", yang akan menampilkan deskripsi cuaca. |
const humidity = document.getElementById("humidity"); |
Menggunakan document.getElementById untuk memilih elemen HTML dengan ID "humidity", yang akan menampilkan kelembaban cuaca. |
const wind_speed = document.getElementById("wind-speed"); |
Menggunakan document.getElementById untuk memilih elemen HTML dengan ID "wind-speed", yang akan menampilkan kecepatan angin cuaca. |
const location_not_found = document.querySelector(".location-not-found"); |
Menggunakan document.querySelector untuk memilih elemen HTML dengan kelas CSS "location-not-found", yang akan menampilkan pesan "Lokasi Tidak Ditemukan". |
const weather_body = document.querySelector(".weather-body"); |
Menggunakan document.querySelector untuk memilih elemen HTML dengan kelas CSS "weather-body", yang akan menampilkan wadah informasi cuaca. |
| <input> | Input untuk memasukkan lokasi. |
| <button> | Tombol pencarian dengan ikon. |
| <div class="location-not-found"> | Pesan yang ditampilkan jika lokasi tidak ditemukan. |
| <h1> | Pesan kesalahan. |
| <img> | Gambar kesalahan 404. |
| <img class="weather-img"> | Gambar cuaca. |
| <p class="temperature"> | Temperatur dalam derajat Celsius. |
| <p class="description"> | Deskripsi cuaca. |
| <div class="weather-details"> | Informasi kelembaban dan kecepatan angin. |
| <div class="search-box"> | Wadah untuk input lokasi dan tombol pencarian. |
| <div class="weather-body"> | Wadah untuk menampilkan informasi cuaca. |
| <div class="weather-box"> | Wadah untuk menampilkan temperatur dan deskripsi cuaca. |
| <p class="temperature"> | Temperatur dalam derajat Celsius. |
| <sup>°C</sup> | Superskrip untuk menunjukkan satuan derajat Celsius. |
| <p class="description"> | Deskripsi cuaca, misalnya "hujan ringan". |
| <div class="weather-details"> | Wadah untuk menampilkan detail cuaca seperti kelembaban dan kecepatan angin. |
| <div class="humidity"> | Bagian yang menampilkan kelembaban cuaca. |
| <div class="wind"> | Bagian yang menampilkan kecepatan angin cuaca. |
| <i class="fa-sharp fa-solid fa-droplet"> | Ikon tetes air (simbol kelembaban). |
| <i class="fa-solid fa-wind"> | Ikon angin. |
| <p> | Paragraf yang menampilkan nilai kelembaban atau kecepatan angin. |
| <span> | Elemen untuk menampilkan nilai persentase kelembaban atau kecepatan angin. |