Weather App

Developer
Fred Hawk
Size
4,171 Kb
Views
12,144
  1. Weather App Previews
  2. Weather App HTML Codes
  3. Weather App CSS Codes
  4. Weather App JS Codes

How do I make an weather app?

What is a weather app? How do you make a weather app? This script and codes were developed by Fred Hawk on 14 November 2022, Monday.

Weather App Previews
IQ Test

Weather App - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Weather App</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body> <div class="container"> <div class="weather_component"> <h1 class="city"></h1> <div class="flex-cont"> <div class="weather_icon--holder"><img id="weather_icon" src=""></div> <p class="weather"></p> <p class="degrees"></p> </div> <button class="celfahr"></button> </div> </div>
</body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Weather App - Script Codes CSS Codes

h1 { color: rgba(255, 255, 255, 0.8);
}
.container { width: 100vw; height: 100vh; background-image: url(https://41.media.tumblr.com/4130e10646cb5fddb139e1db64afbb3a/tumblr_o21dn3KCWm1v60ddvo1_1280.jpg); background-repeat: no-repeat; background-size: cover; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.weather_component { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.city { background: rgba(27, 27, 95, 0.8); border-radius: 10px 10px 20px 20px; padding: 15px; width: 106%;
}
@media (max-width: 850px) { .city { font-size: 1.2em; width: 80%; }
}
@media (max-width: 400px) { .city { font-size: 1em; width: 90%; }
}
.flex-cont { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 2em; background: rgba(255, 255, 255, 0.8); border-radius: 25px; border: 2px solid #4051b5; width: 110%; line-height: 0;
}
@media (max-width: 850px) { .flex-cont { font-size: 1.2em; width: 80%; }
}
@media (max-width: 400px) { .flex-cont { font-size: 1em; width: 100%; }
}
.celfahr { background: #4051b5; border-radius: 15px; color: white; width: 25%; margin-top: 25px; font-size: 1.1em;
}
@media (max-width: 550px) { .celfahr { font-size: 1em; width: 50%; }
}
.weather { color: #4051b5;
}
.degrees { color: #4051b5; font-size: 1.2em;
}
@media (max-width: 400px) { .degrees { font-size: 1em; }
}
#weather_icon { width: 60px;
}

Weather App - Script Codes JS Codes

$(document).ready(function() { // Call getLocation function getLocation(); function getLocation() { // Get clients longitude and latitude through freegeoip.net $.ajax({ url: 'http://freegeoip.net/json/?callback=?', data: { format: 'json' }, dataType: 'json', success: function(location) { // Set the headline and add it to the DOM with the City, Country names. $('.city').append('The weather in ' + location.city + ", " + location.country_name); // Check for unit, Celsius or Fahrenheit based on country. var unit = getUnit(location.country_code); // Send longitude and latitude and the unit to the getWeather function getWeather(location.latitude, location.longitude, unit); } }); } function getWeather(latitude, longitude, unit) { // Assign long and lat and weatherAPI url var lat = latitude; var long = longitude; var weatherApiUrl = 'http://api.openweathermap.org/data/2.5/weather?lat=' + lat + '&lon=' + long + '&units=' + unit + '&appid=92a0005dc260689c48f556405c2a3047'; // Get the weather at the longitude and latitude from the weater API $.ajax({ url: weatherApiUrl, data: { format: 'json' }, dataType: 'json', success: function(weather) { // Assign temperature and declare unitLabel var temperature = weather.main.temp; var unitLabel; //Change label based on if the country uses metric or imperial system if (unit === "imperial") { unitLabel = "F"; } else { unitLabel = "C"; } // Make temperature a decimal number with 2 decimals temperature = parseFloat((temperature).toFixed(2)); // Add the temperature and the unitlabel to the dom based on if its // celsius or fahrenheit and change the button text accordingly $('.degrees').append(temperature + " &deg;" + unitLabel); if (unitLabel === "C") { $('.celfahr').text("Change to Fahrenheit"); } else { $('.celfahr').text("Change to Celcius"); } // When pressing the change to ... button do some math and change the text $('.celfahr').on('click', function() { if (unitLabel == "C") { var fahrenheit = (temperature * 9 / 5 + 32).toFixed(2); unitLabel = "F"; $(".degrees").text(fahrenheit).append(" &deg;" + unitLabel); $('.celfahr').text("Change to Celcius"); temperature = fahrenheit; } else { var celsius = ((temperature - 32) * 5 / 9).toFixed(2); unitLabel = "C" $(".degrees").text(celsius).append(" &deg;" + unitLabel); $('.celfahr').text("Change to Fahrenheit"); temperature = celsius; } }); // Get the weatherIcon and the weathercondition var openWeatherLink = 'http://openweathermap.org/img/w/'; var weatherIcon = weather.weather[0].icon; var weatherCondition = weather.weather[0].description; // Add icon and condition to DOM $('#weather_icon').attr('src', openWeatherLink + weatherIcon + ".png"); $('.weather').text(weatherCondition); } }); } // Unit function to see if the country uses metric (celsius) // or imperial (fahrenheit) system function getUnit(country) { var imperialCountries = ['US', 'BS', 'BZ', 'KY', 'PW']; if (imperialCountries.indexOf(country) === -1) { var unit = 'metric'; } else { unit = 'imperial'; } return unit; }
});
Weather App - Script Codes
Weather App - Script Codes
Home Page Home
Developer Fred Hawk
Username osycon
Uploaded November 14, 2022
Rating 3
Size 4,171 Kb
Views 12,144
Do you need developer help for 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!

Fred Hawk (osycon) Script Codes
Name
CSS Flexbox 3 col example
Quotastic
Weekly UI - Become a member
Weekly UI - Stripe - Pricing section
Weekly UI - Dropbox Hero Component
Weekly UI - Statue of liberty
Weekly UI - Invisionapp Sign up
Pomodoro Clock
Portfolio example FCC
Collapsing Text Animation
Create amazing blog posts 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!