├── MyWeatherApp ├── src │ └── main │ │ ├── webapp │ │ ├── META-INF │ │ │ └── MANIFEST.MF │ │ ├── WEB-INF │ │ │ ├── lib │ │ │ │ └── gson-2.8.5.jar │ │ │ └── web.xml │ │ ├── images │ │ │ └── weather-logo (2).png │ │ ├── index.html │ │ ├── myScript.js │ │ ├── index.jsp │ │ └── style.css │ │ └── java │ │ └── MyPackage │ │ └── MyServlet.java └── build │ └── classes │ └── MyPackage │ └── MyServlet.class └── README.md /MyWeatherApp/src/main/webapp/META-INF/MANIFEST.MF: -------------------------------------------------------------------------------- 1 | Manifest-Version: 1.0 2 | Class-Path: 3 | 4 | -------------------------------------------------------------------------------- /MyWeatherApp/build/classes/MyPackage/MyServlet.class: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubham-Bhoite/Weather-App/main/MyWeatherApp/build/classes/MyPackage/MyServlet.class -------------------------------------------------------------------------------- /MyWeatherApp/src/main/webapp/WEB-INF/lib/gson-2.8.5.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubham-Bhoite/Weather-App/main/MyWeatherApp/src/main/webapp/WEB-INF/lib/gson-2.8.5.jar -------------------------------------------------------------------------------- /MyWeatherApp/src/main/webapp/images/weather-logo (2).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubham-Bhoite/Weather-App/main/MyWeatherApp/src/main/webapp/images/weather-logo (2).png -------------------------------------------------------------------------------- /MyWeatherApp/src/main/webapp/WEB-INF/web.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | MyWeatherApp 4 | 5 | index.html 6 | index.jsp 7 | index.htm 8 | default.html 9 | default.jsp 10 | default.htm 11 | 12 | -------------------------------------------------------------------------------- /MyWeatherApp/src/main/webapp/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Weather App 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 |

Welcome to the Weather Web App

16 | 17 |
18 | 19 | 20 |
21 |
22 | 23 | 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

🌦️ Weather App

2 | 3 | 4 | ## 📌 Project Description : 5 | 6 | The **Weather App** is a web-based application that provides real-time weather information for any city around the world. It uses the **OpenWeather API** to fetch weather data such as temperature, humidity, wind speed, and more. The app is built using a combination of **HTML**, **CSS**, and **JavaScript** on the frontend, and **Java** , **Servlets** and **JSP** on the backend. 7 | 8 | ## 🚀 Technologies Used : 9 | 10 | - HTML 11 | - CSS 12 | - JavaScript 13 | - Java 14 | - Servlet 15 | - JSP 16 | - OpenWeather API 17 | 18 |

📷 Screenshots

19 | 20 |

21 | Screenshot 1
22 | Screenshot 2
23 | Screenshot 3 24 |

