Paris Weather Widget

Developer
Tobi Weinstock
Size
5,091 Kb
Views
28,336
  1. Paris Weather Widget Previews
  2. Paris Weather Widget HTML Codes
  3. Paris Weather Widget CSS Codes
  4. Paris Weather Widget JS Codes

How do I make an paris weather widget?

Paris weather widget using openweathermap.org/api. The thermometer image is pure css, using gradients for the graduation marks. The mercury level may not be the most accurate, but the gradient is French flag inspired so how could it be wrong? 🇫🇷 😘. What is a paris weather widget? How do you make a paris weather widget? This script and codes were developed by Tobi Weinstock on 02 September 2022, Friday.

Paris Weather Widget Previews
IQ Test

Paris Weather Widget - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Paris Weather Widget</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/weather-icons/1.3.2/css/weather-icons.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="body-bg"> <div class="wrapper"> <div class="wrapper-bg"></div> <div class="widget-content"> <div class="text--container"> <div class="text"> <p>météo</p> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve" height="40" width="40"> <g> <path fill="#212121" d="M74.233,98.383l-9.922-16.304v-1.701h0.5v-0.952h-1.101v-2.201l1.052-0.499v-0.501H61.11l-4.353-14.46l0.7-0.699V59.59 l-1.252-0.576c0,0-3.62-24.165-3.62-45.513h0.619V9.332h-0.619V8.73h0.719V7.155H52.33l-1.276-1.375L50.527,0l-0.525,5.779 l-1.276,1.375h-0.975V8.73h0.716v0.602h-0.616V13.5h0.616c0,21.348-3.618,45.513-3.618,45.513l-1.251,0.576v1.476l0.7,0.699 l-4.353,14.46h-3.652v0.501l1.052,0.499v2.201h-1.101v0.952h0.5v1.701l-9.922,16.304h-1.386v1.6h11.908v-1.6h-1.76 c0.269-0.877,3.891-11.978,14.942-11.978c11.053,0,14.675,11.101,14.944,11.978h-1.76v1.6h11.908v-1.6H74.233z M46.05,76.174 l1.952-8.929h5.052l1.952,8.929H46.05z"/> </g> </svg> <p>paris</p> </div> <div class="details"> <i class="wi"></i> </div> </div> <div class="thermometer--container"> <div class="thermometer"> <div class="thermometer--graduation-marks"></div> <div class="thermometer--mercury"></div> </div> <div class="thermometer__bottom"></div> </div> </div> </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>

