diff --git a/index.html b/index.html new file mode 100644 index 0000000..bf47e02 --- /dev/null +++ b/index.html @@ -0,0 +1,43 @@ + + + + + + Pogoda dla Twojej miejscowości! + + + + + + + + +
+
+

Łódź, Polnd

+
+ +
+

20°C

+

opis

+
+
+

Odczuwalne: 4

+
+
+

+

+

+
+
+

+

+

+
+
+
+

Stworzone przez Krzysztof Smaga
Wykorzystano: OpenWeatherMap API

+
+
+ + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..eb709a9 --- /dev/null +++ b/script.js @@ -0,0 +1,69 @@ +let api = "{ADD_YOUR_API_KEY}"; +let city = getCookie("city") != "" ? getCookie("city") : "3093133"; +let type = getCookie("type") != "" ? getCookie("type") : "id"; + +function call(){ + let api_call = `https://api.openweathermap.org/data/2.5/weather?${type}=${city}&appid=${api}&units=metric&lang=pl`; + + const xhttp = new XMLHttpRequest(); + xhttp.onreadystatechange = function() { + if(this.readyState == 4 && this.status == 200){ + let data = JSON.parse(this.responseText); + let temperature = data.main.temp; + cityTitle.innerText = `${data.name}, ${data.sys.country}`; + icon.setAttribute("src", `https://openweathermap.org/img/wn/${data.weather[0].icon}@4x.png`); + icon.setAttribute("alt", `${data.weather[0].main}`) + temp.innerText = `${temperature.toPrecision(2)}°C`; + desc.innerText = `${data.weather[0].description}` + feel_temp.innerText = `Odczuwalne: ${data.main.feels_like}°C` + min_temp.innerHTML = `Najniższa temp: ${data.main.temp_min}°C` + max_temp.innerHTML = `Najwyższa temp: ${data.main.temp_max}°C` + pressure.innerHTML = `Ciśnienie: ${data.main.pressure} hPa` + humidity.innerHTML = `Wilgotność: ${data.main.humidity}%` + wind.innerHTML = `Wiatr: ${data.wind.speed} m/s, ${data.wind.deg}°` + clouds.innerHTML = `Pochmurzenie: ${data.clouds.all}%` + container.style.backgroundImage = `url(wallpapers/${data.weather[0].icon}.jpg)` + } + }; + xhttp.open("GET", api_call); + xhttp.send(); +} + +call(); + +function changeCity() { + let temp_type = prompt("Co chcesz podać? (ID miasta - id; Nazwę miasta - q)"); + let temp_id = prompt("Podaj nowe miasto"); + + if(temp_type != null && temp_type != "") + type = temp_type; + if(temp_id != null && temp_id != "") + city = temp_id; + + setCookie("city", city); + setCookie("type", type); + + call(); +} + +function setCookie(cname, cvalue) { + const d = new Date(); + d.setTime(d.getTime() + (30 * 24 * 60 * 60 * 1000)); + let expires = "expires="+d.toUTCString(); + document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/"; +} + +function getCookie(cname) { + let name = cname + "="; + let ca = document.cookie.split(';'); + for(let i = 0; i < ca.length; i++) { + let c = ca[i]; + while (c.charAt(0) == ' ') { + c = c.substring(1); + } + if (c.indexOf(name) == 0) { + return c.substring(name.length, c.length); + } + } + return ""; +} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..153f832 --- /dev/null +++ b/style.css @@ -0,0 +1,93 @@ +* { + box-sizing: border-box; + font-family: "Open Sans", sans-serif; +} + +body { + margin: 0; +} + +.container { + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + background-position: center; + background-repeat: no-repeat; + background-size: cover; +} + +.content { + padding: 16px; + border-radius: 48px; + color: white; + box-shadow: 0 0 32px #000000; + backdrop-filter: blur(3px) brightness(60%); +} + +.city-title { + text-align: center; + font-weight: 200; +} + +.temperature { + display: inline-block; + margin: 16px; + margin-bottom: 0; + font-weight: 300; + font-size: 600%; +} + +.description { + font-style: italic; + text-align: center; + margin: 0; +} + +.feel_temp { + text-align: center; +} + +.icon { + display: inline-block; + height: 256px; +} + +.row { + display: flex; + justify-content: center; + align-items: center; +} + +.col { + text-align: center; + flex: 1 0 0%; +} + +.info { + text-align: left; + margin: 4px 24px 0 24px; + font-weight: 300; + font-style: italic; +} + +.info.right { + text-align: right; +} + +.author { + text-align: center; + font-weight: 300; + font-style: italic; +} + +.author a { + font-weight: 500; + text-decoration: none; + color: white; + font-style: normal; +} + + .author a:hover { + text-decoration: underline; + } \ No newline at end of file diff --git a/wallpapers/01d.jpg b/wallpapers/01d.jpg new file mode 100644 index 0000000..a75489c Binary files /dev/null and b/wallpapers/01d.jpg differ diff --git a/wallpapers/01n.jpg b/wallpapers/01n.jpg new file mode 100644 index 0000000..9ec4317 Binary files /dev/null and b/wallpapers/01n.jpg differ diff --git a/wallpapers/02d.jpg b/wallpapers/02d.jpg new file mode 100644 index 0000000..e66231a Binary files /dev/null and b/wallpapers/02d.jpg differ diff --git a/wallpapers/02n.jpg b/wallpapers/02n.jpg new file mode 100644 index 0000000..4ae349f Binary files /dev/null and b/wallpapers/02n.jpg differ diff --git a/wallpapers/03d.jpg b/wallpapers/03d.jpg new file mode 100644 index 0000000..fd0d0d0 Binary files /dev/null and b/wallpapers/03d.jpg differ diff --git a/wallpapers/03n.jpg b/wallpapers/03n.jpg new file mode 100644 index 0000000..d72679a Binary files /dev/null and b/wallpapers/03n.jpg differ diff --git a/wallpapers/04d.jpg b/wallpapers/04d.jpg new file mode 100644 index 0000000..5c6436a Binary files /dev/null and b/wallpapers/04d.jpg differ diff --git a/wallpapers/04n.jpg b/wallpapers/04n.jpg new file mode 100644 index 0000000..a875f67 Binary files /dev/null and b/wallpapers/04n.jpg differ diff --git a/wallpapers/09d.jpg b/wallpapers/09d.jpg new file mode 100644 index 0000000..79305aa Binary files /dev/null and b/wallpapers/09d.jpg differ diff --git a/wallpapers/09n.jpg b/wallpapers/09n.jpg new file mode 100644 index 0000000..fbbf6f5 Binary files /dev/null and b/wallpapers/09n.jpg differ diff --git a/wallpapers/10d.jpg b/wallpapers/10d.jpg new file mode 100644 index 0000000..c73d13e Binary files /dev/null and b/wallpapers/10d.jpg differ diff --git a/wallpapers/10n.jpg b/wallpapers/10n.jpg new file mode 100644 index 0000000..18c76f1 Binary files /dev/null and b/wallpapers/10n.jpg differ diff --git a/wallpapers/11d.jpg b/wallpapers/11d.jpg new file mode 100644 index 0000000..039615c Binary files /dev/null and b/wallpapers/11d.jpg differ diff --git a/wallpapers/11n.jpg b/wallpapers/11n.jpg new file mode 100644 index 0000000..b3777c4 Binary files /dev/null and b/wallpapers/11n.jpg differ diff --git a/wallpapers/13d.jpg b/wallpapers/13d.jpg new file mode 100644 index 0000000..d94bbb7 Binary files /dev/null and b/wallpapers/13d.jpg differ diff --git a/wallpapers/13n.jpg b/wallpapers/13n.jpg new file mode 100644 index 0000000..ed25438 Binary files /dev/null and b/wallpapers/13n.jpg differ diff --git a/wallpapers/50d.jpg b/wallpapers/50d.jpg new file mode 100644 index 0000000..5e1c857 Binary files /dev/null and b/wallpapers/50d.jpg differ diff --git a/wallpapers/50n.jpg b/wallpapers/50n.jpg new file mode 100644 index 0000000..995a7ab Binary files /dev/null and b/wallpapers/50n.jpg differ