Weather app

Developer
Beau Carnes
Size
2,338 Kb
Views
42,504
  1. Weather app Previews
  2. Weather app HTML Codes
  3. Weather app CSS Codes
  4. Weather app JS Codes

How do I make an weather app?

What is a weather app? How do you make a weather app? This script and codes were developed by Beau Carnes on 13 September 2022, Tuesday.

Weather app Previews
IQ Test

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=Nixie+One' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="center">
<h1>Local Weather</h1>
<div class="main">
<div id = "city"></div> <span id = "temp"></span><span > <button id = "cf" type='button'>°F</button></span>
<div id = "weather"></div>
<div id = "icon"></div>
</div>
</div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Weather app - Script Codes CSS Codes

.center { margin: auto;
text-align: center; border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border: 2px solid #061B80; width: 400px; hight: 600px; background: #e1e0dc; line-height: 30px;
}
.main{ font-size: 20px;
}
h1 { text-decoration: underline; text-decoration-color: rgba(128, 128, 128, 0.5);
}
body { background-image: url("http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/weather.png"); font-family: 'Nixie One', cursive;
}

Weather app - Script Codes JS Codes

$(document).ready(function() { var city; $.get("http://ipinfo.io", function(response) { city = response.city $.get("http://api.openweathermap.org/data/2.5/weather?q=" + city + "&units=imperial&APPID=d3e1df82d5509f61745f718f4e545c57", function(data) { $("#city").html(data.name + ", " + data.sys.country); $("#temp").html(data.main.temp); $("#weather").html(data.weather[0].main); $("#icon").html('<img src="http://openweathermap.org/img/w/' + data.weather[0].icon + '.png">'); }, "jsonp"); }, "jsonp"); $("#cf").click(function() { // $("#temp").html(data.main.temp); if ($('#cf:contains("°F")').length > 0) { $("#cf").text('°C'); $("#temp").html(((($("#temp").html())- 32) / (9/5)).toFixed(2)) } else if ($('#cf:contains("°C")').length > 0) { $("#cf").text('°F'); $("#temp").html((($("#temp").html())* 9/5 + 32).toFixed(2)); } });
});
Weather app - Script Codes
Weather app - Script Codes
Home Page Home
Developer Beau Carnes
Username beaucarnes
Uploaded September 13, 2022
Rating 3
Size 2,338 Kb
Views 42,504
Do you need developer help for Weather app?

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!

Beau Carnes (beaucarnes) Script Codes
Name
Hoisting
Array iteration
Linked List
Camper Leaderboard
Bar Chart - D3
DOM Events
Cookies vs local storage vs session storage
AJAX
Tic-tac-toe
Sets
Create amazing web content 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!