"Get Weather" Button Redirects to a Blank Page Instead of Showing Weather Results

[Shreyhac]

Has this bug been raised before?

• I have checked "open" AND "closed" issues and this is not a duplicate

Description

When entering a location in the "Weather" input field and pressing Enter or clicking "Get Weather," the page currently redirects to a new, blank page without displaying any weather information.
Current Behavior:

Enter location in the weather input field.
Press Enter or click "Get Weather."
The system redirects to a blank page, with no weather data being displayed.
Proposed Solutions:

Redirect to a Weather Source (e.g., Google Weather):
Upon pressing Enter or clicking the "Get Weather" button, the user should be redirected to Google Weather (or any weather service) for the entered location.

Example URL format for redirection:
https://www.google.com/search?q=weather+

Steps to Reproduce

Open the weather widget.
Enter any location (e.g., "New York").
Press Enter or click "Get Weather."
The result is a redirect to a blank page.

Screenshots

Do you want to work on this issue?

Yes

If "yes" to above, please explain how you would technically implement this

To implement this technically, I can handle the issue by either redirecting the user to a weather search result on Google or displaying weather data directly on my page using a weather API like OpenWeather. Here’s how I can do both methods:

Option 1: Redirect to Google Weather
Steps:
HTML Form: I likely already have a form for the weather input and the button.
JavaScript for Redirect: I can add a submit event listener to the form. When the user clicks "Get Weather" or presses Enter, the JavaScript will trigger a redirect to a Google search with the weather query.
Code Implementation:
Modify My HTML (if needed):

How it works:
The submit event listener captures the form submission.
It prevents the default behavior, grabs the location entered, and constructs a Google search query with the location.
Then, it redirects the browser to the Google search page using window.location.href.

Option 2: Display Weather on the Same Page Using OpenWeather API
If I want to display the weather directly on the page without redirecting to Google, I can use the OpenWeather API (or any weather API). Here’s a step-by-step approach to implement it:

Steps:
Get an API Key from OpenWeather.
Modify My HTML to show weather results.
JavaScript for Fetching Weather Data using the API.

[mohitahlawat2001]

i assigned it to you

make sure you star repo ⭐ and follow on github , giving hacktoberfest tag after this step