Weather generator

Developer
Alex Sperellis
Size
2,614 Kb
Views
14,168
  1. Weather generator Previews
  2. Weather generator HTML Codes
  3. Weather generator CSS Codes
  4. Weather generator JS Codes

How do I make an weather generator?

What is a weather generator? How do you make a weather generator? This script and codes were developed by Alex Sperellis on 20 December 2022, Tuesday.

Weather generator Previews
IQ Test

Weather generator - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>weather generator</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section class='weather'> <img class='weather-icon' alt='Weather'> <button class='weather-temp'></button> <h1><span class='weather-title'></span> in <span class='weather-location'></span></h1> <p>Click temperature to change units</p>
</section> <script src="js/index.js"></script>
</body>
</html>

Weather generator - Script Codes CSS Codes

body {
background: #ff9966; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #ff5e62, #ff9966); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #ff5e62, #ff9966); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ font-family: 'Helvetica', Arial, sans-serif;
}
.weather { display:flex; flex-direction: column; width: 300px; align-items: center; margin: 0 auto; color: #fff;
}
.weather-location { margin-top: 0; margin-bottom: 5px;
}
.weather-temp { margin-top: 0; margin-bottom: 5px; font-size: 65px; background: none; border: none; color: #fff; cursor: pointer; outline: none;
}
.weather-title { margin-top: 20px; margin-bottom: 5px;
}
.weather-icon { width: 50px; height: 50px;
}

Weather generator - Script Codes JS Codes

function changeTemp() { const tempText = temp.innerHTML; const tempUnit = tempText.slice(tempText.length-1); let tempInt = parseFloat(tempText.slice(0,-1), 10); if(tempUnit.toLowerCase() === 'c') { // convert to f tempInt = (tempInt * 1.8) + 32; temp.innerHTML = Math.round(tempInt * 100) / 100 + 'F'; } else { // convert to c tempInt = (tempInt - 32) / 1.8; temp.innerHTML = Math.round(tempInt * 100) / 100 + 'C'; }
}
function updateWeather(data) { const location = document.querySelector('.weather-location'); const temp = document.querySelector('.weather-temp'); const title = document.querySelector('.weather-title'); const icon = document.querySelector('.weather-icon'); location.innerHTML = data.name + ', ' + data.sys.country; temp.innerHTML = data.main.temp + 'C'; title.innerHTML = data.weather[0].main; icon.setAttribute('src', data.weather[0].icon);
}
function getWeather(lat, long){ return fetch('https://fcc-weather-api.glitch.me/api/current?lat='+lat+'&lon='+long).then((res) => { return res.json().then(json => ({ json, res })); }).then(({ json, res }) => { if(!res.ok) { return Promise.reject(json); } updateWeather(json); });
}
function geo_success(position) { getWeather(position.coords.latitude, position.coords.longitude);
}
function geo_error() { alert("Sorry, no position available.");
}
const temp = document.querySelector('.weather-temp');
const geo_options = { enableHighAccuracy: true, maximumAge : 30000, timeout : 27000
};
const getLocation = navigator.geolocation.watchPosition(geo_success, geo_error, geo_options);
temp.onclick = changeTemp;
Weather generator - Script Codes
Weather generator - Script Codes
Home Page Home
Developer Alex Sperellis
Username asperellis
Uploaded December 20, 2022
Rating 3
Size 2,614 Kb
Views 14,168
Do you need developer help for Weather generator?

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!

Alex Sperellis (asperellis) Script Codes
Name
Floating Form Labels and Parsley Validation Tests
Wiki viewer
Mobile Navigation
Credit Card Form with Parsley Validation
Landing Page Html
Highlights
Quote generator
Responsive Modal
Map infobox
Window.print test
Create amazing Facebook ads 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!