Updated functions

[Thorfin69]

Hii there i fixed that issue on your website i just updated search function and added event handler in SearchEngine component

#New search funtion

const search = async (event) => {
    event.preventDefault();
    if (event.type === "click" || (event.type === "keypress" && event.key === "Enter")) {
      if (!query) return;

      setWeather({ ...weather, loading: true });
      const apiKey = "b03a640e5ef6980o4da35b006t5f2942";
      const url = `https://api.shecodes.io/weather/v1/current?query=${query}&key=${apiKey}`;

      try {
        const res = await axios.get(url);
        console.log("res", res);
        setWeather({ data: res.data, loading: false, error: false });
      } catch (error) {
        setWeather({ ...weather, data: {}, error: true });
        console.log("error", error);
      }
    }
  };

for SearchEngine component i added

onKeyPress={handleKeyPress}

<input
        type="text"
        className="city-search"
        placeholder="enter city name"
        name="query"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        onKeyPress={handleKeyPress}
      />

this is the handleKeyPress function

const handleKeyPress = (e) => {
   if (e.key === 'Enter') {
     search(e);
   }
 };

in button i added

onCLick={search}
<button onClick={search}><i className="fas fa-search" style={{ fontSize: "18px" }}></i></button>

it fixed

test-final.mp4

[s-shemmee]

Thanks for the contribution, @Thorfin69! Your changes have been merged. The updates to the search function and the new event handler have greatly improved the usability and performance of the app. The search functionality is now more robust, and the code is cleaner.

Specific improvements include:

• Combined click and keypress events into a single function for better handling.
• Added a check to ensure the search query is not empty before making the API call.
• Wrapped the API call in a try-catch block for better error handling.
• Simplified the SearchEngine component with a new handleKeyPress function.

Thank you again, @Thorfin69, for your help. Looking forward to more contributions from you!

[Thorfin69]

@s-shemmee

This was my first contribution.
Thank you 🎀 for the kind words! I'm glad to hear that the improvements to the search function and event handler have enhanced the app's usability and performance. It was a rewarding experience combining the click and keypress events, adding checks for non-empty search queries, wrapping the API call in a try-catch block, and simplifying the SearchEngine component. Looking forward to more great work together!

[s-shemmee]

Thanks, @Thorfin69! Great job on your first contribution—really helped improve the app. Looking forward to working together more!✨