Weather App
How do I make an weather app?
FreeCodeCamp Intermediate Zipline: Show the Local Weather. What is a weather app? How do you make a weather app? This script and codes were developed by Kw7oe on 26 November 2022, Saturday.
Weather App - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Weather App</title> <link href='https://fonts.googleapis.com/css?family=Julius+Sans+One|Text+Me+One' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Raleway:500' rel='stylesheet' type='text/css'> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class = "text-center"> <div class = "weatherImg"> </div> <div class = "text-center api"> </div>
</div> <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
body { background-color: #f2f2f2;
}
h2, h3 { font-family: 'Julius Sans One', sans-serif;
}
.weatherImg { margin: 44px 0;
}
h1 { font-family: 'Text Me One', sans-serif; font-size: 48px;
}
#image { border-radius: 50%; box-shadow: 0 0 10em #bfbfbf; height: 350px; width: 350px;
}
.convert { text-decoration: none; color: black; cursor: pointer;
}
.convert:hover { font-weight: 700; color: #005c99;
}
Weather App - Script Codes JS Codes
var url; var x; var y; var region; var city; $.getJSON('http://ipinfo.io', function(pos) { var loca = pos.loc; loca = loca.split(","); x = parseFloat(loca[0]); y = parseFloat(loca[1]); region = pos.region; city = pos.city; x = x.toFixed(2); y = y.toFixed(2); $("#lat").html(x); $("#long").html(y); url = "http://api.openweathermap.org/data/2.5/weather?" + "lat=" + x + "&lon=" + y + "&APPID=a7bf07d66d700e8c44ea5ade03de8db2"; $.get(url, function(json) { var html = ""; var description = json.weather[0].description; var arr = description.split(""); arr[0] = arr[0].toUpperCase(); description = arr.join(""); var temperature = json.main.temp; temperature = temperature - 273.15; temperature = parseInt(temperature); var icon_id = json.weather[0].icon; var wther = json.weather[0].main; var img_url = [ "https://upload.wikimedia.org/wikipedia/commons/3/3c/GoldenMedows.jpg", "https://upload.wikimedia.org/wikipedia/commons/4/4a/Snow_on_the_mountains_of_Southern_California.jpg", "https://upload.wikimedia.org/wikipedia/commons/1/19/Thunderstorm_in_sydney_2000x1500.png", "http://weknowyourdreams.com/images/rain/rain-09.jpg", "https://i.dailymail.co.uk/i/pix/2010/12/29/article-0-0C99EB5E000005DC-264_634x423.jpg", "https://darkclauds.files.wordpress.com/2012/05/clear-skies.jpg", "http://vignette1.wikia.nocookie.net/demigodshaven/images/f/f5/Mist.jpg/revision/latest?cb=20110102163040", "http://mediad.publicbroadcasting.net/p/nhpr/files/201209/EarthTalkExtremeWeather.JPG", "http://p1.pichost.me/i/30/1536536.jpg" ] var id = 0; if (wther === "Clouds") { id = 0; } else if (wther === "Snow") { id = 1; } else if (wther === "Thunderstorm") { id = 2; } else if (wther === "Rain") { id = 3; } else if (wther === "Drizzle") { id = 4; } else if (wther === "Clear") { id = 5; } else if (wther === "Atmosphere") { id = 6; } else if (wther === "Extreme") { id = 7; } else { id = 8; } $(".weatherImg").html("<img src = '" + img_url[id] + "'id ='image'>"); html += "<h2>" + region + ", " + city + "</h2>" html += "<h1 id = 'tem' class = 'convert'>" + temperature + "°C </h1>"; html += "<h2>" + wther + "</h2> <img src = 'http://openweathermap.org/img/w/" + icon_id + ".png'> "; html += "<h3>" + description + "</h3>"; $(".api").html(html); var status = "f"; $(".convert").on("click", function() { if (status === "f") { temperature = temperature * 9 / 5 + 32; temperature = parseInt(temperature); $("#tem").html(temperature + "°F"); status = "c"; } else { temperature = (temperature - 32) * 5 / 9; temperature = parseInt(temperature); $("#tem").html(temperature + "°C"); status = "f"; } }); }); });
Developer | Kw7oe |
Username | kw7oe |
Uploaded | November 26, 2022 |
Rating | 3 |
Size | 3,162 Kb |
Views | 28,336 |
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 |
Autoplay 3D Image Slider | 2,320 Kb |
Wikipedia Viewer | 2,664 Kb |
Navigation Bars | 3,174 Kb |
Simple Typing Effect | 2,184 Kb |
Image with Slide Up Caption | 2,578 Kb |
Image Card | 2,123 Kb |
Image Hover Effects with CSS3 transform | 2,915 Kb |
Image Gallery | 3,040 Kb |
Vertical accordion menu | 3,736 Kb |
Music Player | 2,189 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 |
Shopping List | Markmurray | 6,015 Kb |
Drifting Clouds | Benedikte | 2,247 Kb |
Exploring css spinners | Akagr | 3,569 Kb |
See Through | Larrygeams | 77,410 Kb |
Wikipedia Viewer | Odylic | 2,333 Kb |
IPhone5S SVG Space Grey | Onlinechris | 75,035 Kb |
Two column of responsive height | Fixie | 2,908 Kb |
Vanilla JS - A toggleClass function | Woodwork | 2,532 Kb |
Resize image | Happyhj | 1,892 Kb |
Draggables in pure angular | Rlo206 | 5,167 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!