Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@OlenaKut
OlenaKut authored Jun 19, 2022
1 parent 619f60a commit d394c91
Show file tree
Hide file tree
Showing 3 changed files with 343 additions and 0 deletions.
151 changes: 151 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,151 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="styles.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=PT+Mono&family=Pacifico&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet"
/>
<script
src="https://kit.fontawesome.com/accd96e367.js"
crossorigin="anonymous"
></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<title>Weather App</title>
</head>
<body>
<div class="container">
<div class="weather">
<form class="input-city" id="cityInput">
<input
type="search"
name="city"
placeholder="Find a city 🔎"
id="type-city"
/>
<input type="submit" value="Search" id="submitButton"/>
<input type="button" value="Current weather" id="current-location-button"/>
</form>
<h1 id="city-change"></h1>
<ul>
<li><span id="weather-change"> Sunday, 17:24</span></li>
<li><span id="description">Sunny</span> </li>
</ul>
<div class="row">
<div class="col-6">
<img
class="weather-icon"
src="https://i.pinimg.com/originals/77/0b/80/770b805d5c99c7931366c2e84e88f251.png"
alt="Weather icon"
/>
<span class="temperature"> 24°</span>
<span class="degree"> C | <a href="#">°F</a></span>
</div>
<div class="col-6">
<li class="properties">Wind: <span id="wind">14</span>m/s</li>
<li class="properties">Humidity: <span id="humidity">33</span>%</li>
<li class="properties">Precipitation: 0%</li>
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary">Wind</button>
<button type="button" class="btn btn-primary">Humidity</button>
<button type="button" class="btn btn-primary">
Precipitation
</button>
</div>
</div>
</div>
<ul>
<li class="footer">
14:00
<br />
<p class="emodj">
<span class="days">Sun</span>
<br />
+27° 15°
<br />
<i class="fa-solid fa-cloud"></i>
</p>
</li>
<li class="footer">
14:00
<br />
<p class="emodj">
<span class="days">Sun</span>
<br />
+27° 15°
<br />
<i class="fa-solid fa-cloud-sun"></i>
</p>
</li>
<li class="footer">
14:00
<br />
<p class="emodj">
<span class="days">Sun</span>
<br />
+27° 15°
<br />
<i class="fa-solid fa-cloud"></i>
</p>
</li>
<li class="footer">
14:00
<br />
<p class="emodj">
<span class="days">Sun</span>
<br />
+27° 15°
<br />
<i class="fa-solid fa-smog"></i>
</p>
</li>
<li class="footer">
14:00
<br />
<p class="emodj">
<span class="days">Sun</span>
<br />
+27° 15°
<br />
<i class="fa-solid fa-cloud-showers-heavy"></i>
</p>
</li>
<li class="footer">
14:00
<br />
<p class="emodj">
<span class="days">Sun</span>
<br />
+27° 15°
<br />
<i class="fa-solid fa-cloud-sun-rain"></i>
</p>
</li>
<li class="footer">
14:00
<br />
<p class="emodj">
<span class="days">Sun</span>
<br />
+27° 15°
<br />
<i class="fa-solid fa-cloud-sun"></i>
</p>
</li>
</ul>
</div>
</div>
<script src="js.js"></script>
</body>
</html>
80 changes: 80 additions & 0 deletions js.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
function formatDate(date) {
let hours = date.getHours();
if (hours < 10) {
hours = `0${hours}`;
}
let minutes = date.getMinutes();
if (minutes < 10) {
minutes = `0${minutes}`;
}
let dayIndex = date.getDay();
let days = [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursdy",
"Friday",
"Saturday",
];
let day = days[dayIndex];

return `${day}, ${hours}:${minutes}`;
}

let currentDatas = document.querySelector("#weather-change");
let currentTime = new Date();
currentDatas.innerHTML = formatDate(currentTime);



function showWeatherCondition(response) {
console.log(response.data.name);
let city = document.querySelector("#city-change");
city.innerHTML = response.data.name;
document.querySelector(".temperature").innerHTML = Math.round(
response.data.main.temp
);
document.querySelector("#humidity").innerHTML = response.data.main.humidity;
document.querySelector("#wind").innerHTML = Math.round(
response.data.wind.speed
);
document.querySelector("#description").innerHTML =
response.data.weather[0].main;
}

function searchCity(city) {
let apiKey = "82914429dbcac50d79e072b0c73a8cb3";
let apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;
axios.get(apiUrl).then(showWeatherCondition);
}

function citySubmit(event) {
event.preventDefault();
let city = document.querySelector("#type-city").value;
searchCity(city);
}

function searchLocation(position) {
let lat = position.coords.latitude;
let lon = position.coords.longitude;

let apiKey = "582914429dbcac50d79e072b0c73a8cb3";
let apiUrl = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${apiKey}&units=metric`;

axios.get(apiUrl).then(showWeatherCondition);

}

function getCurrentLocation(event) {
event.preventDefault();
navigator.geolocation.getCurrentPosition(searchLocation);
}

let searchForm = document.querySelector("#cityInput");
searchForm.addEventListener("submit", citySubmit);

let currentLocationButton = document.querySelector("#current-location-button");
currentLocationButton.addEventListener("click", getCurrentLocation);

searchCity("Lviv");
112 changes: 112 additions & 0 deletions styles.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
body {
font-family: "Poppins", sans-serif;
}
#submitButton {
color: #ffffff;
background: #ffd800;
border: none;
border-radius: 5px;
box-shadow: 2px 2px 3px 1px gray;

}
#submitButton:hover {
background: rgb(114,223,253);
}
#current-location-button {
color: #ffffff;
background: rgb(114,223,253);
border: none;
border-radius: 5px;
box-shadow: 2px 2px 3px 1px gray;
}
#current-location-button:hover {
background: #ffd800;
}
.input-city {
display: flex;
border: none;
border-radius: 5px;
text-align: right;
font-size: 20px;
width: 20%;
margin: 10px;
}
h1 {
float: right;
color: #ffd800;
font-size: 56px;
text-shadow: 2px 2px rgb(250, 239, 223);
margin: 0;
line-height: 1;
}
ul {
margin: 0 0 15px;
padding: 0;
line-height: 1.3;
}

li {
font-size: 26px;
list-style: none;
color: #2c7873;
}
.weather {
border: 2px solid #b4b2ab;
border-radius: 10px;
padding: 15px 15px 0 15px;
margin: 20px auto;
max-width: 700px;
}
.temperature {
font-size: 74px;
line-height: 1;
color: #ffd800;
}
.weather-icon {
width: 20%;
position: relative;
top: -15px;
margin-right: 10px;
}
.degree {
position: relative;
top: -45px;
font-size: 20px;
color: #2c7873;
}
.properties {
font-size: 20px;
}
a {
color: #2c7873;
text-decoration: none;
}
.btn-primary {
position: relative;
background: #ffd800;
color: #2c7873;
border: none;
font-size: 16px;
box-shadow: 1px 1px 5px 1px rgb(214, 212, 212);
}
.footer {
display: inline-block;
font-size: 16px;
margin: 20px 0 0 0;
text-align: center;
}
.days {
font-size: 23px;
color: #ffd800;
}
p {
border: none;
box-shadow: 1px 1px 5px 1px rgb(214, 212, 212);
padding: 10px 15px;
border-radius: 10px;
}
i {
color: #ffd800;
font-size: 26px;
}

0 comments on commit d394c91

Please sign in to comment.