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 |
Navbar test | 3,249 Kb |
Joe Warren Portfolio Deluxe | 13,097 Kb |
Bouncing Basketball | 1,614 Kb |
Weather App 2 | 2,877 Kb |
Ball Fade | 1,570 Kb |
2017-04-02 Weather App | 1,708 Kb |
First Gen Pokemon Chart | 8,639 Kb |
MLK Google Homepage project | 3,048 Kb |
Javascript Guide | 12,955 Kb |
HEEL Rock Paper Scissors | 5,433 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 |
Rotate Demo | Agelber | 3,061 Kb |
Project_one | MOHIM | 9,592 Kb |
Simple Accordion | Wearebold | 3,683 Kb |
Weather App 2 | MightyJoeW | 2,877 Kb |
Simple Flat Menu | Jeplaa | 2,467 Kb |
Front in Aracaju Logo Pure CSS | Shankarcabus | 2,581 Kb |
SVG Transform vs CSS Transform | AmeliaBR | 4,175 Kb |
Beveled corners using CSS border attribute | DawsonMediaD | 2,136 Kb |
Animating characters with jQuery | 042 | 2,776 Kb |
Price | Catcode | 2,623 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!