Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 7a0a1e1

Browse files
authored
Merge pull request #17 from Zweak/main
weather app javascript
2 parents 261971b + 82118c0 commit 7a0a1e1

File tree

4 files changed

+133
-0
lines changed

4 files changed

+133
-0
lines changed

‎JS Weather/README.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
## A Simple Javascript Weather App
2+
##### Uses openweathermap api to fetch weather data.
3+
4+
### Usage
5+
1. Enter the name of the city
6+
2. Hit enter
7+
8+
### API
9+
10+
1. Head over to https://openweathermap.org/api, signup to get your api key.
11+
2. Navigate to `script.js` and replace `const apikey = " "` with your key.
12+
3. Read the API documentation if you feel like it.

‎JS Weather/index.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
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>Weather App</title>
7+
<link rel="stylesheet" href="style.css" />
8+
<script src="script.js" defer></script>
9+
</head>
10+
<body>
11+
12+
<!-- Searchbar for user input -->
13+
<form id="form">
14+
<!-- Name of any city or specific location is the for input -->
15+
<input
16+
type="text"
17+
id="search"
18+
placeholder="Search by location"
19+
autocomplete="off"
20+
/>
21+
</form>
22+
<main id="main"></main>
23+
</body>
24+
</html>

‎JS Weather/script.js‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
// Get your own ApiKey from https://openweathermap.org/api
2+
const apikey = "3265874a2c77ae4a04bb96236a642d2f";
3+
4+
// Grab objects via DOM
5+
const main = document.getElementById("main");
6+
const form = document.getElementById("form");
7+
const search = document.getElementById("search");
8+
9+
// Function that returns weatherdata
10+
const url = (city) =>
11+
`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apikey}`; //
12+
13+
async function getWeatherByLocation(city) {
14+
const resp = await fetch(url(city), { origin: "cors" });
15+
const respData = await resp.json();
16+
17+
console.log(respData);
18+
19+
addWeatherToPage(respData);
20+
}
21+
22+
// Display the weather data
23+
function addWeatherToPage(data) {
24+
const temp = KtoC(data.main.temp);
25+
26+
// DOM manipulation
27+
const weather = document.createElement("div");
28+
weather.classList.add("weather");
29+
30+
weather.innerHTML = `
31+
<h2><img src="https://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png" /> ${temp}°C <img src="https://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png" /></h2>
32+
<small>${data.weather[0].main}</small>
33+
`;
34+
35+
// cleanup
36+
main.innerHTML = "";
37+
38+
main.appendChild(weather);
39+
}
40+
41+
// Temperature conversion
42+
function KtoC(K) {
43+
return Math.floor(K - 273.15);
44+
}
45+
46+
// Event listener for form submission
47+
form.addEventListener("submit", (e) => {
48+
e.preventDefault();
49+
50+
const city = search.value;
51+
52+
if (city) {
53+
getWeatherByLocation(city);
54+
}
55+
});

‎JS Weather/style.css‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap");
2+
3+
* {
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
background: linear-gradient(300deg, #ced1d6, #bfc0c0);
9+
font-family: "Poppins", sans-serif;
10+
display: flex;
11+
flex-direction: column;
12+
align-items: center;
13+
justify-content: center;
14+
margin: 0;
15+
min-height: 100vh;
16+
}
17+
18+
input {
19+
background-color: #fff;
20+
border: none;
21+
border-radius: 25px;
22+
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
23+
font-family: inherit;
24+
font-size: 1rem;
25+
padding: 1rem;
26+
min-width: 300px;
27+
}
28+
29+
input:focus {
30+
outline: none;
31+
}
32+
33+
.weather {
34+
font-size: 2rem;
35+
text-align: center;
36+
}
37+
38+
.weather h2 {
39+
display: flex;
40+
align-items: center;
41+
margin-bottom: 0;
42+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /