Updated the div element as a form for search

sadanandpai · Jul 24, 2024 · c542d55 · c542d55
1 parent cd053b2
commit c542d55
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 11 deletions.
diff --git a/apps/javascript/src/challenges/weather-app/index.html b/apps/javascript/src/challenges/weather-app/index.html
@@ -8,10 +8,10 @@
   <body>
     <div class="card">
       <h1>CHECK THE WEATHER!!</h1>
-      <div class="search">
+      <form class="search">
         <input type="text" placeholder="Enter city name" spellcheck="false" />
         <button><img src="images/search.png" /></button>
-      </div>
+      </form>
       <div class="error">
         <!-- Error Message when wrong city is entered -->
         <p>INVALID CITY NAME!!!</p>

diff --git a/apps/javascript/src/challenges/weather-app/index.js b/apps/javascript/src/challenges/weather-app/index.js
@@ -62,13 +62,7 @@ searchBtn.addEventListener('click', () => {
   checkWeather(searchBox.value);
 });
 
-//select the search area and the enter press event listener to it.
-const searchDiv = document.querySelector('.search');
-
-searchDiv.addEventListener('keypress', function (event) {
-  //check MDN Reference for more on this but the event sends a key named "key" with the value as 'Enter'
-  if (event.key === 'Enter') {
-    event.preventDefault();
-    checkWeather(searchBox.value);
-  }
+document.querySelector('form').addEventListener('submit', (e) => {
+  e.preventDefault();
+  checkWeather(searchBox.value);
 });