├── README.md
├── bg.jpg
├── wh.jpg
├── index.html
├── script.js
└── styles.css
/README.md:
--------------------------------------------------------------------------------
1 | # pradhi_weather1
--------------------------------------------------------------------------------
/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pradeksha12/pradhi_weather1/HEAD/bg.jpg
--------------------------------------------------------------------------------
/wh.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pradeksha12/pradhi_weather1/HEAD/wh.jpg
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Weather Forecast
8 |
9 |
10 |
11 | Weather Forecast
12 |
13 |
14 |
19 |
20 |
21 | Weather Information
22 |
23 |
24 |
25 |
26 |
27 |
30 |
31 |
32 |
33 |
34 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | document.getElementById('get-weather-button').addEventListener('click', function() {
2 | const apiKey = '941f5357ae0e7d68e8814970b566399a'; // Replace with your OpenWeatherMap API key
3 | const location = document.getElementById('location-input').value;
4 |
5 | // Make an API request to fetch weather data
6 | fetch(`https://api.openweathermap.org/data/2.5/weather?q=${location}&appid=${apiKey}`)
7 | .then(response => response.json())
8 | .then(data => {
9 | // Update the weather information based on the fetched data
10 | const icon = data.weather[0].icon;
11 | const temperature = `${(data.main.temp - 273.15).toFixed(2)}°C`;
12 | const description = data.weather[0].description;
13 |
14 | document.getElementById('weather-icon').textContent = icon;
15 | document.getElementById('temperature').textContent = temperature;
16 | document.getElementById('description').textContent = description;
17 |
18 | // Show the weather data section
19 | document.getElementById('weather-data').style.display = 'block';
20 | })
21 | .catch(error => {
22 | console.error('Error fetching weather data:', error);
23 | alert('Error fetching weather data. Please try again.');
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
1 | /* Add your CSS styles here */
2 |
3 | body {
4 | background-image: url('bg.jpg'); /* Replace with your cloud background image */
5 | background-size: cover;
6 | background-repeat: no-repeat;
7 | background-attachment: fixed;
8 | background-color: #f0f0f0; /* Fallback background color */
9 | font-family: Arial, Helvetica, sans-serif;
10 | }
11 |
12 | header {
13 | /* background-color:rgb(9, 214, 255); */
14 | color: #090909;
15 | /* margin: 80px; */
16 | /* padding: 40px; */
17 | margin-left: 40%;
18 | margin-right: 40%;
19 | }
20 |
21 | h1 {
22 | font-size: 28px;
23 | }
24 |
25 | section {
26 | margin: 80px;
27 | padding: 40px;
28 | margin-left: 30%;
29 | margin-right: 30%;
30 | background-color: #d5c7d4;
31 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
32 | }
33 |
34 | input[type="text"] {
35 | width: 50%;
36 | padding: 10px;
37 | font-size: 16px;
38 | }
39 |
40 | button {
41 | padding: 10px 20px;
42 | background-color: #0078d4;
43 | color: #fff;
44 | border: none;
45 | cursor: pointer;
46 | font-size: 16px;
47 | }
48 |
49 | #weather-data {
50 | display: none;
51 | }
52 |
53 | #weather-icon {
54 | font-size: 48px;
55 | margin: 20px;
56 | }
57 |
58 | #temperature {
59 | font-size: 28px;
60 | font-weight: bold;
61 | }
62 |
63 | #description {
64 | font-size: 18px;
65 | margin: 40px;
66 | }
67 |
68 | /* footer {
69 | background-color: #333;
70 | color: #fff;
71 | padding: 10px 0;
72 | } */
73 |
--------------------------------------------------------------------------------