├── .gitignore
├── LICENSE
├── README.md
├── app.js
├── index.html
└── styles.css


/.gitignore:
--------------------------------------------------------------------------------
 1 | # Ignore node_modules
 2 | node_modules/
 3 | 
 4 | # Ignore log files
 5 | npm-debug.log
 6 | yarn-error.log
 7 | 
 8 | # Ignore environment variable files
 9 | .env
10 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Permission is hereby granted, free of charge, to any person obtaining a copy
 4 | of this software and associated documentation files (the "Software"), to deal
 5 | in the Software without restriction, including without limitation the rights
 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 7 | copies of the Software, and to permit persons to whom the Software is
 8 | furnished to do so, subject to the following conditions:
 9 | 
10 | The above copyright notice and this permission notice shall be included in all
11 | copies or substantial portions of the Software.
12 | 
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
19 | SOFTWARE.
20 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # WeatherChecker
 2 | 
 3 | WeatherChecker is a simple JavaScript-based web application that fetches and displays weather data for a specified location using a public weather API.
 4 | 
 5 | ## Features
 6 | 
 7 | - Fetches current weather data for a specified location.
 8 | - Displays temperature, weather condition, and an icon representing the weather.
 9 | 
10 | ## Installation
11 | 
12 | 1. Clone the repository:
13 |     ```bash
14 |     git clone https://github.com/YOUR_USERNAME/WeatherChecker.git
15 |     cd WeatherChecker
16 |     ```
17 | 
18 | 2. Open `index.html` in your web browser.
19 | 
20 | ## License
21 | 
22 | This project is licensed under the MIT License.
23 | 


--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
 1 | document.getElementById('weather-form').addEventListener('submit', function(e) {
 2 |     e.preventDefault();
 3 |     const location = document.getElementById('location-input').value;
 4 |     getWeather(location);
 5 | });
 6 | 
 7 | async function getWeather(location) {
 8 |     const apiKey = 'YOUR_API_KEY'; // Replace with your actual API key
 9 |     const url = `https://api.openweathermap.org/data/2.5/weather?q=${location}&units=metric&appid=${apiKey}`;
10 |     
11 |     try {
12 |         const response = await fetch(url);
13 |         if (!response.ok) {
14 |             throw new Error('Location not found');
15 |         }
16 |         const data = await response.json();
17 |         displayWeather(data);
18 |     } catch (error) {
19 |         alert(error.message);
20 |     }
21 | }
22 | 
23 | function displayWeather(data) {
24 |     document.getElementById('location-name').textContent = data.name;
25 |     document.getElementById('temperature').textContent = `Temperature: ${data.main.temp}°C`;
26 |     document.getElementById('condition').textContent = `Condition: ${data.weather[0].description}`;
27 |     document.getElementById('icon').src = `http://openweathermap.org/img/w/${data.weather[0].icon}.png`;
28 |     document.getElementById('weather-result').classList.remove('hidden');
29 | }
30 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>WeatherChecker</title>
 7 |     <link rel="stylesheet" href="styles.css">
 8 | </head>
 9 | <body>
10 |     <div class="container">
11 |         <h1>WeatherChecker</h1>
12 |         <form id="weather-form">
13 |             <input type="text" id="location-input" placeholder="Enter location" required>
14 |             <button type="submit">Get Weather</button>
15 |         </form>
16 |         <div id="weather-result" class="hidden">
17 |             <h2 id="location-name"></h2>
18 |             <p id="temperature"></p>
19 |             <p id="condition"></p>
20 |             <img id="icon" src="" alt="Weather icon">
21 |         </div>
22 |     </div>
23 |     <script src="app.js"></script>
24 | </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: Arial, sans-serif;
 3 |     background: #f4f4f4;
 4 |     margin: 0;
 5 |     padding: 0;
 6 | }
 7 | 
 8 | .container {
 9 |     max-width: 600px;
10 |     margin: 50px auto;
11 |     padding: 20px;
12 |     background: #fff;
13 |     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
14 |     text-align: center;
15 | }
16 | 
17 | h1 {
18 |     margin-bottom: 20px;
19 | }
20 | 
21 | form {
22 |     margin-bottom: 20px;
23 | }
24 | 
25 | form input {
26 |     padding: 10px;
27 |     font-size: 16px;
28 |     width: 70%;
29 | }
30 | 
31 | form button {
32 |     padding: 10px;
33 |     font-size: 16px;
34 |     background: #333;
35 |     color: #fff;
36 |     border: none;
37 |     cursor: pointer;
38 | }
39 | 
40 | #weather-result {
41 |     margin-top: 20px;
42 | }
43 | 
44 | .hidden {
45 |     display: none;
46 | }
47 | 


--------------------------------------------------------------------------------