Local Weather App v1.0

Developer
Tyler Moeller
Size
5,098 Kb
Views
14,168
  1. Local Weather App v1.0 Previews
  2. Local Weather App v1.0 HTML Codes
  3. Local Weather App v1.0 CSS Codes
  4. Local Weather App v1.0 JS Codes

How do I make an local weather app v1.0?

Developed for the freeCodeCamp Intermediate Front-end Development Challenge: Show the Local Weather.Details: http://www.freecodecamp.com/challenges/show-the-local-weather. What is a local weather app v1.0? How do you make a local weather app v1.0? This script and codes were developed by Tyler Moeller on 05 November 2022, Saturday.

Local Weather App v1.0 Previews
IQ Test

Local Weather App v1.0 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Local Weather App v1.0</title> <meta property="og:locale" content="en_US">
<meta property="og:type" content="website">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.min.css" type="text/css">
<link rel="stylesheet prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons-wind.min.css" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- **** *** *** *** *** **** * Copyright (C) 2015 Tyler Moeller. All rights reserved. * * All trademarks, product names, and logos on this site * * are the property of their respective owners. * **** *** *** *** *** ****
Assignment Details: - Developed for the freeCodeCamp zipline project: Zipline: Show the Local Weather. - Details: https://freecodecamp.com/challenges/zipline-show-the-local-weather
Requirements for this assignment: - Without looking at the code used, attempt to reverse engineer: https://codepen.io/AdventureBear/full/yNBJRj - Provide the user with weather for their current location - Bonus: show an icon representing the weather conditions - Bonus: show a background that corresponds to current weather conditions - Bonus: provide a button to toggle between F / C.
Assignment Completed. v1.0 9/27/2015: - Responsive deisgn using JavaScript, jQuery, HTML5, and Bootstrap + Weather-Icons CSS libraries. - Retrieves reverse geocode data + weather for the user's location - Displays appropriate icon to reflect weather conditions - Displays a wind direction icon to match the current wind direction - Changes background according to weather conditions - Toggles temperature between F / C - Alerts the user and falls back to Seattle weather if the browser blocks location
To Do: - flags for countries? Search for a city? Other features?
-->
<div class="container"> <div id="error"></div> <div id="city"></div> <div id="temperature"></div> <div id="results"> <div id="condition"></div> <div id="wind-speed"></div> </div> <div> <input id="convert-button" type="button" class="btn btn-lg btn-primary" value="Display: °F / °C" /> </div>
</div>
<footer class="footer"> <div class="container-fluid text-center"> <div class="footer-text text-muted row">Copyright &copy; <script>document.write(new Date().getFullYear());</script> Tyler Moeller. All rights reserved. Developed for the freeCodeCamp Intermediate Front-end Development Challenge: <a href="https://www.freecodecamp.com/challenges/show-the-local-weather" target="_blank">Show the Local Weather</a></div> <div class="footer-logos row"> <a href="https://twitter.com/Tyler_Moeller" target="_blank"><i class="fa fa-twitter"></i></a> <a href="https://www.linkedin.com/in/tylermoeller" target="_blank"><i class="fa fa-linkedin"></i></a> <a href="https://github.com/TylerMoeller" target="_blank"><i class="fa fa-github"></i></a> <a href="https://freecodecamp.com/tylermoeller" target="_blank"><i class="fa fa-fire"></i></a> <a href="https://codepen.io/TylerMoeller/pens/public" target="_blank"><i class="fa fa-codepen"></i></a> <a href="https://tylermoeller.net" target="_blank"><i class="fa fa-wordpress"></i></a> </div> </div>
</footer>
<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="js/index.js"></script>
</body>
</html>

Local Weather App v1.0 - Script Codes CSS Codes

html { min-height: 100%; position: relative;
}
body { background-attachment: fixed;	background-color: #222222; background-position: center; background-repeat: no-repeat; background-size: cover; color: white; font-family: 'Cabin', sans-serif; font-weight: bold; min-width: 320px; text-align: center;
}
#error {	font-size: 1.5em;	margin: 1em 0 0 2em; text-align: left;
}
#error a {	color: #328CBF;	text-decoration: underline;
}
#city { font-size: 2em; text-shadow: 2px 4px 1px #333333;
}
#temperature { font-size: 3em; text-shadow: 2px 4px 2px #333333;
}
#results { margin-bottom: 1.5em;
}
#condition,
#wind-speed { background-color: #93AFC4; background-color: rgba(147, 175, 196, .4); border: 2px solid #ffffff; border-radius: 50%; box-shadow: .2em .2em .2em #222222; display: inline-block; font-size: 1.2em; margin: .5em; min-height: 6em; min-width: 10em; padding: 1.3em; text-shadow: 1px 1px 1px #333333;
}
#convert-button { margin-bottom: 10em;
}
.wi { font-size: 2em;
}
/* footer formatting */
.footer { background-color: #222222; border-top: 1px solid black; bottom: 0; font-size: 12px; font-weight: normal; margin-top: 5em; min-width: 320px; padding: 1em 1em 0 1em; position: absolute; width: 100%;
}
.footer-logos { font-size: 14px; margin-top: -1em;
}
.footer-logos a { text-decoration: none;
}
.footer-logos i { border: 1px solid #646464; border: 1px solid rgba(100, 100, 100, .3); border-radius: 25%; color: #777777; margin: 0 0 1em 1em; padding-top: .25em; text-align: center; vertical-align: -1.5em;
}
.footer-logos .genericon { height: 1.6em; width: 1.6em;
}
.footer-logos .fa { height: 1.75em; width: 1.75em;
}
.footer .container-fluid { max-width: 480px;
}