Paris Weather Widget - Script Codes CSS Codes

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Petit+Formal+Script);
body { font-family: 'Petit Formal Script', cursive, Didot; margin: 0; background: #212121;
}
.body-bg, .wrapper-bg { background: url("https://c2.staticflickr.com/8/7287/8732949546_f23ea8d050_h.jpg") no-repeat; background-size: cover; display: block;
}
.body-bg { background-position: center; padding: 70px 90px;
}
.wrapper { width: 60%; margin: 40px auto; overflow: hidden; background-color: rgba(250, 246, 242, 0.8); border: 4px solid #212121; position: relative; min-width: 300px;
}
.wrapper-bg { position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; z-index: 99; background-position: top; -webkit-filter: blur(8px); filter: blur(8px);
}
.widget-content { position: relative; z-index: 100; background: rgba(250, 246, 242, 0.3); overflow: hidden;
}
.text--container { width: 50%; float: left; margin: 0 auto; text-align: center; color: #212121;
}
.text { padding: 30px; border: 4px solid #212121; border-width: 0 4px 4px 0;
}
.text p { margin: 0; font-size: 30px; font-family: 'Petit Formal Script', cursive;
}
.details { font-family: 'Petit Formal Script', cursive; font-size: 25px; border: 4px solid #212121; border-width: 0 4px 0 0; padding: 50px 0;
}
.details p { margin: 5px 0;
}
i { font-size: 40px;
}
.thermometer--container { float: left; width: 50%; margin-top: 5%;
}
.thermometer { height: 170px; border: 6px solid #212121; border-bottom-color: transparent; border-radius: 50px 50px 0 0; width: 50px; margin: 10% auto 0; padding: 10px 0; position: relative; z-index: 100;
}
.thermometer:before { content: "0°C"; position: absolute; top: 108px; right: -28px; width: 10px;
}
.thermometer span { position: absolute; bottom: -45px; color: #FFF; font-size: 20px; display: inline; text-align: center; width: 100%;
}
.thermometer span:after { content: "°C";
}
.thermometer--graduation-marks:before,
.thermometer--graduation-marks:after { content: ""; height: 94%; position: absolute; right: 0; bottom: 0px; z-index: 100;
}
.thermometer--graduation-marks:before { width: 15%; background: repeating-linear-gradient(180deg, #212121, #212121 1px, transparent 1px, transparent 3px);
}
.thermometer--graduation-marks:after { width: 40%; background: repeating-linear-gradient(180deg, #212121, #212121 1px, transparent 1px, transparent 15px);
}
.thermometer--mercury { background: linear-gradient(180deg, #FF0000, #fff, #0000FF); position: absolute; width: 100%; margin: 0 auto; max-height: 272px; bottom: 0; z-index: 1;
}
.thermometer__bottom { content: ""; border: 6px solid #212121; border-radius: 50%; border-top-color: transparent; height: 80px; width: 80px; position: relative; margin: 0 auto; z-index: 1; bottom: 22px; background-color: #0000FF;
}

Paris Weather Widget - Script Codes JS Codes

var weather = $.getJSON('http://api.openweathermap.org/data/2.5/find?q=Paris&units=metric&appid=c02f87a1bfe000a9d384144576f3b269');
var iconUrl = "http://openweathermap.org/img/w/";
var zeroDegreeHeight = 71;
weather.done(function(data) { var currentTempParis = Math.round(data.list[0].main.temp).toFixed(0); $('.thermometer').append("<span>"+ currentTempParis +"</span>"); var currentTempHeight = zeroDegreeHeight + (currentTempParis * 3); $(".thermometer--mercury").height(currentTempHeight); weatherIcon(data.list[0].weather[0].icon); var conditions = data.list[0].weather[0].description; $(".details").append("<p>"+ conditions +"</p>");
});
function weatherIcon(icon) { var timeOfDay = icon.substr(-1); var condition = icon.slice(0,2); if (timeOfDay === "d") { switch (condition) { case '01': icon = "wi-day-sunny"; break; case '02': icon = "wi-day-cloudy"; break; case '03': icon = "wi-day-cloudy-high"; break; case '04': icon = "wi-cloudy"; break; case '09': icon = "wi-day-rain-mix"; break; case '10': icon = "wi-day-rain"; break; case '11': icon = "wi-day-thunderstorm"; break; case '13': icon = "wi-day-snow"; break; case '13': icon = "wi-raindrops"; break; default: icon = "wi-day-cloudy"; } } else { switch (condition) { case '01': icon = "wi-night-clear"; break; case '02': icon = "wi-night-alt-cloudy"; break; case '03': icon = "wi-night-alt-cloudy-windy"; break; case '04': icon = "wi-cloudy"; break; case '09': icon = "wi-night-alt-rain-mix"; break; case '10': icon = "wi-night-alt-showers"; break; case '11': icon = "wi-night-alt-storm-showers"; break; case '13': icon = "wi-night-alt-snow-wind"; break; case '13': icon = "wi-night-fog"; break; default: icon = "wi-night-alt-cloudy-high"; } } $("i").addClass(icon);
}
Paris Weather Widget - Script Codes
Paris Weather Widget - Script Codes
Home Page Home
Developer Tobi Weinstock
Username tvweinstock
Uploaded September 02, 2022
Rating 3
Size 5,091 Kb
Views 28,336
Do you need developer help for Paris Weather Widget?

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!

Tobi Weinstock (tvweinstock) Script Codes
Name
Country Code Select
React Accordion UI Component
Emoji Ajax Type Ahead
French Words v2
World Clock v2
SVG Picnic Pattern
Liz Lemon Valentine
V Day Countdown
React Image Switcher
Love for Paris
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!