Show the Local Weather
How do I make an show the local weather?
What is a show the local weather? How do you make a show the local weather? This script and codes were developed by Jerry Byron on 11 December 2022, Sunday.
Show the Local Weather - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Show the Local Weather</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Show the Local Weather</title> <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeKIdGmJRAKycuHAHRg320mUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> </head> <body> <div class="jumbotron" style="margin-bottom:0px; color:white; background-color:#4aa1f3;"> <h2 class="text-center" style="font-size:50px; font-weight:500px;">Show the Local Weather</h2> </div> <div class="container"> <div class="row" style="margin-bottom:20px;"> <h3 class="text-center text-primary">Enter City Name</h3> <span id="error"></span> </div> <div class="row form-group form-inline" id="rowDiv"> <input type="text" name="city" id="city" class="form-control" placeholder="City Name"> <button id="submitWeather" class="btn btn-primary">Search City</button> </div> <div id="show"></div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMFHjOMaLKfuWVxZxUPmCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <script src="weather.js"></script> </body> </html> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Show the Local Weather - Script Codes CSS Codes
#rowDiv{ margin:auto; text-align:center; width:100%;
}
#input[type="text"]{ height:40px; font-size:20px;
}
#inputweather{ height:40px; font-size:20px; font-weight:bold;
}
#show{ margin:auto; text-align:center;
}
Show the Local Weather - Script Codes JS Codes
$(document).ready(function(){ $('#submitWeather').click(function(){ var city = $("#city").val(); if(city != ''){ $.ajax({ url: 'http://api.openweathermap.org/data/2.5/weather?q=' + city + "&units=metric" + "&APPID=cac7889163049b521331fcfabe977fc9", type: "GET", dataType: "jsonp", success: function(data){ var widget = show(data); $("#show").html(widget); $("#city").val(''); } }); }else{ $("#error").html('Field can not be empty'); } });
});
function show(data){ return "<h2>Current Weather for " + data.name + ", " + data.sys.country + "</h2>" + "<h3><strong>Weather</strong>: "+data.weather[0].main +"</h3>"+ "<h3><strong>Description</strong>: "+data.weather[0].description +"</h3>" + "<h3><strong>Temperature</strong>: "+data.main.temp + "°</h3>" + "<h3><strong>Pressure</strong>: "+data.main.pressure + "hpa</h3>" + "<h3><strong>Humidity</strong>: "+data.main.humidity + "%</h3>" + "<h3><strong>Min. Temperature</strong>: "+data.main.temp_min + "°</h3>" + "<h3><strong>Max. Temperature</strong>: "+data.main.temp_max + "°</h3>" + "<h3><strong>Wind Speed</strong>: "+data.wind.speed + "m/s</h3>" + "<h3><strong>Wind Direction</strong>: "+data.wind.deg + "°</h3>";
}
Developer | Jerry Byron |
Username | tomcolby |
Uploaded | December 11, 2022 |
Rating | 3 |
Size | 2,873 Kb |
Views | 12,144 |
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 |
My Random Quote Machine | 2,437 Kb |
My second project, My Portfolio webpage. | 3,313 Kb |
Wikipedia Search | 1,867 Kb |
A Pen by Jerry Byron | 1,290 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 |
Bootstrap Carousel Fade Transition | Rowno | 2,484 Kb |
TinFoil Boats | Chandralil | 4,577 Kb |
Subscription Newsletter - Before inlining | Bradstrong | 7,526 Kb |
Flat buttons for Eliassen.com | Kdooley89 | 1,737 Kb |
Wrap_Test | Mscfourn | 7,503 Kb |
Vanilla modal window | Jasonhowmans | 3,554 Kb |
Marching Squares Visualized | Sakri | 7,074 Kb |
Sass random color animation | Jotavejv | 4,827 Kb |
Search field | Jamesbarnett | 2,100 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!