Local Weather App v1.0 - Script Codes JS Codes

$(document).ready(function() { getLocation(); // add a spinner icon to areas where data will be populated $('#condition').html('<i class="fa fa-spinner fa-pulse fa-3x"></i>'); $('#wind-speed').html('<i class="fa fa-spinner fa-pulse fa-3x"></i>');
});
function getLocation() { // Using the GEO IP API due to HTTP restrictions from OpenWeatherMap $.getJSON('https://freegeoip.net/json/?callback=?', function(loc) { $('#city').text(loc.city + ', ' + loc.region_name + ', ' + loc.country_name); getWeather(loc.latitude, loc.longitude, loc.country_code); }) .fail(function(err) { getWeather(); });
}
function getWeather(lat, lon, countryCode) { var weatherAPI = 'http://api.openweathermap.org/data/2.5/weather?lat=' + lat + '&lon=' + lon + '&units=imperial' + '&type=accurate' + callback; if(window.location.protocol === 'https:') weatherAPI = 'https://cors-anywhere.herokuapp.com/' + weatherAPI $.getJSON(weatherAPI, function(weatherData) { // Also used by convert(); temp = weatherData.main.temp.toFixed(0); tempC = ((temp - 32) * (5 / 9)).toFixed(0); var condition = weatherData.weather[0].description, id = weatherData.weather[0].id, speed = Number((weatherData.wind.speed * 0.86897624190816).toFixed(1)), deg = weatherData.wind.deg, windDir, iconClass, bgIndex, backgroundId = [299, 499, 599, 699, 799, 800], backgroundIcon = [ 'thunderstorm', 'sprinkle', 'rain', 'snow', 'fog', 'night-clear', 'cloudy', ], backgroundImg = [ 'https://tylermoeller.github.io/local-weather-app/assets/img/thunderstorm.jpg', 'https://tylermoeller.github.io/local-weather-app/assets/img/sprinkle.jpg', 'https://tylermoeller.github.io/local-weather-app/assets/img/rain.jpg', 'https://tylermoeller.github.io/local-weather-app/assets/img/snow.jpg', 'https://tylermoeller.github.io/local-weather-app/assets/img/fog.jpg', 'https://tylermoeller.github.io/local-weather-app/assets/img/clear.jpg', 'https://tylermoeller.github.io/local-weather-app/assets/img/cloudy.jpg', ]; backgroundId.push(id); bgIndex = backgroundId.sort().indexOf(id); $('body').css('background-image', 'url(' + backgroundImg[bgIndex] + ')'); iconClass = backgroundIcon[bgIndex]; //Get wind compass direction. If API returns null, assume 0 degrees. if (deg) { var index = Math.floor((deg / 22.5) + 0.5) % 16, compassDirections = ['N', 'NNE', 'NE', 'ENE', 'E', 'ESE', 'SE', 'SSE', 'S', 'SSW', 'SW', 'WSW', 'W', 'WNW', 'NW', 'NNW', ], windDir = compassDirections[index]; } else { windDir = 'N'; } //determine F or C based on country and add temperature to the page. var fahrenheit = ['US', 'BS', 'BZ', 'KY', 'PL']; if (fahrenheit.indexOf(countryCode) > -1) { $('#temperature').text(temp + '° F'); } else { $('#temperature').text(tempC + '° C'); } //write final weather conditions and wind information to the page $('#wind-speed').html( '<i class="wi wi-wind wi-from-' + windDir.toLowerCase() + '"></i><br>' + windDir + ' ' + speed + ' knots'); $('#condition').html( '<i class="wi wi-' + iconClass + '"></i><br>' + condition); }) .fail(function(err) { alert('There was an error retrieving your weather data. \n' + 'Please try again later.'); });
}
//toggle between celsius / fahrenheit
$('#convert-button').click(function() { if ($('#temperature').text().indexOf('F') > -1) { $('#temperature').text(tempC + '° C'); } else { $('#temperature').text(temp + '° F'); } this.blur(); // remove focus from the button
});
var callback = '&APPID=9b67d777fb8343a987c5f7c6a2ed149b';
Local Weather App v1.0 - Script Codes
Local Weather App v1.0 - Script Codes
Home Page Home
Developer Tyler Moeller
Username TylerMoeller
Uploaded November 05, 2022
Rating 3.5
Size 5,098 Kb
Views 14,168
Do you need developer help for Local Weather App v1.0?

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!

Tyler Moeller (TylerMoeller) Script Codes
Name
Twitch JSON API Example
IslandJS - Bootstrap
Show the Local Weather v2
CSS Waves
Material Design Weather Widget
Simon Says
Build a Tribute Page
React Markdown Previewer
NodeSchool Survey Example
Basic Website - Materialize
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!