Local Weather App - FreeCodeCamp

Developer
Trevor Welch
Size
4,134 Kb
Views
2,024
  1. Local Weather App - FreeCodeCamp Previews
  2. Local Weather App - FreeCodeCamp HTML Codes
  3. Local Weather App - FreeCodeCamp CSS Codes
  4. Local Weather App - FreeCodeCamp JS Codes

How do I make an local weather app - freecodecamp?

What is a local weather app - freecodecamp? How do you make a local weather app - freecodecamp? This script and codes were developed by Trevor Welch on 01 February 2023, Wednesday.

Local Weather App - FreeCodeCamp Previews
IQ Test

Local Weather App - FreeCodeCamp - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Local Weather App - FreeCodeCamp</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="main"> <div class="loading"> <img src="https://phette23.github.io/speed-is-a-feature/img/loadingBar.gif"> </div> <div class="content hidden"> <p class="title opa2">Local Weather App</p> <div class="content"> <p class="temp-text"> <span id="degree"></span>&#176;<span id="metric">F</span> </p> <p class="weather-text" id="weather"></p> <p class="location-text"><span id="city"> </span> </p> <p class="created-text opa2">Created by <a href="https://www.freecodecamp.com/trevor-welch">Trevor Welch</a></p> </div> <div class="opa3"> Powered by <a href="http://openweathermap.org/">OpenWeatherApp API</a> , <a href="https://developers.google.com/maps/">Google Maps API</a> , <a href="https://db-ip.com/">DB-IP</a> , <a href="https://cors-anywhere.herokuapp.com/">Cors-Anywhere</a> , and <a href="https://ipinfo.io/">IpInfo</a>. </div> </div> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Local Weather App - FreeCodeCamp - Script Codes CSS Codes

@import url('https://fonts.googleapis.com/css?family=Roboto');
*{ margin:0; padding:0;
}
body{ background:#212121; color:#fff; font-family: 'Roboto', sans-serif;
}
.hidden{ display:none;
}
.opa2{ opacity:0.7;
}
.opa3{ opacity:0.5;
}
.container{ min-width:100vw; min-height:100vh; text-align:center; display:flex; align-items:center;
}
.main{ margin:60px auto; max-width:600px;
}
.title{ font-size:32px; line-height:40px; margin-bottom:40px;
}
.temp-text{ font-size:72px; line-height:80px;
}
.weather-text{ font-size:32px; line-height:40px; margin-bottom:40px;
}
.location-text{ font-size:40px; line-height:48px;
}
.created-text{ margin:40px 0;
}
a{ color:#FFC400; text-decoration:none;
}
a:hover{ color:#FFE57F;
}
#data{ color:red;
}

Local Weather App - FreeCodeCamp - Script Codes JS Codes

/*
Okay, so I originally wrote this page using navigator.geolocation, but then it turns out it became deprecated, so I rewrote it to work over HTTP requests.
I've see a lot of FCC Weather Apps use some EXTREMELY inaccurate ways to find your location, so I wanted something more accurate.
Let's break down what's going on here:
1: Get IP from ipInfo
2: Use IP to get city name from DB-IP, which for me was the most accurate source. **Now, for some reason DB-IP has cross-domain issues with CodePen, so we use cors-anywhere to bypass this issue
2.5: Since cors-anywhere returns a string, we just parse it as a JSON and continue with the program
3: Use Google Maps API to get a very accurate lat, long coordinate which can then be thrown at any weather API for accurate weather.
4: I used OpenWeatherApp since they have a free API key program, but it returns Kelvin.
5: We take the Kelvin temp, convert it to Farhenheit, then round it to look nice.
6: After all the behind the scenes work is done, the page fades the loading gif out and fades in the hidden page with all the data.
I am very well aware there are much better ways to do this exact same thing rather than multiple AJAX calls like this, but I wanted something about < 5 miles accurate, not ~50 miles accuracy.
*/
function getWeather(lat, lng){ $.ajax({ type: "GET", dataType: "jsonp", url:"http://api.openweathermap.org/data/2.5/weather?lat="+lat+"&lon="+lng+"&appid=e110fd839cf139f199662513bce3a30f" }).done(function(data){ $("#degree").html(Math.floor(data.main.temp*(9/5)-459.67)); //OpenWeatherApp uses Kelvin. This just fixes that. $("#weather").html(data.weather[0].main); $(".loading").fadeOut(500).addClass("hidden"); //Time to pull back the curtains $(".content").fadeIn(500).removeClass("hidden"); //And let the magic appear before the user's eyes });
}
function getLocation(city){ $.ajax({ type: "GET", dataType: "json", url:"https://maps.google.com/maps/api/geocode/json?address="+city//Let me tell you what, this API is actually really useful }).done(function(data){ getWeather(data["results"][0]["geometry"]["location"]["lat"], data["results"][0]["geometry"]["location"]["lng"]); //Google's response is pretty complex. This is an easy way to say "Pass the Lat and Long to the next AJAX function. })
}
function getCity(ip){ $.ajax({ type: "GET", url:"https://cors-anywhere.herokuapp.com/http://api.db-ip.com/v2/c3d6224cfa94e64f74a176ab08e478f0ec8d8976/"+ip //Cors-Anywhere is a neat way to bypass cross-domain requests. Without it, this request to DB-IP would actually fail }).done(function(data){ data = JSON.parse(data); //Cors-Anywhere returns a string. Let's fix this and get our JSON back. $("#city").html(data.city+", "+data.stateProv); getLocation(encodeURI(data.city+","+data.stateProv)); //We can build a string to pass to the next function, make's it easy. });
}
function getIP(){ //Cheapest way I can think of getting a user's IP. $.ajax({ type: "GET", url:"http://ipinfo.io/json", dataType : "json" }).done(function(data){ getCity(data.ip); });
}
getIP(); //Actually run the code
/*
FUTURE IMPROVEMENTS:
1: Dont use jQuery - All of this code can be translated to Vanilla Javascript, but for the purpose of quickly making this app, I went with jQuery. If I come back and remove that dependancy, the app will load much faster.
2: Make this process exportable - Im pretty sure if allow users to insert their own keys into this some how, I could make this code snippet something that can be used elsewhere.
Example:
var ACCURATE_COORDINATES = getLocationByIP(keyForDBIP, keyForOpenWeatherApp);
A man can dream, right?
*/
Local Weather App - FreeCodeCamp - Script Codes
Local Weather App - FreeCodeCamp - Script Codes
Home Page Home
Developer Trevor Welch
Username TrevorWelch
Uploaded February 01, 2023
Rating 3
Size 4,134 Kb
Views 2,024
Do you need developer help for Local Weather App - FreeCodeCamp?

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!

Trevor Welch (TrevorWelch) Script Codes
Name
FreeCodeCamp - Portfolio
TicTacToe - FreeCodeCamp
Button
React - Click the Cookie
FreeCodeCamp - Tribute Page
Wikipedia API - FreeCodeCamp
StopButton MockUp
Twitch API - FreeCodeCamp
List features
Flat UI Calculator - FreeCodeCamp
Create amazing web content 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!