Skip to content

Commit

Permalink
Added Weather-app
Browse files Browse the repository at this point in the history
  • Loading branch information
@parisdoescoding
parisdoescoding committed Jul 11, 2022
1 parent 6459903 commit 62700d6
Show file tree
Hide file tree
Showing 3 changed files with 369 additions and 3 deletions.
189 changes: 186 additions & 3 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,195 @@
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://kit.fontawesome.com/df0503a546.js" crossorigin="anonymous"></script>
<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="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Kdam+Thmor+Pro&display=swap" rel="stylesheet">

</head>
<body>

<link rel="stylesheet" href="src/styles.css" />
<body></body>
<section class="vh-100";></br>
<form>
<input type="text"
id="city-input"
placeholder="Enter your city here"/>
<input type="submit"
id="submit"
value="Submit">

</form>

<input type="submit"
id="current-location"
value="Current Location">



<video autoplay muted loop id="myVideo">
<source src="media/cloudy-sky.mp4" type="video/mp4">
</video>

<div class="container py-500 h-100">
<div class="row d-flex justify-content-center align-items-center h-100";>
<div class="col-md-9 col-lg-7 col-xl-5">
<div class="card mb-4 gradient-custom" style="border-radius: 25px;">
<div class="card-body p-4">

<div id="demo1" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators mb-0">
<li data-target="#demo1" data-slide-to="0" class="active"></li>
<li data-target="#demo1" data-slide-to="1"></li>
<li data-target="#demo1" data-slide-to="2"></li>
</ul>
<!-- Carousel inner -->
<div class="carousel-inner">
<div class="carousel-item active">
<div class="d-flex justify-content-between mb-4 pb-2">
<div>
<p id="current-city"> London, England, UK</p>
<h3>Hello</h3>
<h4>Time</h4>
<h2 class="temperature">-</h2>


<div> Humidity: <span id="humidity">74</span></br>
Wind: <span id = "wind">5</span>mph</span>
</div>


</div>
<div>
<img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-weather/ilu3.webp"
width="150px">
</div>
</div>
</div>
</div>
</div>

</div>
</div>

<div class="card mb-4" style="border-radius: 25px;">
<div class="card-body p-4">

<div id="demo2" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators mb-0">
<li data-target="#demo2" data-slide-to="0"></li>
<li data-target="#demo2" data-slide-to="1" class="active"></li>
<li data-target="#demo2" data-slide-to="2"></li>
</ul>
<!-- Carousel inner -->
<div class="carousel-inner">
<div class="carousel-item active">
<div class="d-flex justify-content-around text-center mb-4 pb-3 pt-2">
<div class="flex-column">
<p class="small"><strong>21°C</strong></p>
<i class="fas fa-sun fa-2x mb-3" style="color: #ddd;"></i>
<p class="mb-0"><strong>12:00</strong></p>
<p class="mb-0 text-muted" style="font-size: .65rem;">PM</p>
</div>
<div class="flex-column">
<p class="small"><strong>2°C</strong></p>
<i class="fas fa-sun fa-2x mb-3" style="color: #ddd;"></i>
<p class="mb-0"><strong>13:00</strong></p>
<p class="mb-0 text-muted" style="font-size: .65rem;">PM</p>
</div>
<div class="flex-column">
<p class="small"><strong>20°C</strong></p>
<i class="fas fa-cloud fa-2x mb-3" style="color: #ddd;"></i>
<p class="mb-0"><strong>14:00</strong></p>
<p class="mb-0 text-muted" style="font-size: .65rem;">PM</p>
</div>
<div class="flex-column">
<p class="small"><strong>19°C</strong></p>
<i class="fas fa-cloud fa-2x mb-3" style="color: #ddd;"></i>
<p class="mb-0"><strong>15:00</strong></p>
<p class="mb-0 text-muted" style="font-size: .65rem;">PM</p>
</div>
<div class="flex-column">
<p class="small"><strong>18°C</strong></p>
<i class="fas fa-cloud-showers-heavy fa-2x mb-3" style="color: #ddd;"></i>
<p class="mb-0"><strong>16:00</strong></p>
<p class="mb-0 text-muted" style="font-size: .65rem;">PM</p>
</div>
</div>
</div>
</div>
</div>

</div>
</div>

<div class="card" style="border-radius: 25px;">
<div class="card-body p-4">

