Weather App 2
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 - 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>°<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);
Developer | Joe Warren |
Username | MightyJoeW |
Uploaded | September 25, 2022 |
Rating | 3 |
Size | 2,877 Kb |
Views | 48,576 |
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!
Name | Size |
The Heart | 1,667 Kb |
Ball Fade | 1,570 Kb |
Joe Warren Portfolio | 7,339 Kb |
2017-04-02 Weather App | 1,708 Kb |
Minutes to Hours Converter | 2,532 Kb |
Google.com page source | 74,084 Kb |
Matrix Blue Rain | 2,428 Kb |
A Pen by Joe Warren | 1,182 Kb |
MLK Google Homepage project | 3,048 Kb |
Google Homepage 2 | 4,002 Kb |
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!
Name | Username | Size |
Next Word Predictor | Rfalor | 2,776 Kb |
Drag and Drop Quiz | Cgspicer | 3,837 Kb |
Intake Form Page 2 | Ijantje | 4,983 Kb |
Css3 loader | Clknap | 2,391 Kb |
A Pen by Mohomed Anees | Mohomedanees | 12,597 Kb |
Tic Tac Toe | Volv | 4,862 Kb |
Css or Czz.. | Judag | 4,111 Kb |
Template | Indra_z85 | 2,323 Kb |
OnScreenAction | Ozgursagiroglu | 2,647 Kb |
Highbrow Basic HTML Lesson 8 | Kimlarocca | 2,094 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!