Weather App

Developer
Anthony Albertorio
Size
2,717 Kb
Views
16,192
  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 Anthony Albertorio on 24 September 2022, Saturday.

Weather App Previews
IQ Test

Weather App - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Weather App</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html> <head> <title>Weather App</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" type="text/css" media="screen" title="no title" charset="utf-8"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <link rel="stylesheet" href="css/font.css" type="text/css" media="screen" title="no title" charset="utf-8"> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8"> <meta name="viewport" content="initial-scale=1"> </head>	<body> <div class="container-fluid content"> <!-- Header --> <div class= "titles page-header text-center"> <h2>Free Code Camp</h2> <h2>Weather App</h2> </div> <!-- New City Dock --> <form class='text-center' id='city-form'> <label>City</label> <input name="city" placeholder="Ex. London, UK" id="city-name"> <input id="submit" name="submit" type="submit" value="Go"> </br> <input type="radio" name="standard" value="Metric" checked>Metric <input type="radio" name="standard" value="Imperial">Imperial </form> <!-- Weather Dock --> <div class="weather-dock text-center"> <div class="row"> <div id="sky-icon">Sky Icon</div> </div> <div class="row"> <div id="location">Temperture</div> <div id="location">Location</div> <div id="sky-condition">Sky</div> <div id="wind">Wind</div> </div> </div> </div> <script src="https://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script> <script src="https://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/howler.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/weather.js" type="text/javascript" charset="utf-8"></script> </body>
</html> <script src="js/index.js"></script>
</body>
</html>

Weather App - Script Codes CSS Codes

@media (max-width: 1100px) { .random-language { width: 250px; } .quote-space { width: 250px; }
}
html { background-color: rgba(200,200,200,1); height: 85%; width: 85%; margin: 10% auto;
}
.content {
}
.content{ text-align: center; vertical-align: middle;
}
.titles{ background-color: green;
}
h2 { color: black; font-family: times; font-size: 2em;
}
.weather-dock { background-color: orange;
}
/*City form*/
#city-form { margin: 0 auto;
}
input { font-size: 1.25em;
}
#sky-icon { margin: 1.75% auto;
}

Weather App - Script Codes JS Codes

// ran when submitted
$('form').submit(function(evt){ // prevent form from going to a new site. evt.preventDefault(); var citySearch = $('#city-name').val(); var $citySearchField = $('#city-name'); // alert(citySearch); var $submitButton = $('#submit'); $citySearchField.prop("disabled", true); $submitButton.attr("disabled", true).val('searching...'); // the AJAX part var openWeatherMapAPI = "http://api.openweathermap.org/data/2.5/weather?q=" + citySearch + "&APPID=4c3a82148c102d600c31feb9ab9a3b94"; // parameters to pass var openWeatherMapOptions = { // q is for the city q: citySearch, format: "json" }; // callback function function displayWeather(data) { alert(data); } $.getJSON(openWeatherMapAPI, openWeatherMapOptions, displayWeather(data));
}); // end submit
Weather App - Script Codes
Weather App - Script Codes
Home Page Home
Developer Anthony Albertorio
Username tesla809
Uploaded September 24, 2022
Rating 3
Size 2,717 Kb
Views 16,192
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!

Anthony Albertorio (tesla809) Script Codes
Name
FreeCodeCamp-Tribute Page
CSS- Additional Pseudo-Classes
A Pen by Anthony Albertorio
Random Quote Machine
CSS Combinators
FreeCodeCamp-Tribute Page on Ethereum
SAMPLE FORM
Famo.us test
Tic Tac Toe
CSS Basics
Create amazing video scripts 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!