<div id="demo3" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators mb-0">
<li data-target="#demo3" data-slide-to="0"></li>
<li data-target="#demo3" data-slide-to="1"></li>
<li data-target="#demo3" data-slide-to="2" class="active"></li>
</ul>
<!-- Carousel inner -->
<div class="carousel-inner">
<div class="carousel-item active">
<div class="d-flex justify-content-around text-center mb-4 pb-3 pt-2">
<div class="flex-column">
<p class="small"><strong>21°C</strong></p>
<i class="fas fa-sun fa-2x mb-3" style="color: #ddd;"></i>
<p class="mb-0"><strong>Mon</strong></p>
</div>
<div class="flex-column">
<p class="small"><strong>20°C</strong></p>
<i class="fas fa-sun fa-2x mb-3" style="color: #ddd;"></i>
<p class="mb-0"><strong>Tue</strong></p>
</div>
<div class="flex-column">
<p class="small"><strong>16°C</strong></p>
<i class="fas fa-cloud fa-2x mb-3" style="color: #ddd;"></i>
<p class="mb-0"><strong>Wed</strong></p>
</div>
<div class="flex-column">
<p class="small"><strong>17°C</strong></p>
<i class="fas fa-cloud fa-2x mb-3" style="color: #ddd;"></i>
<p class="mb-0"><strong>Thu</strong></p>
</div>
<div class="flex-column">
<p class="small"><strong>18°C</strong></p>
<i class="fas fa-cloud-showers-heavy fa-2x mb-3" style="color: #ddd;"></i>
<p class="mb-0"><strong>Fri</strong></p>
</div>
</div>
</div>
</div>
</div>

</div>
</div>

</div>
</div>

</div></br>
<footer>Coded by Paris Calin</footer>
</section>
<link rel="javascript" href="src/index.js" />
</body>
</html>
</html>


105 changes: 105 additions & 0 deletions index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
function searchCity(event) {
event.preventDefault();
let cityInput = document.querySelector("#city-input");

let currentCity = document.querySelector("#current-city");
currentCity.innerHTML = cityInput.value;
}

let form = document.querySelector("form");

form.addEventListener("submit", searchCity);

function convertTemp(event) {
event.preventDefault();
let currentTemp = document.querySelector(".temperature");
currentTemp.innerHTML = "°C";
}

let now = new Date();
console.log(now);
console.log(now.getMilliseconds());
console.log(now.getDay());
console.log(now.getFullYear());
console.log(now.getMonth());

let h3 = document.querySelector("h3");
let date = now.getDate();
let year = now.getFullYear();

let months = [
"Jan",
"Feb",
"March",
"April",
"May",
"June",
"July",
"Aug",
"Sept",
"Oct",
"Nov",
"Dec"
];
let month = months[now.getMonth()];

let days = [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
"Sunday"
];
let day = days[now.getDay()];

h3.innerHTML = `${day}, ${date} ${month} ${year}`;

let h4 = document.querySelector("h4");

let hours = now.getHours();
let minutes = now.getMinutes();
h4.innerHTML = `${hours}:${minutes}`;

function displayWeather(response) {
let temperatureElement = document.querySelector(".temperature");
let temperature = Math.round(response.data.main.temp);
temperatureElement.innerHTML = `${temperature}°C`;
document.querySelector("#current-city").innerHTML = response.data.name;
let humidityElement = document.querySelector("#humidity");
let humidity = Math.round(response.data.main.humidity);
humidityElement.innerHTML = `${humidity}`;
let windElement = document.querySelector("#wind");
let wind = Math.round(response.data.wind.speed);
windElement.innerHTML = `${wind}`;
}

function search(event) {
event.preventDefault();

let apiKey = "e415f3a15e30e3c0aed9dae29f1ce456";
let cityInput = document.querySelector("#city-input");
let city = cityInput.value;
let apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;
axios.get(apiUrl).then(displayWeather);
}

form.addEventListener("submit", search);

function searchLocation(position) {
let apiKey = "e415f3a15e30e3c0aed9dae29f1ce456";
let apiUrl = `https://api.openweathermap.org/data/2.5/weather?lat=${position.coords.latitude}&lon${position.coords.longitude}
&appid=${apiKey}&units=metric`;
axios.get(apiUrl).then(displayWeather);
}

function getCurrentLocation(event) {
event.preventDefault();
navigator.geolocation.getCurrentPosition(searchLocation);
}
let currentLocationButton = document.querySelector("#current-location");

currentLocationButton.addEventListener("click", getCurrentLocation);

78 changes: 78 additions & 0 deletions style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
input {
display: block;
padding: 10px;
margin: 0 auto;
border-color: rgb(203, 203, 245);
border-radius: 10px;
margin-top: 30px;
z-index: 9999;
position: relative;
text-align: center;
font-family: "Kdam Thmor Pro", sans-serif;
}

#current-location {
display: block;
position: center;
border-radius: 10px;
border-color: rgb(203, 203, 245);
padding: 10px;
margin-bottom: 30px;
color: green;
}

::placeholder {
color: green;
}
.vh-100 {
background-color: #c1cfea;
}

.row {
color: #282828;
}

h2 {
font-size: 50px;
}

#celcius {
font-size: 20px;
}

#farenheit {
font-size: 20px;
}

#submit {
padding: 5px;
margin-bottom: 20px;
border-radius: 10px;
border-color: rgb(203, 203, 245);
width: 100px;
color: green;
}
footer {
display: block;
margin: 0 auto;
margin-top: 0px;
z-index: 9999;
position: relative;
text-align: center;
padding-bottom: 10px;
color: white;
font-size: larger;
font-family: "Kdam Thmor Pro", sans-serif;
}
#myVideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}

.carousel-inner {
font-family: "Kdam Thmor Pro", sans-serif;
}

0 comments on commit 62700d6

Please sign in to comment.