Weather App : Improved Suggestions and inputs where city names can be autofilled/autocomplete

index.html

@@ -13,10 +13,13 @@
     <div class="w-card">
 
         <div class="searchbox">
-            <input type="text" placeholder="Enter city name" spellcheck="false">
+            <input id="suggestions" type="text" placeholder="Enter city name" spellcheck="false" onkeyup="autocomplete()">
             <button>Search</button>
+            <ul id="suggestions-list" class="suggestions-list"></ul> <!-- Add this line -->
         </div>
         <div class="error">
+            <div id="error-message" class="error-message"></div>
+
             <p>Invalid City name </p>
         </div>
 
@@ -39,13 +42,12 @@ <h2 class="city" id="city-name">New Delhi</h2>
                         <p class="wind">8.3 kmph</p>
                         <p>Wind Speed</p>
                     </div>
+
                 </div>
             </div>
 
         </div>
     </div>
-
 <script src="script.js"></script>
-
 </body>
-</html>
+</html>

script.js

@@ -6,6 +6,8 @@ const searchBox = document.querySelector(".searchbox input");
 const searchBtn = document.querySelector(".searchbox button")
 const weatherIcon = document.querySelector(".weather-icon");
 
+
+
 // Function for the main task (getting the data from API and displaying it)
 
 async function checkWeather(city){
@@ -57,17 +59,101 @@ async function checkWeather(city){
     searchBox.value = "";
 
 }
+//function to handle API response 
+function fetchWeather(city) {
+    fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=YOUR_API_KEY`)
+        .then(response => {
+            if (!response.ok) {
+                throw new Error('City not found');
+            }
+            return response.json();
+        })
+        .then(data => {
+            // Existing code to update UI with weather data
+        })
+        .catch(error => {
+            // Update UI to show error message
+            document.getElementById('error-message').textContent = error.message;
+        });
+}
+//function for autocomplete
+async function autocomplete() {
+    const input = document.getElementById('city-input').value;
+    const suggestionsDiv = document.getElementById('suggestions');
+    if (input.length < 3) {
+        suggestionsDiv.innerHTML = ''; // Clear suggestions if input is less than 3 characters
+        return;
+    }
 
+    const response = await fetch(`https://api.openweathermap.org/data/2.5/find?q=${input}&type=like&sort=population&cnt=5&appid=${apiKey}`);
+    const data = await response.json();
+
+    suggestionsDiv.innerHTML = ''; // Clear previous suggestions
+
+    data.list.forEach(city => {
+        const suggestionItem = document.createElement('div');
+        suggestionItem.textContent = `${city.name}, ${city.sys.country}`;
+        suggestionItem.onclick = () => {
+            document.getElementById('city-input').value = city.name;
+            suggestionsDiv.innerHTML = ''; // Clear suggestions after selecting a city
+            checkWeather(city.name); // Fetch weather for selected city
+        };
+        suggestionsDiv.appendChild(suggestionItem);
+    });
+}
+//autocomplete
+const cities = [
+    "New Delhi",
+    "Mumbai",
+    "Bangalore",
+    "Kolkata",
+    "Chennai",
+    "Hyderabad",
+    "Ahmedabad",
+    "Pune",
+    "Jaipur",
+    "Surat",
+    // Add more city names as needed
+];
+
+function autocomplete() {
+    const input = document.getElementById('suggestions');
+    const filter = input.value.toLowerCase();
+    const suggestionsList = document.getElementById('suggestions-list');
+    suggestionsList.innerHTML = ''; // Clear previous suggestions
+
+    if (filter) {
+        const filteredCities = cities.filter(city => city.toLowerCase().includes(filter));
+
+        if (filteredCities.length > 0) {
+            suggestionsList.style.display = 'block'; // Show suggestions
+            filteredCities.forEach(city => {
+                const li = document.createElement('li');
+                li.textContent = city;
+                li.onclick = () => selectCity(city); // Add click event to select city
+                suggestionsList.appendChild(li);
+            });
+        } else {
+            suggestionsList.style.display = 'none'; // Hide if no matches
+        }
+    } else {
+        suggestionsList.style.display = 'none'; // Hide if input is empty
+    }
+}
+searchBox.addEventListener('keyup', autocomplete);
+function selectCity(city) {
+    document.getElementById('suggestions').value = city; // Set input value
+    document.getElementById('suggestions-list').style.display = 'none'; // Hide suggestions
+}
 // Event listener for the button
 
 searchBtn.addEventListener("click", ()=>{
     checkWeather(searchBox.value);
 })
-
 // Enter button(keyCode = 13) event listener
 
 searchBox.addEventListener('keyup', function(event) {
     if (event.keyCode === 13) {
         checkWeather(searchBox.value);
     }
-});
+});

style.css

@@ -8,6 +8,11 @@
 body{
     background-color: rgb(23, 23, 23);
 }
+.error-message {
+    color: red;
+    font-weight: bold;
+    margin-top: 10px;
+}
 
 .w-card{
     width: 90%;
@@ -96,4 +101,25 @@ button:hover{
     text-align: left;
     margin: 8px 0px;
     display: none;
-}
+}
+.suggestions-list {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+    border: 1px solid #323232;
+    max-height: 150px;
+    overflow-y: auto;
+    display: none; /* Initially hidden */
+    position: absolute; /* Position it below the input */
+    background-color: rgb(82, 82, 82);
+    z-index: 1000; /* Ensure it appears above other elements */
+}
+
+.suggestions-list li {
+    padding: 10px;
+    cursor: pointer;
+}
+
+.suggestions-list li:hover {
+    background-color: #585656;
+}