Weather App
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 Omran Abazid on 15 September 2022, Thursday.
Weather App - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Weather App</title> <link rel='stylesheet prefetch' href='https://websygen.github.io/owfont/css/owfont-regular.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Raleway:400,100,300,200'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <h1>Omran Weather App</h1> <div id="info" class='info'> <p id='country'></p> <div> <span id='deg'></span> <button class="btn">°F</button> </div> <p id='clouds'></p> <i id='img' class='owf'></i> </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
*{ font-family: 'Raleway', sans-serif;
}
body{ background: #0074D9;
}
.container{ width:500px; display:block; margin:0 auto;
}
.container h1{ font-size: 50px; color:#fff; font-weight: 100;
}
.container .info{ padding:10px; color: #fff; font-size: 60px; background-color: rgba(255,255,255,0.3) ; border-radius: 15px; text-align: center;
}
.container .btn{ color: #fff; border:none; font-size: 60px; display:inline; background:none; padding:0px; margin:0px;
}
.container .btn:hover{ cursor:pointer; background: blue;
}
.container .btn:focus{ outline:none;
}
Weather App - Script Codes JS Codes
var weatherApp = (function() { var degree; //dom caching var $container = $('#info'); var $country = $container.find('#country'); var $deg = $container.find('#deg'); var $cloud = $container.find('#clouds'); var $image = $('#img'); var $btn = $container.find('button'); //bind events navigator.geolocation.getCurrentPosition(foundLocation, noLocation); $btn.on('click', convert); //render function _render(country, temp, clouds, img) { $country.html(country); $deg.html(temp); $cloud.html(clouds); $image.addClass('owf-' + img); } //custom functions function foundLocation(position) { var lat = position.coords.latitude; var long = position.coords.longitude; var link = "http://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + long + "&units=imperial&APPID=8c63960887f9f6e4e3bef75b97d33e6d" $.getJSON(link, function(data) { degree = Math.floor(data.main.temp); _render(data.sys.country, degree, data.weather[0].main, data.weather[0].id); }); } function noLocation() { alert('Could not find location'); } function convert() { if ($btn.html() == "°F") { $btn.html("°C"); $deg.html(Math.floor((degree - 32) * (5 / 9))); } else { $btn.html("°F"); $deg.html(degree); } }
})();
Developer | Omran Abazid |
Username | OmranAbazid |
Uploaded | September 15, 2022 |
Rating | 3 |
Size | 2,596 Kb |
Views | 24,288 |
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 |
Simon Game without jquery | 3,370 Kb |
Twitch API Template | 3,530 Kb |
Moving Circle on scroll | 2,006 Kb |
Bootstrap Portfolio Website | 4,146 Kb |
Simple Jquery Calculator | 2,462 Kb |
Quote Machine | 3,091 Kb |
Bootstrap page Header Template | 3,140 Kb |
Bootstrap-jquery Address Book | 2,650 Kb |
FCC Campers News | 2,535 Kb |
Convert data into d3 format | 1,879 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 |
Personal Website Redesign v2.0 | DevItWithDavid | 5,168 Kb |
Bezier Animation with straight paths | Rhernando | 2,087 Kb |
Flower expansion | Sreucherand | 3,425 Kb |
Adding Items | Valhead | 4,008 Kb |
Animated rainbow wave on canvas | Icodeforlove | 2,777 Kb |
This in constructor context | _shree33 | 1,718 Kb |
CSS3 iPad | Vikvarg | 1,766 Kb |
A Pen by Jess | Jessamyne | 5,100 Kb |
Mostly Fluid | Mccreath | 3,308 Kb |
Myprofile | SoufianeAbid | 2,451 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!