Local Weather App

Developer
Hantz Pierre
Size
3,341 Kb
Views
26,312
  1. Local Weather App Previews
  2. Local Weather App HTML Codes
  3. Local Weather App CSS Codes
  4. Local Weather App JS Codes

How do I make an local weather app?

What is a local weather app? How do you make a local weather app? This script and codes were developed by Hantz Pierre on 07 September 2022, Wednesday.

Local Weather App Previews
IQ Test

Local Weather App - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Local Weather App</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header> <div class="row"> <div class="col-lg-12"> <h1>Local Weather</h1> <h2>FreeCodeCamp/Front End</h2> <div id="city"></div> <div id="fTemp"></div> </div> </header> <div class="row"> <div id="results" class="col-xs-4 col-xs-offset-4"> <div id="weatherType"> </div> <div id="weatherIcons"> </div> </div> </div> <div class="button"> <input id="convert-button" type="button" class="btn btn-lg btn-primary" value="Display: °F / °C" /></div> </div> <script src="https://code.jquery.com/jquery-2.2.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Local Weather App - Script Codes CSS Codes

header { text-align: center; display: block;
}
h2,
h1 { text-shadow: 2px 4px 1px #333333;
}
body { font-family: 'Cabin', sans-serif; font-weight: bold; color: white; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 100vh; width: 100vw;
}
.col-lg-12{ max-height: 250px;
}
#city { text-align: center; margin-top: ; text-shadow: 2px 4px 1px #333333; font-size: 2em;
}
#fTemp { text-align: center; font-size: 3em; text-shadow: 2px 4px 2px #333333;
}
#results { text-align: center; font-size: 1.2em; text-shadow: 1px 1px 1px #333333; border: 1px solid #ffffff; border-radius: 2%; padding: 10px 0px 0px 15px; background-color: rgba(147, 175, 196, .4); box-shadow: .2em .2em .2em #222222; max-width: 360px; height: 190px;
}
.wi-day-sunny,
.wi-cloudy,
.wi-rain { margin: 0 auto; padding-top: 5px; font-size: 2.2em; text-shadow: 1px 1px 1px #333333;
}
#wind{
padding-top: 10px;
}
input:focus { outline: 0 !important;
}
.button { margin: 10px auto 0px auto; width: 165px; height: 30px;
}

Local Weather App - Script Codes JS Codes

$(document).ready(function(){ $.getJSON("http://ip-api.com/json", function(geoLocal){ var lat = geoLocal.lat; var long = geoLocal.lon; var city = geoLocal.city; var region = geoLocal.region; var where = "in " + city + ", " + region; var apiUrl = "http://api.openweathermap.org/data/2.5/weather?lat="+lat+"&lon="+long+"&appid=33326ed68f6b699ecb62fa6ced1150c2"; $.getJSON(apiUrl, function (data){ var kTemp = data.main.temp var fTemp; var cTemp; var tempSwap=true; var bgUrl = ['https://dl.dropbox.com/s/dhko7b7cvq92on4/rain.jpg?dl=0','https://dl.dropboxusercontent.com/s/auvvt895mgv6pz3/clear.jpg?dl=0','https://dl.dropboxusercontent.com/s/8lx6sthlxd195ic/cloudy.jpg?dl=0']; // background images for different weather //Var for temperartue change converts from F to C var iconId = data.weather[0].id; var weatherIcon = data.weather[0].icon; var weatherType = data.weather[0].description; var weatherTypeCaps = weatherType.replace(weatherType[0], weatherType[0].toUpperCase()); var windSpeed = data.wind.speed; windSpeed = Math.floor((2.237*(windSpeed))); if (iconId >= 500 && iconId <= 600){ console.log("Rainy"); $("body").css("backgroundImage","url('" + bgUrl[0] + "')"); $(".wi-cloudy").hide(); $(".wi-day-sunny").hide(); } else if (iconId >= 800 && iconId <= 900){ $("body").css("backgroundImage","url('" + bgUrl[2] + "')"); $(".wi-rain").hide(); $(".wi-day-sunny").hide(); console.log("Cloudy"); } else if (iconId == 800){ $(".wi-cloudy").hide(); $(".wi-rain").hide(); console.log("Clear Skies"); } // Assigns fTemp to kTemp's formula to convert it to a n fTemp = Math.floor(kTemp*(9/5)-459.67); cTemp = Math.floor(kTemp - 273); $("#city").html(city); //grabs city location $("#fTemp").html(fTemp +" &#8457"); //grabs ftemp an assigns a F symbol $("#wind").html("Wind Speed: \<br>" + windSpeed + "mph"); //grabs windSpeed and adds MPH to wind speed $("#weatherType").html( "Weather Conditions: " + weatherType + ".."); // If we are not in the ranges mentioned above, add a day/night prefix. $("#convert-button").click(function(){ if (tempSwap === false){ // if ftemp is fTemp var with Faherinheit Character $("#fTemp").html(fTemp +" &#8457"); tempSwap=true; } else{ $("#fTemp").html(cTemp +" &#8451"); tempSwap=false; } });
}); });
});
Local Weather App - Script Codes
Local Weather App - Script Codes
Home Page Home
Developer Hantz Pierre
Username universe360
Uploaded September 07, 2022
Rating 3
Size 3,341 Kb
Views 26,312
Do you need developer help for Local Weather App?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Hantz Pierre (universe360) Script Codes
Name
Responsive Typography
Pomodoro Clock
RGB Guessing Game
Portfolio
Random Wise Quotes
A Pen by Hantz Pierre
Pomodoro clocking
Search Form Styles
JS Calculator
Weather app v.2
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!