<html>
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Show Me The Weather</title>
</head>
<body>
<div class = "backgroundContainer">
<div class="titleContainer container">
<h1 class="appTitle">Show Me The Weather</h1>
</div>
<div class="data container text-center">
<div id="location"></div>
<div id="dateTime"></div>
<div id="weatherType"></div>
<div id="airMoisture"></div>
<div id="wind"></div>
<div id="temp">
<p id="celsiusTemp"></p>
<p id="farenheitTemp"></p>
<button class="btn btn-primary btn-lg" id="button">℃ / ℉</button>
</div>
</div>
</body>
<footer>
<div class="social text-center center-block">
<ul>
<li><a href="https://www.facebook.com/harunpehlivan" target="_blank"><i class="fa fa-lg fa-facebook"></i></a></li>
<li><a href="https://instagram.com/harunpehlivantr" target="_blank"><i class="fa fa-lg fa-instagram"></i></a></li>
<li><a href="https://wa.me/905527410904" target="_blank"><i class="fa fa-lg fa-whatsapp"></i></a></li>
<li><a href="https://twitter.com/harunpehlivan" target="_blank"><i class="fa fa-lg fa-twitter"></i></a></li>
<li><a href="https://github.com/harunpehlivan" target="_blank"><i class="fa fa-lg fa-github"></i></a></li>
<li><a href="https://www.linkedin.com/in/harunpehlivan" target="_blank"><i class="fa fa-lg fa-linkedin"></i></a></li>
<li>
<a href="https://www.freecodecamp.com/harunpehlivan" target="_blank" title="See my Free Code Camp profile!">
<i class="fa fa-fire fa-lg"></i></li>
</a>
</ul>
</div>
<p>Created and Coded by HARUN PEHLİVAN 2024 -2025</p> </footer>
</html>
html {
margin: 0px;
padding: 0px;
height: 100%;
}
body {
margin: 0;
height: 100%;
}
.backgroundContainer{
background: black;
padding: 5em;
/background: no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.titleContainer {
margin-bottom: 50px;
}
.appTitle {
text-align: center;
font-size: 60px;
font-family: Arial, Helvetica, sans-serif;
font-weight: thick;
color: white;
2px 2px 1px #20293F,
-2px -2px 1px #20293F,
-2px 2px 1px #20293F,
2px -2px 1px #20293F;
}
.container {
font-weight: 700;
color: white;
font-size: 30px;
text-shadow: 0 0 15px #20293F;
font-family: Verdana, Geneva, sans-serif
}
.data {
padding: 1em;
}
#celsiusTemp {
display: none;
}
.myButton {
-moz-box-shadow:inset 0px -3px 7px 0px #29bbff;
-webkit-box-shadow:inset 0px -3px 7px 0px #29bbff;
box-shadow:inset 0px -3px 7px 0px #29bbff;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #2dabf9), color-stop(1, #0688fa));
background:-moz-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
background:-webkit-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
background:-o-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
background:-ms-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
background:linear-gradient(to bottom, #2dabf9 5%, #0688fa 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2dabf9', endColorstr='#0688fa',GradientType=0);
background-color:#2dabf9;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
border:1px solid #0b0e07;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:15px;
padding:9px 23px;
text-decoration:none;
text-shadow:0px 1px 0px #263666;
}
.myButton:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0688fa), color-stop(1, #2dabf9));
background:-moz-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
background:-webkit-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
background:-o-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
background:-ms-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
background:linear-gradient(to bottom, #0688fa 5%, #2dabf9 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0688fa', endColorstr='#2dabf9',GradientType=0);
background-color:#0688fa;
}
.myButton:active {
position:relative;
top:1px;
}
footer {
padding-top:300px;
font-size:20px;
font-weight:200px;
text-align:center;
color:#2b303b;
}
.social {
margin: 0;
padding: 0;
}
.social ul {
margin: 0;
padding: 5px;
}
.social ul li {
margin: 5px;
list-style: none outside none;
display: inline-block;
}
.social i {
width: 40px;
height: 40px;
color: #FFF;
background-color: #909AA0;
font-size: 22px;
text-align: center;
padding-top: 12px;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-o-border-radius: 50%;
transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
}
.social i:hover {
color: #FFF;
text-decoration: none;
transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
}
.social .fa-facebook:hover {
/* round facebook icon*/
background: #4060A5;
}
.social .fa-twitter:hover {
/* round twitter icon*/
background: #00ABE3;
}
.social .fa-linkedin:hover {
/* round linkedin icon*/
background: #0094BC;
}
.social .fa-github:hover {
/* round github icon*/
background: #343434;
}
.social .fa-fire:hover {
/* round github icon*/
background: #008000;
}
$(document).ready(function() {
// call function to get the user's location
getUserLocation();
var momemntDate = moment();
console.log(momemntDate.format('ddd MMM, YYYY'));
var dateString = momemntDate.format('ddd MMM DD, YYYY');
//display the date and time
// var today = new Date();
// console.log("date " + today);
document.getElementById("dateTime").innerHTML = moment().format("MMMM Do YYYY, h:mm:ss a");
//allows the button to display either farenheit or celsius when clicked
$("#button").click(function() {
$("#farenheitTemp").toggle();
$("#celsiusTemp").toggle();
});
});
//get the user's location
var getUserLocation = function() {
// Geolocation Data Locator
var LATITUDE, LONGITUDE;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
function(position) { // geolocation success
LONGITUDE = position.coords.longitude;
LATITUDE = position.coords.latitude;
// call the get weather and get location functions
getWeather(LATITUDE, LONGITUDE);
getLocationName(LATITUDE, LONGITUDE);
},
function(positionError) { // geolocation error
console.warn("ERROR(' + positionError.code + '): " + positionError.message);
alert("Please enable geolocation.");
});
}
};
var getLocationName = function(lat, long) {
var locationCall = "https://maps.googleapis.com/maps/api/geocode/json?latlng=" + lat + "," + long + "&key=AIzaSyCViLYBfAt-182hIVoBJU_4uMOVWRMbTo8";
console.log(locationCall);
$.ajax({
url: locationCall,
success: function(data) {
var city = data.results[0].address_components[2].long_name;
var locObj = {
city: city
};
console.log(city);
displayLocation(locObj);
},
error: function(jqXHR, textStatus, errorThrown) {
console.log("error getting location");
console.log(jqXHR);
console.log(textStatus);
console.log(errorThrown);
}
});
};
/*****************************************************************************
* getWeather
* call the weather API and get the weather information
*/
var getWeather = function(lat, long) { //API with geolocation
var apiCall = "https://api.forecast.io/forecast/" + "29bbab42b5f516976fdfa806e68d54d6" + "/" +
+lat + "," + long;
console.log(apiCall);
$.ajax({
url: apiCall,
dataType: "jsonp",
success: function(data) {
var weatherDescrip = data.currently.summary;
var airMoisture = data.currently.humidity;
var farenheit = data.currently.temperature;
var windSpeed = data.currently.windSpeed;
var weatherIcon = data.currently.icon;
var weatherObj = {
weatherDescrip: weatherDescrip,
airMoisture: airMoisture,
farenheit: farenheit,
windSpeed: windSpeed,
weatherIcon: weatherIcon
};
displayWeather(weatherObj);
console.log("here");
console.log(data);
},
error: function(jqXHR, textStatus, errorThrown) {
console.log("error getting weather");
console.log(jqXHR);
console.log(textStatus);
console.log(errorThrown);
}
});
};
// display the location data via the html element assigned
function displayLocation(location) {
$("#location").html(location.city);
}
//display the type of weather via the html element assigned
function displayWeather(weather) {
$("#weatherType").html(weather.weatherDescrip);
//allows the background picture to change as the weather.icon data from the api changes, which is dependent on the type of weather occurring.
var backgroundImageChange = weather.weatherIcon;
var weatherImageName;
switch (backgroundImageChange) {
case "clear-day":
weatherImageName = "v1464200456/photo-1422405153578-4bd676b19036_amruhd.jpg";
break;
case "clear-night":
weatherImageName = "v1464200354/photo-1443456066412-3e3ea69ee37c_nxzzyv.jpg";
break;
case "fog":
weatherImageName = "v1464200391/photo-1434532628716-fb9cef84f469_ip1wjz.jpg";
break;
case "sleet":
weatherImageName = "v1464398173/nNsxaPH_r57oy4.jpg";
break;
case "rain":
weatherImageName = "v1464200393/photo-1433863448220-78aaa064ff47_xfu5hs.jpg";
break;
case "wind":
weatherImageName = "v1464200415/7a2fd8ac_uokc4h.jpg";
break;
case "cloudy":
weatherImageName = "v1464200375/photo-1448032279986-c25cf997c38e_fmfkk8.jpg";
break;
case "snow":
weatherImageName = "v1464200361/photo-1431036101494-66a36de47def_ugasc1.jpg";
break;
case "partly-cloudy-day":
weatherImageName = "v1464200436/158H_hkwqzm.jpg";
break;
case "partly-cloudy-night":
weatherImageName = "v1464398621/EyXTy5t_hmybfw.jpg";
break;
case "hail":
weatherImageName = "v1464200423/hail_r6kprs.jpg";
break;
case "thunderstorm":
weatherImageName = "v1464398837/j3MHfVb_ij1uyb.jpg";
break;
case "tornado":
weatherImageName = "v1464200424/9WTNHBFJUX_upj8yp.jpg";
break;
default:
weatherImageName = "v1464200420/photo-1460500063983-994d4c27756c_rgonym.jpg";
break;
}
var imgURLString = "https://res.cloudinary.com/angiemjohnson/image/upload/" + weatherImageName;
console.log(imgURLString);
// connects the background image to the body of the app.
$(".backgroundContainer").css("background-image", "url(" + imgURLString + ")");
//Displaying humidity value
var humidity = humidityToPercent(weather.airMoisture);
$("#airMoisture").html(humidity + "% " + " Humidity");
//Displaying windspeed in mph as oppose to miles/sec
var windSpeedChange = windSpeedConversion(weather.windSpeed);
$("#wind").html(windSpeedChange + " mph " + " wind");
//calling the function celToFar to convert from Farenheit to Celsius
var cTemp = farToCel(weather.farenheit);
// Displaying Celsius and Farenheit values
$("#celsiusTemp").html(cTemp + "℃");
$("#farenheitTemp").html(weather.farenheit.toFixed(0) + "℉");
}
//convert humidity to a percent
function humidityToPercent(airMoisture) {
return (airMoisture * 100).toFixed(0);
}
// convert farenheit to celsius
function farToCel(farenheit) {
return ((farenheit - 32) * 5 / 9).toFixed(0);
}
// rounds the wind value to the nearest integer
function windSpeedConversion(windSpeed) {
return Math.round(windSpeed);
}
