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 |
Navigation Bars | 3,174 Kb |
Music Player | 2,189 Kb |
JavaScript Calculator | 3,197 Kb |
Image Hover Effects | 3,497 Kb |
Portfolio | 4,144 Kb |
Markdown Previewer with React.js | 3,517 Kb |
Image Gallery | 3,040 Kb |
Image Hover Effects with CSS3 transform | 2,915 Kb |
Simple 3D Image Slider | 2,483 Kb |
Vertical accordion menu | 3,736 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 |
Responsive Menu I | Rodericksandoval | 3,045 Kb |
TigerWoods Freecodecamp Page | Baileytj | 2,869 Kb |
Break Out | AzazelN28 | 12,431 Kb |
DevCamp 2014 - Denver Public Library | See8ch | 5,033 Kb |
Background-blend-mode Test | 0x04 | 4,744 Kb |
Sass random color animation | Jotavejv | 4,827 Kb |
Medium Menu | Lucasmotta | 3,923 Kb |
Svg sky | Omodev | 7,070 Kb |
Simple animated hover effect | Pobee-norris | 3,044 Kb |
Sexy Social Buttons | Ipiyale | 2,226 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!