This is a simple weather application built with Go, featuring a web-based GUI. The app allows users to enter a city name and view the current temperature and weather conditions for that location.
- Features
- Prerequisites
- Installation
- Usage
- Code Structure
- How It Works
- Customization
- Contributing
- License
- Web-based user interface
- Real-time weather data fetching
- Display of temperature and weather conditions for a specified city
- Go (version 1.16 or later)
- OpenWeatherMap API key
- Clone this repository or download the source code.
- Navigate to the project directory.
- Replace
"YOUR_API_KEY_HERE"
inmain.go
with your actual OpenWeatherMap API key.
- Open a terminal and navigate to the project directory.
- Run the following command to start the server:
go run main.go
- Open a web browser and go to
http://localhost:8080
. - Enter a city name in the input field and click "Get Weather" to see the current weather information.
The project consists of two main files:
main.go
: The Go server that handles API requests and serves the web interface.index.html
: The HTML file that provides the user interface.
This file contains the Go code for the server. Here's a breakdown of its main components:
type WeatherData struct {
Main struct {
Temp float64 `json:"temp"`
} `json:"main"`
Weather []struct {
Description string `json:"description"`
} `json:"weather"`
}
This struct defines the structure for parsing the JSON response from the OpenWeatherMap API. It extracts the temperature and weather description from the API response.
func main() {
http.HandleFunc("/", serveHome)
http.HandleFunc("/weather", handleWeather)
fmt.Println("Server is running on http://localhost:8080")
log.Fatal(http.ListenAndServe(":8080", nil))
}
The main() function sets up the HTTP server:
It registers two route handlers: one for the home page ("/") and one for weather data requests ("/weather"). It starts the server on port 8080 and logs any fatal errors.
func serveHome(w http.ResponseWriter, r *http.Request) {
http.ServeFile(w, r, "index.html")
}
This function serves the index.html file when a request is made to the root ("/") of the server.
func handleWeather(w http.ResponseWriter, r *http.Request) {
city := r.URL.Query().Get("city")
if city == "" {
http.Error(w, "City parameter is required", http.StatusBadRequest)
return
}
err := godotenv.Load(".env")
if err != nil {
log.Fatalf("Error loading .env file: %s", err)
}
apiKey := os.Getenv("openWeatherKey")
url := fmt.Sprintf("http://api.openweathermap.org/data/2.5/weather?q=%s&appid=%s&units=metric", city, apiKey)
resp, err := http.Get(url)
if err != nil {
http.Error(w, "Error fetching weather data", http.StatusInternalServerError)
return
}
defer resp.Body.Close()
body, err := ioutil.ReadAll(resp.Body)
if err != nil {
http.Error(w, "Error reading response body", http.StatusInternalServerError)
return
}
var weatherData WeatherData
err = json.Unmarshal(body, &weatherData)
if err != nil {
http.Error(w, "Error parsing JSON", http.StatusInternalServerError)
return
}
response := struct {
Temperature float64 `json:"temperature"`
Condition string `json:"condition"`
}{
Temperature: weatherData.Main.Temp,
Condition: weatherData.Weather[0].Description,
}
w.Header().Set("Content-Type", "application/json")
json.NewEncoder(w).Encode(response)
}
The handleWeather() function processes weather data requests:
- It extracts the city name from the query parameters.
- It constructs the OpenWeatherMap API URL with the city name and API key.
- It sends a GET request to the API and reads the response.
- It parses the JSON response into the WeatherData struct.
- It creates a new struct with the relevant weather information (temperature and condition).
- Finally, it sends this data back to the client as a JSON response.
This file contains the HTML, CSS, and JavaScript for the user interface. Key components include:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Head content -->
</head>
<body>
<div class="container">
<h1>Weather App</h1>
<input type="text" id="cityInput" placeholder="Enter city name">
<button onclick="getWeather()">Get Weather</button>
<div id="weatherInfo"></div>
</div>
<script>
// JavaScript code
</script>
</body>
</html>
This structure creates a simple interface with an input field for the city name, a button to fetch weather data, and a div to display the weather information.
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.container {
background-color: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
input, button {
margin: 10px 0;
padding: 5px;
}
</style>
These styles create a centered layout with a white container for the weather app interface.
function getWeather() {
const city = document.getElementById('cityInput').value;
fetch(`/weather?city=${encodeURIComponent(city)}`)
.then(response => response.json())
.then(data => {
const weatherInfo = document.getElementById('weatherInfo');
weatherInfo.innerHTML = `
<h2>Weather in ${city}</h2>
<p>Temperature: ${data.temperature}°C</p>
<p>Condition: ${data.condition}</p>
`;
})
.catch(error => {
console.error('Error:', error);
const weatherInfo = document.getElementById('weatherInfo');
weatherInfo.innerHTML = '<p>Error fetching weather data</p>';
});
}
This function is called when the user clicks the "Get Weather" button:
- It retrieves the city name from the input field.
- It sends a fetch request to the
/weather
endpoint with the city name. - When it receives the response, it updates the
weatherInfo
div with the temperature and weather condition. - If there's an error, it displays an error message.
- The user enters a city name and clicks "Get Weather".
- The JavaScript function
getWeather()
sends a request to the/weather
endpoint of the Go server. - The Go server receives the request and fetches weather data from the OpenWeatherMap API.
- The server processes the API response and sends back the relevant weather information as JSON.
- The JavaScript in the browser receives this data and updates the HTML to display the weather information.
You can customize this app by:
- Modifying the HTML and CSS in
index.html
to change the appearance of the app. - Adding more weather data fields in both the Go code and HTML to display additional information.
- Implementing error handling for cases like invalid city names or API errors.
Contributions to improve the app are welcome. Please feel free to submit a Pull Request.
This project is open source and available under the MIT License.