Weather App Concept
How do I make an weather app concept?
Design inspired by https://dribbble.com/shots/1824088-GIF-for-the-Weather-App using simpleweatherjs for results. What is a weather app concept? How do you make a weather app concept? This script and codes were developed by Keith Light on 18 November 2022, Friday.
Weather App Concept - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Weather App Concept</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/weather-icons/1.3.2/css/weather-icons.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(https://fonts.googleapis.com/css?family=Lato:300,400);
/* Vars */
.weather__item:nth-of-type(1) { background: #e3bb88;
}
.weather__item:nth-of-type(2) { background: #d89864;
}
.weather__item:nth-of-type(3) { background: #c1887d;
}
.weather__item:nth-of-type(4) { background: #b1695a;
}
.weather__item:nth-of-type(5) { background: #644749;
}
/* Main Styles */
* { box-sizing: border-box;
}
html { font-size: 16px;
}
body { font-family: 'Lato'; background: #212121; color: #f5f5f5; line-height: 1.6; font-size: 1.4rem;
}
.container { margin: 20px auto; max-width: 320px;
}
/* Weather App*/
.weather { background: #8ba892; color: #fff; overflow: hidden;
}
.weather__header { color: #d1dcd3; display: flex; font-size: 1rem; justify-content: space-between; padding: 20px;
}
.weather__header i { margin-right: 5px;
}
.weather__item { border-bottom: 3px solid transparent; cursor: pointer; display: flex; flex-wrap: wrap; overflow: hidden; padding: 20px 10px; transition: border .3s 0s, padding .3s .5s; width: 100%;
}
.weather__item:hover { border-color: #CE7D3B;
}
.weather__item .weather__icon,
.weather__item .weather__info { opacity: 0; transition: all 0.3s 0.3s cubic-bezier(1, -0.5, 0, 1);
}
.weather__item .weather__info { transform: translateY(50px); transition: opacity 0.3s 0s cubic-bezier(1, -0.5, 0, 1), transform 0.3s 0s cubic-bezier(1, -0.5, 0, 1);
}
.weather__item.active { border-color: #CE7D3B; padding: 50px 10px 100px; transition-delay: 0s;
}
.weather__item.active .weather__icon,
.weather__item.active .weather__info { opacity: 1; transform: translateX(0); transition-delay: .3s;
}
.weather__icon, .weather__details { width: 50%;
}
.weather__icon { font-size: 3rem; position: relative; transform: translateX(-50px);
}
.weather__icon i { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.weather__details { padding-left: 30px; position: relative;
}
.weather__info { left: 30px; position: absolute; width: calc(100% - 30px);
}
.weather__text { font-size: 1rem;
}
/* converts icon font codes from simpleweather.js to Weather Icons from Erik Flowers */
.icon-0:before { content: "\f056";
}
.icon-1:before { content: "\f03b";
}
.icon-2:before { content: "\f01d";
}
.icon-3:before { content: "\f01e";
}
.icon-4:before { content: "\f01d";
}
.icon-5:before { content: "\f017";
}
.icon-6:before { content: "\f017";
}
.icon-7:before { content: "\f017";
}
.icon-8:before { content: "\f017";
}
.icon-9:before { content: "\f01b";
}
.icon-10:before { content: "\f017";
}
.icon-11:before { content: "\f01b";
}
.icon-12:before { content: "\f01b";
}
.icon-13:before { content: "\f01b";
}
.icon-14:before { content: "\f01b";
}
.icon-15:before { content: "\f017";
}
.icon-16:before { content: "\f01b";
}
.icon-17:before { content: "\f017";
}
.icon-18:before { content: "\f015";
}
.icon-19:before { content: "\f014";
}
.icon-20:before { content: "\f014";
}
.icon-21:before { content: "\f014";
}
.icon-22:before { content: "\f014";
}
.icon-23:before { content: "\f014";
}
.icon-24:before { content: "\f011";
}
.icon-25:before { content: "\f011";
}
.icon-26:before { content: "\f013";
}
.icon-27:before { content: "\f031";
}
.icon-28:before { content: "\f002";
}
.icon-29:before { content: "\f031";
}
.icon-30:before { content: "\f002";
}
.icon-31:before { content: "\f02e";
}
.icon-32:before { content: "\f00d";
}
.icon-33:before { content: "\f02e";
}
.icon-34:before { content: "\f00d";
}
.icon-35:before { content: "\f017";
}
.icon-36:before { content: "\f00d";
}
.icon-37:before { content: "\f01d";
}
.icon-38:before { content: "\f01d";
}
.icon-39:before { content: "\f01d";
}
.icon-40:before { content: "\f01a";
}
.icon-41:before { content: "\f017";
}
.icon-42:before { content: "\f01b";
}
.icon-43:before { content: "\f017";
}
.icon-44:before { content: "\f031";
}
.icon-45:before { content: "\f01d";
}
.icon-46:before { content: "\f015";
}
.icon-47:before { content: "\f01d";
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <!--
inspired by https://dribbble.com/shots/1824088-GIF-for-the-Weather-App
using simpleweatherjs for results
-->
<section class="container"> <div class="weather" id="js-weather"></div>
</section> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.simpleWeather/3.1.0/jquery.simpleWeather.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Weather App Concept - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Lato:300,400);
/* Vars */
.weather__item:nth-of-type(1) { background: #e3bb88;
}
.weather__item:nth-of-type(2) { background: #d89864;
}
.weather__item:nth-of-type(3) { background: #c1887d;
}
.weather__item:nth-of-type(4) { background: #b1695a;
}
.weather__item:nth-of-type(5) { background: #644749;
}
/* Main Styles */
* { box-sizing: border-box;
}
html { font-size: 16px;
}
body { font-family: 'Lato'; background: #212121; color: #f5f5f5; line-height: 1.6; font-size: 1.4rem;
}
.container { margin: 20px auto; max-width: 320px;
}
/* Weather App*/
.weather { background: #8ba892; color: #fff; overflow: hidden;
}
.weather__header { color: #d1dcd3; display: flex; font-size: 1rem; justify-content: space-between; padding: 20px;
}
.weather__header i { margin-right: 5px;
}
.weather__item { border-bottom: 3px solid transparent; cursor: pointer; display: flex; flex-wrap: wrap; overflow: hidden; padding: 20px 10px; transition: border .3s 0s, padding .3s .5s; width: 100%;
}
.weather__item:hover { border-color: #CE7D3B;
}
.weather__item .weather__icon,
.weather__item .weather__info { opacity: 0; transition: all 0.3s 0.3s cubic-bezier(1, -0.5, 0, 1);
}
.weather__item .weather__info { transform: translateY(50px); transition: opacity 0.3s 0s cubic-bezier(1, -0.5, 0, 1), transform 0.3s 0s cubic-bezier(1, -0.5, 0, 1);
}
.weather__item.active { border-color: #CE7D3B; padding: 50px 10px 100px; transition-delay: 0s;
}
.weather__item.active .weather__icon,
.weather__item.active .weather__info { opacity: 1; transform: translateX(0); transition-delay: .3s;
}
.weather__icon, .weather__details { width: 50%;
}
.weather__icon { font-size: 3rem; position: relative; transform: translateX(-50px);
}
.weather__icon i { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.weather__details { padding-left: 30px; position: relative;
}
.weather__info { left: 30px; position: absolute; width: calc(100% - 30px);
}
.weather__text { font-size: 1rem;
}
/* converts icon font codes from simpleweather.js to Weather Icons from Erik Flowers */
.icon-0:before { content: "\f056";
}
.icon-1:before { content: "\f03b";
}
.icon-2:before { content: "\f01d";
}
.icon-3:before { content: "\f01e";
}
.icon-4:before { content: "\f01d";
}
.icon-5:before { content: "\f017";
}
.icon-6:before { content: "\f017";
}
.icon-7:before { content: "\f017";
}
.icon-8:before { content: "\f017";
}
.icon-9:before { content: "\f01b";
}
.icon-10:before { content: "\f017";
}
.icon-11:before { content: "\f01b";
}
.icon-12:before { content: "\f01b";
}
.icon-13:before { content: "\f01b";
}
.icon-14:before { content: "\f01b";
}
.icon-15:before { content: "\f017";
}
.icon-16:before { content: "\f01b";
}
.icon-17:before { content: "\f017";
}
.icon-18:before { content: "\f015";
}
.icon-19:before { content: "\f014";
}
.icon-20:before { content: "\f014";
}
.icon-21:before { content: "\f014";
}
.icon-22:before { content: "\f014";
}
.icon-23:before { content: "\f014";
}
.icon-24:before { content: "\f011";
}
.icon-25:before { content: "\f011";
}
.icon-26:before { content: "\f013";
}
.icon-27:before { content: "\f031";
}
.icon-28:before { content: "\f002";
}
.icon-29:before { content: "\f031";
}
.icon-30:before { content: "\f002";
}
.icon-31:before { content: "\f02e";
}
.icon-32:before { content: "\f00d";
}
.icon-33:before { content: "\f02e";
}
.icon-34:before { content: "\f00d";
}
.icon-35:before { content: "\f017";
}
.icon-36:before { content: "\f00d";
}
.icon-37:before { content: "\f01d";
}
.icon-38:before { content: "\f01d";
}
.icon-39:before { content: "\f01d";
}
.icon-40:before { content: "\f01a";
}
.icon-41:before { content: "\f017";
}
.icon-42:before { content: "\f01b";
}
.icon-43:before { content: "\f017";
}
.icon-44:before { content: "\f031";
}
.icon-45:before { content: "\f01d";
}
.icon-46:before { content: "\f015";
}
.icon-47:before { content: "\f01d";
}
Weather App Concept - Script Codes JS Codes
$('.weather').on('click', '.weather__item', function() { $('.weather__item').removeClass('active'); $(this).addClass('active');
});
$(document).ready(function() { loadWeather('Portsmouth', 'UK');
});
var days = 5;
function loadWeather(location, woeid) { $.simpleWeather({ location: location, woeid: woeid, unit: 'c', success: function(weather) { var html = '<header class="weather__header">'; html += '<div class="weather__city"><i class="fa fa-map-marker"></i>' + weather.city + '</div>'; html += '<div class="weather__country">' + weather.country + '</div></header>'; html += '<ul class="weather__list">'; for (i = 0; i < days; i++) { html += '<li class="weather__item"><div class="weather__icon"><i class="wi icon-' + weather.forecast[i].code + '"></i></div>'; html += '<div class="weather__details"><div class="weather__day">' + weather.forecast[i].day + '</div>'; html += '<div class="weather__info"><div class="weather__temp">' + weather.forecast[i].high + '°C</div>'; html += '<div class="weather__text">' + weather.forecast[i].text + '</div></div>' html += '</div></li>' } html += '</ul>'; $('#js-weather').html(html); $('.weather__item:first').addClass('active'); }, error: function(error) { $("#js-weather").html('<p>' + error + '</p>'); } });
}
Developer | Keith Light |
Username | keefyboooo |
Uploaded | November 18, 2022 |
Rating | 3 |
Size | 5,869 Kb |
Views | 20,240 |
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 |
CSS Pseudo Element Hover Effects | 4,029 Kb |
Animated Burger Menu | 2,753 Kb |
Mobile Menu Concept | 6,725 Kb |
DevWars weekly challenge week 1 | 6,217 Kb |
Off Canvas Pop Out Menu | 4,027 Kb |
Rainbow Text | 1,853 Kb |
SlideToggle Menu | 3,904 Kb |
DevWars Weekly Challenge Week 2 | 8,198 Kb |
JQuery Responsive Tabs | 5,062 Kb |
Soundbar Loading Animation | 2,431 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 |
TestTube CSS | EZPK | 2,710 Kb |
Social buttons | Flacu | 2,022 Kb |
CSS Donut Charts | Seanstopnik | 2,908 Kb |
Print element on a page | Mrs_snow | 2,081 Kb |
Playing with FlexBox | _Billy_Brown | 3,162 Kb |
Three js | Paulq | 2,353 Kb |
Flying Bee | Pwsm50 | 3,711 Kb |
Bootstrap Carousel Fade Transition | Rowno | 2,484 Kb |
Awesome Full Page Menu Nav | Ey_intuitive | 4,194 Kb |
A Pen by Alex Edwards | Exards | 8,218 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!