25 | 26 | 27 | 28 | 29 | 30 | ## 🧑‍💻 Features : 31 | 32 | - Search weather by City name. 33 | - Displays temperature, humidity, weather description, wind speed, etc. 34 | - Responsive and user-friendly interface. 35 | - API integration with OpenWeather for real-time data. 36 | 37 | ## 🔧 How to Run the Project : 38 | 39 | 1. Clone the repository 40 | ```bash 41 | git clone https://github.com/Shubham-Bhoite/Weather-App.git 42 | 43 | 2. Open the project in your IDE (e.g., Eclipse or IntelliJ). 44 | 45 | 3. Set up your servlet container (e.g., Apache Tomcat). 46 | 47 | 4. Download and include any required libraries (e.g., for HTTP requests or JSON parsing). 48 | 49 | 5. Get your API key from OpenWeather. 50 | 51 | 6. Insert your API key into the appropriate section of your Java code. 52 | 53 | 7. Deploy and run the project on your local server. 54 | 55 | 8. Open your browser and go to: 56 | ```bash 57 | http://localhost:8080/Weather-App/ 58 | 59 | ## 🙋‍♂️ Author 60 | 61 | - **Shubham Rama Bhoite** 62 | [GitHub](https://github.com/Shubham-Bhoite) | [LinkedIn](https://www.linkedin.com/in/shubham-bhoite98/) 63 | 64 | -------------------------------------------------------------------------------- /MyWeatherApp/src/main/webapp/myScript.js: -------------------------------------------------------------------------------- 1 | 2 | var weatherIcon = document.getElementById("weather-icon"); 3 | 4 | var val = document.getElementById("wc").value; 5 | switch (val) { 6 | case 'Clouds': 7 | weatherIcon.src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwFTkt5z_dxU6w1UnS1PxiZV3HDiPGsAW5Lrsp09MnlCmkQre9GzO8MnGytaaY1eZoqBN6SMJ4U578_uDtiuXswovr1T3o-Kt5KK0mlN_zC0RDodJFaKHQ3Uk-HIZ3vuMvAKNJi8DDFwWA7F6BOxz78Oh-UePwJTuc3PG0ZIZypPE1xlMPl5z46joaEw/s320/Clouds.png"; 8 | break; 9 | case 'Clear': 10 | weatherIcon.src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7pmzNCftryAfpa1YBSzVeYtjgxDQnw09Ug0HVV47J8GEtHPYTH9hJgZ2M1k0YgE0pcZ1qekr4C14zyPCiVuQAfXLClK8Ww3hYB6v77yElP7Lo5BnUKo4n-w6yB17FAbw51WST6YKS0GMwyA4fYNxOZxEyNL6HhUfFRgVhOW0GyRdBRriMHFQ-qfh4cA/s320/sun.png"; 11 | break; 12 | case 'Rain': 13 | weatherIcon.src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDW_NdwvxV796rkFf43qmUDiTQePn5dg7PDfn1SijfpjtB0AWJMBcifU6LWyW7iOtjZhfqIJnKEGQ1PwbbXS7NoKMSAmvy7i2ljWXMYLue3EBIBBR2qTFbs6QCe5eoFr2CU9WzCVJ8u0J3z3eAo3Ajv1LXamZASFtbj9sA_gD-Kp3hfgAk17Xh17RoLQ/s320/rainy.png"; 14 | break; 15 | case 'Mist': 16 | weatherIcon.src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVpL23l0t1U_ibWi01TFcHMF6J_t-9Ada5PavGlwG4M_mKIcx0pV1md9SN9ip1d84NaVowml5Do16XO3nsuttnM2-Ov05d-wCjEYjdzaOYfKvijw8k6Hfj9pOiPyEZTp2W20EPbTeONTgJE2Rdxs4KZUfg6f2PmbMF1094NcqJ7DwSFUQwYiRmVCNvuA/s320/mist.png"; 17 | break; 18 | case 'Snow': 19 | weatherIcon.src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-P3iT_uQK95qFY4h7QGdEtbRc1aVQo9BZy0ZWyPBvCNrP-4wnRStw0xYj9e4xa4ZlYISeNZqVJ33UP4YukR4jBennDD_obIN4QxYNZHdzG_z6_MNL2U08wMXwdFhtfvitW5LGiHgrwMJFC8QJFqbSO3woGSBqOdagGxaEQ20_S31Gc-GYL4vYzPzaPw/s320/snow.png"; 20 | break; 21 | case 'Haze': 22 | weatherIcon.src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjld66Ia5g_hpBn3Impi3zzOBHqWkjQInGLxTb2uXksuCsrkQU8HjlVyLobEJEGg8fRSIxeFzldGEHUmWcaiZBwAcRy4dGDpFX1BjTSB56qmBjW5tEW3RSC9_mCuLU_a8RuXchxGY7Oc8HLLl-IfaDW19Z0ZJJfNae9tECXRIyEu7rmJ3da08z8cI-phw/s320/haze.png"; 23 | break; 24 | } -------------------------------------------------------------------------------- /MyWeatherApp/src/main/webapp/index.jsp: -------------------------------------------------------------------------------- 1 | <%@ page language="java" contentType="text/html; charset=UTF-8" 2 | pageEncoding="UTF-8"%> 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Weather App 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |
20 | 21 | 22 |
23 |
24 |
25 | Clouds 26 |

