Add button to get forecast

Author: javitocor

dist/index.html

@@ -33,7 +33,8 @@ <h5>Write the location to get the weather</h5>
             <form id="searching" action="javascript:void(0);">
               <input class="form-class w-50" type="text" id="search" placeholder="Input your search keyword" name="search">
               <br><br>
-              <input type="submit" class="btn btn-warning" id="submit" value="Search!">
+              <input type="submit" class="btn btn-warning" id="submit" value="Weather">
+              <input type="submit" class="btn btn-warning" id="submit2" value="Forecast!">
             </form>
         </div>
     </main>

src/index.js

@@ -10,6 +10,9 @@ let help = helpers();
 const submit = document.getElementById('submit');
 submit.addEventListener('click', event.getSearch.bind(this,'search'));
 
+const submit2 = document.getElementById('submit2');
+submit2.addEventListener('click', event.getForecast);
+
 const search2 = document.getElementById('search2');
 search2.addEventListener('click', event.getSearch.bind(this, 'searchBar'));
 

src/js/events.js

@@ -18,13 +18,26 @@ const events = function () {
         }
     };  
 
+    async function getForecast(searchBar) {
+        try {
+            const value = (document.getElementById('search').value).toLowerCase();            
+            const url = `https://api.openweathermap.org/data/2.5/forecast?q=${value}&units=metric&appid=903507f17d707fecd352d38301efba77`;            
+            const response = await fetch(url, { mode: 'cors' });
+            const cityData = await response.json();
+            showFlow(cityData);
+        } catch (error) {
+            console.error('Error:', error);
+            alert('Could not find the location');
+        }
+    }; 
+
     function showFlow(data) {
         dom().fillCard(data);
         dom().imageSwitch(data);
         dom().show();
     };
 
-    return { getSearch, showFlow, }
+    return { getSearch, showFlow, getForecast, }
 };
 
 export { events }