Weather App 2

Developer
Size
2,877 Kb
Views
48,576

How do I make an weather app 2?

What is a weather app 2? How do you make a weather app 2? This script and codes were developed by Joe Warren on 25 September 2022, Sunday.

Weather App 2 Previews

Weather App 2 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Weather App 2</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html>
<head>	<link rel="stylesheet" type="text/css" href="styles.css">	<title>Little Elm Weather</title>
</head>
<body>
<div class="container">	<p>	<span id="cityName"></span>	</p>	<p>Texas, <span id="countryName"></span>	</p>	<p>	<span id="date"></span>	</p>	<div>	<img id="weather-icon" src />	<div>	<span id="weather-main"></span>, <span id="weather-main-details"></span>	</div>	</div>	<p>	<h1>	<strong id="temp"></strong><sup>&deg;<span id="degreeType">F</span></sup>	</h1>	<button onclick="toggleTempType()">Switch to Celcius</button> <!-- () means to execute or call the function -->	</p>	<!-- <p>Pressure:	<span id="pres"></span>	</p> -->	<p> Wind Speed:	<span id="wind"</span>	</p>	<pre id="ajax"></pre>	<script type="text/javascript" src="script.js"></script>
</div> <!-- container -->
</body>
</html> <script src="js/index.js"></script>
</body>
</html>

Weather App 2 - Script Codes CSS Codes

.container {	width: 50%;	margin: 0 auto;
}
#cityName{	font-size: 3em;
}
body {	color: white;	/*background: -webkit-radial-gradient(circle, white, #3ebef9);*/	/*background: linear-gradient(35deg, #CCFFFF, #FFCCCC);*/	background-image: url("http://background.tjeute.be/wp-content/uploads/2011/04/background-12.jpg");
}

Weather App 2 - Script Codes JS Codes

// 1. Creating the request to send the server
console.clear();
var tempState = "F";
var temperature = 0;
var data;
var today = new Date();
var date = (today.getMonth()+1)+'-'+today.getDate()+'-'+today.getFullYear();
document.querySelector('#date').innerHTML = date;
function kelvinToF(degreesKelvin){ return (9/5) * degreesKelvin - 459.67;
}
function kelvinToC(degreesKelvin){ return degreesKelvin - 273.15;
}
function toggleTempType() { //creates function to toggle btwn C and F if (tempState == "C"){ temperature = kelvinToF(data.main.temp); tempState = "F"; } else { temperature = kelvinToC(data.main.temp); tempState = "C"; } updateTemp(); //parenthesis tells it to run temp check
}
function updateTemp(){ document.querySelector('#temp').innerHTML = temperature.toFixed(0); //from MDN document.querySelector('#degreeType').innerHTML = tempState;
}
var xhr = new XMLHttpRequest();
// Create a callback function
xhr.onreadystatechange = function() { if(xhr.readyState === 4){ //4 means we received the response (complete) data = JSON.parse(xhr.responseText); // let temperatureInF = kelvinToF(data.main.temp) // let temperatureInC = kelvinToAC(data.main.temp) document.querySelector('#cityName').innerHTML = data.name; document.querySelector('#countryName').innerHTML = data.sys.country; document.querySelector('#weather-main').innerHTML = data.weather[0].main; document.querySelector('#weather-main-details').innerHTML = data.weather[0].description; let icon = `http://openweathermap.org/img/w/${data.weather[0].icon}.png`; //using backticks instead of single quotes (ES6) document.querySelector('#weather-icon').src = icon; // document.querySelector('#pres').innerHTML = data.main.pressure; document.querySelector('#wind').innerHTML = data.wind.speed; // document.getElementById('ajax').innerHTML = JSON.stringify(data, null, 4); temperature = kelvinToF(data.main.temp); updateTemp(); }
};
xhr.open('GET', 'http://api.openweathermap.org/data/2.5/weather?zip=75068&appid=8b2efc0d836323e0aa1c9ea67d02a40d');
xhr.send(); //sends the response off
console.log(xhr);
Weather App 2 - Script Codes
Weather App 2 - Script Codes
Home Page Home
Developer Joe Warren
Username MightyJoeW
Uploaded September 25, 2022
Rating 3
Size 2,877 Kb
Views 48,576
Do you need developer help for Weather App 2?

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!

Joe Warren (MightyJoeW) Script Codes
Create amazing marketing copy 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!