${temperature} °C

27 | 28 |
29 | 30 |
31 |
${city}
32 |
${date}
33 |
34 |
35 |
36 | Humidity 37 |
38 | Humidity 39 |

${humidity}%

40 |
41 |
42 | 43 |
44 | 45 |
46 | Wind Speed 47 |

${windSpeed} km/h

48 |
49 |
50 |
51 |
52 |
53 | 54 | 55 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /MyWeatherApp/src/main/webapp/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: "Ubuntu", sans-serif; 6 | } 7 | 8 | body { 9 | display: flex; 10 | height: 100vh; 11 | align-items: center; 12 | justify-content: center; 13 | background: linear-gradient(to right, #2b40ff,#07121a); 14 | } 15 | 16 | .mainContainer { 17 | width: 25rem; 18 | height: auto; 19 | border-radius: 1rem; 20 | background: #fff; 21 | box-shadow: 0 14px 28px rgba(0,0,0,0.25), 22 | 0 10px 10px rgba(0,0,0,0.22); 23 | } 24 | 25 | .searchInput { 26 | width: 100%; 27 | display: flex; 28 | padding: 1rem 1rem; 29 | justify-content: center; 30 | } 31 | 32 | .searchInput input { 33 | width: 100%; 34 | height: 2rem; 35 | outline: none; 36 | font-size: 1rem; 37 | color: #525050; 38 | padding: 0.2rem 0.5rem; 39 | border-radius: 1.5rem; 40 | border: 1px solid #b3b3b3; 41 | } 42 | 43 | .searchInput input:focus { 44 | border: 1px solid #9c9dde; 45 | } 46 | 47 | .searchInput button { 48 | width: 2.2rem; 49 | height: 2rem; 50 | cursor: pointer; 51 | color: #9b9b9b; 52 | border-radius: 50%; 53 | margin-left: 0.4rem; 54 | transition: all 0.3s ease; 55 | background-color: #fff; 56 | border: 1px solid #b3b3b3; 57 | } 58 | 59 | .searchInput button:hover { 60 | color: #fff; 61 | background-color: #9c9dde; 62 | border: 1px solid #9c9dde; 63 | } 64 | 65 | .weatherIcon { 66 | display: flex; 67 | padding-top: 0.5rem; 68 | padding-bottom: 0.5rem; 69 | justify-content: center; 70 | } 71 | 72 | .weatherIcon img { 73 | max-width: 100%; 74 | width: 8rem; 75 | } 76 | 77 | .weatherDetails .temp{ 78 | font-size: 2rem; 79 | } 80 | .cityDetails { 81 | color: #323232; 82 | font-size: 2.5rem; 83 | text-align: center; 84 | margin-bottom: 0.5rem; 85 | } 86 | 87 | .cityDetails .date { 88 | color: #323232; 89 | font-size: 1.5rem; 90 | text-align: center; 91 | margin-bottom: 0.5rem; 92 | } 93 | 94 | .windDetails { 95 | display: flex; 96 | margin-top: 1rem; 97 | margin-bottom: 1.5rem; 98 | justify-content: space-around; 99 | } 100 | 101 | .windDetails .humidityBox { 102 | display: flex; 103 | font-size: 1rem; 104 | color: #323232; 105 | } 106 | 107 | .windDetails .humidity .humidityValue { 108 | text-align: center; 109 | font-size: 2rem; 110 | color: #323232; 111 | } 112 | 113 | .windDetails .humidityBox img { 114 | max-height: 3rem; 115 | margin-right: 0.5rem; 116 | } 117 | 118 | .windDetails .windSpeed { 119 | display: flex; 120 | font-size: 1rem; 121 | color: #323232; 122 | } 123 | 124 | .windDetails .windSpeed img { 125 | max-height: 3rem; 126 | margin-right: 0.5rem; 127 | } 128 | 129 | 130 | image-logo{ 131 | height: auto; 132 | width: auto; 133 | filter: drop-shadow(20px 10px 10px black); 134 | }S -------------------------------------------------------------------------------- /MyWeatherApp/src/main/java/MyPackage/MyServlet.java: -------------------------------------------------------------------------------- 1 | package MyPackage; 2 | 3 | import jakarta.servlet.ServletException; 4 | import jakarta.servlet.annotation.WebServlet; 5 | import jakarta.servlet.http.HttpServlet; 6 | import jakarta.servlet.http.HttpServletRequest; 7 | import jakarta.servlet.http.HttpServletResponse; 8 | import java.io.IOException; 9 | import java.io.InputStream; 10 | import java.io.InputStreamReader; 11 | import java.net.HttpURLConnection; 12 | import java.net.URL; 13 | import java.util.Date; 14 | import java.util.Scanner; 15 | 16 | import com.google.gson.Gson; 17 | import com.google.gson.JsonObject; 18 | 19 | 20 | @WebServlet("/MyServlet") 21 | public class MyServlet extends HttpServlet { 22 | private static final long serialVersionUID = 1L; 23 | 24 | protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 25 | 26 | response.getWriter().append("Served at: ").append(request.getContextPath()); 27 | } 28 | 29 | 30 | protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 31 | String inputData = request.getParameter("userInput"); 32 | 33 | 34 | String apiKey = "a4859812c8043bfa75d4700e3a8f2ca0"; 35 | // Get the city from the form input 36 | String city = request.getParameter("city"); 37 | 38 | // Create the URL for the OpenWeatherMap API request 39 | String apiUrl = "https://api.openweathermap.org/data/2.5/weather?q=" + city + "&appid=" + apiKey; 40 | 41 | //API Integeration 42 | URL url = new URL(apiUrl); 43 | HttpURLConnection connection = (HttpURLConnection) url.openConnection(); 44 | connection.setRequestMethod("GET"); 45 | 46 | // Reading data from network 47 | InputStream inputStream = connection.getInputStream(); 48 | InputStreamReader reader = new InputStreamReader(inputStream); 49 | 50 | // want to store in string 51 | StringBuilder responseContent = new StringBuilder(); 52 | 53 | // take input from reader 54 | Scanner scanner = new Scanner(reader); 55 | 56 | while (scanner.hasNext()) { 57 | responseContent.append(scanner.nextLine()); 58 | } 59 | 60 | System.out.println(responseContent); 61 | scanner.close(); 62 | 63 | // Typecasting - parsing the data into JSON 64 | Gson gson = new Gson(); 65 | JsonObject jsonObject = gson.fromJson(responseContent.toString(), JsonObject.class); 66 | 67 | // Date & Time 68 | long dateTimestamp = jsonObject.get("dt").getAsLong() * 1000; 69 | String date = new Date(dateTimestamp).toString(); 70 | 71 | //Temperature 72 | double temperatureKelvin = jsonObject.getAsJsonObject("main").get("temp").getAsDouble(); 73 | int temperatureCelsius = (int) (temperatureKelvin - 273.15); 74 | 75 | //Humidity 76 | int humidity = jsonObject.getAsJsonObject("main").get("humidity").getAsInt(); 77 | 78 | //Wind Speed 79 | double windSpeed = jsonObject.getAsJsonObject("wind").get("speed").getAsDouble(); 80 | 81 | //Weather Condition 82 | String weatherCondition = jsonObject.getAsJsonArray("weather").get(0).getAsJsonObject().get("main").getAsString(); 83 | 84 | // Set the data as request attributes (for sending to the jsp page) 85 | request.setAttribute("date", date); 86 | request.setAttribute("city", city); 87 | request.setAttribute("temperature", temperatureCelsius); 88 | request.setAttribute("weatherCondition", weatherCondition); 89 | request.setAttribute("humidity", humidity); 90 | request.setAttribute("windSpeed", windSpeed); 91 | request.setAttribute("weatherData", responseContent.toString()); 92 | 93 | 94 | connection.disconnect(); 95 | 96 | // Forward the request to the weather.jsp page for rendering 97 | request.getRequestDispatcher("index.jsp").forward(request, response); 98 | } 99 | 100 | } 101 | --------------------------------------------------------------------------------