mirror of
https://github.com/NohamR/Hub.git
synced 2026-01-11 00:18:15 +00:00
V2.5
This commit is contained in:
85
weather/weather.css
Normal file
85
weather/weather.css
Normal file
@@ -0,0 +1,85 @@
|
||||
body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
background-color: transparent;
|
||||
font-size: 120%;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: #000000d0;
|
||||
color: white;
|
||||
padding: 2em;
|
||||
border-radius: 30px;
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
.search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 0.5em;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
height: 44px;
|
||||
width: 44px;
|
||||
outline: none;
|
||||
background: #7c7c7c2b;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
transition: 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
input.search-bar {
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 0.4em 1em;
|
||||
border-radius: 24px;
|
||||
background: #7c7c7c2b;
|
||||
color: white;
|
||||
font-family: inherit;
|
||||
font-size: 105%;
|
||||
width: calc(100% - 100px);
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: #7c7c7c6b;
|
||||
}
|
||||
|
||||
h1.temp {
|
||||
margin: 0;
|
||||
margin-bottom: 0.4em;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.description {
|
||||
text-transform: capitalize;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.weather.loading {
|
||||
visibility: hidden;
|
||||
max-height: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.weather.loading:after {
|
||||
visibility: visible;
|
||||
content: "Loading...";
|
||||
color: white;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 20px;
|
||||
}
|
||||
38
weather/weather.html
Normal file
38
weather/weather.html
Normal file
@@ -0,0 +1,38 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Weather App</title>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="weather.css">
|
||||
<script src="weather.js" defer></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="card">
|
||||
<div class="search">
|
||||
<input type="text" class="search-bar" placeholder="Rechercher">
|
||||
<button><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" height="1.5em"
|
||||
width="1.5em" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z">
|
||||
</path>
|
||||
</svg></button>
|
||||
</div>
|
||||
<div class="weather loading">
|
||||
<h2 class="city">Weather in Denver</h2>
|
||||
<h1 class="temp">51°C</h1>
|
||||
<div class="flex">
|
||||
<img src="https://openweathermap.org/img/wn/04n.png" alt="" class="icon" />
|
||||
<div class="description">Cloudy</div>
|
||||
</div>
|
||||
<div class="humidity">Humidity: 60%</div>
|
||||
<div class="wind">Wind speed: 6.2 km/h</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
1
weather/weather.js
Normal file
1
weather/weather.js
Normal file
@@ -0,0 +1 @@
|
||||
const _0xf7ec = ['1WTzlLu', 'displayWeather', 'innerText', '.humidity', 'style', '.icon', 'Orsay', 'url(\x27', 'keyup', 'querySelector', 'weather', 'loading', 'body', 'then', 'No\x20weather\x20found.', '.png', '\x20km/h', 'main', 'click', 'fetchWeather', '624254JAKbCI', 'backgroundImage', '.weather', '278720rBCJVY', '800fd005579d27a234b5ea3722aeb935', 'Humidity:\x20', 'search', '.wind', '638539kEARMI', '1210334gNcjTQ', '&units=metric&appid=', 'Enter', '627017NHrYpg', '1594628qBtVoe', '.search-bar', 'apiKey', 'https://openweathermap.org/img/wn/', 'Weather\x20in\x20', 'classList', '.description', 'src', 'json', 'key', 'remove', '113544jQxTjo']; const _0x2ed9 = function (_0x2cb9bf, _0x34ddd8) { _0x2cb9bf = _0x2cb9bf - 0x1bd; let _0xf7ec4d = _0xf7ec[_0x2cb9bf]; return _0xf7ec4d; }; const _0x2aae01 = _0x2ed9; (function (_0x3ff0bc, _0x4659bb) { const _0x5d4f57 = _0x2ed9; while (!![]) { try { const _0x5745ce = -parseInt(_0x5d4f57(0x1c1)) + parseInt(_0x5d4f57(0x1ca)) + parseInt(_0x5d4f57(0x1c4)) + parseInt(_0x5d4f57(0x1c9)) + parseInt(_0x5d4f57(0x1d9)) + parseInt(_0x5d4f57(0x1cd)) * parseInt(_0x5d4f57(0x1da)) + -parseInt(_0x5d4f57(0x1ce)); if (_0x5745ce === _0x4659bb) break; else _0x3ff0bc['push'](_0x3ff0bc['shift']()); } catch (_0x31e4fe) { _0x3ff0bc['push'](_0x3ff0bc['shift']()); } } }(_0xf7ec, 0x9e838)); let weather = { 'apiKey': _0x2aae01(0x1c5), 'fetchWeather': function (_0x5e7481) { const _0x4d51a0 = _0x2aae01; fetch('https://api.openweathermap.org/data/2.5/weather?q=' + _0x5e7481 + _0x4d51a0(0x1cb) + this[_0x4d51a0(0x1d0)])[_0x4d51a0(0x1e7)](_0x17922e => { const _0x25b410 = _0x4d51a0; if (!_0x17922e['ok']) { alert(_0x25b410(0x1e8)); throw new Error(_0x25b410(0x1e8)); } return _0x17922e[_0x25b410(0x1d6)](); })[_0x4d51a0(0x1e7)](_0x57b1ef => this[_0x4d51a0(0x1db)](_0x57b1ef)); }, 'displayWeather': function (_0x1878db) { const _0x349224 = _0x2aae01, { name: _0x3a2405 } = _0x1878db, { icon: _0x1ed832, description: _0x50e4bb } = _0x1878db[_0x349224(0x1e4)][0x0], { temp: _0x1bb053, humidity: _0x2ea79d } = _0x1878db[_0x349224(0x1be)], { speed: _0x5c4211 } = _0x1878db['wind']; document['querySelector']('.city')[_0x349224(0x1dc)] = _0x349224(0x1d2) + _0x3a2405, document[_0x349224(0x1e3)](_0x349224(0x1df))[_0x349224(0x1d5)] = _0x349224(0x1d1) + _0x1ed832 + _0x349224(0x1e9), document[_0x349224(0x1e3)](_0x349224(0x1d4))[_0x349224(0x1dc)] = _0x50e4bb, document[_0x349224(0x1e3)]('.temp')[_0x349224(0x1dc)] = _0x1bb053 + '°C', document[_0x349224(0x1e3)](_0x349224(0x1dd))[_0x349224(0x1dc)] = _0x349224(0x1c6) + _0x2ea79d + '%', document['querySelector'](_0x349224(0x1c8))[_0x349224(0x1dc)] = 'Wind\x20speed:\x20' + _0x5c4211 + _0x349224(0x1bd), document['querySelector'](_0x349224(0x1c3))[_0x349224(0x1d3)][_0x349224(0x1d8)](_0x349224(0x1e5)), document[_0x349224(0x1e6)][_0x349224(0x1de)][_0x349224(0x1c2)] = _0x349224(0x1e1) + _0x3a2405 + '\x27)'; }, 'search': function () { const _0x14da47 = _0x2aae01; this[_0x14da47(0x1c0)](document[_0x14da47(0x1e3)](_0x14da47(0x1cf))['value']); } }; document['querySelector']('.search\x20button')['addEventListener'](_0x2aae01(0x1bf), function () { weather['search'](); }), document['querySelector'](_0x2aae01(0x1cf))['addEventListener'](_0x2aae01(0x1e2), function (_0x34b397) { const _0x36ffda = _0x2aae01; _0x34b397[_0x36ffda(0x1d7)] == _0x36ffda(0x1cc) && weather[_0x36ffda(0x1c7)](); }), weather[_0x2aae01(0x1c0)](_0x2aae01(0x1e0));
|
||||
Reference in New Issue
Block a user