A Pen by Petar

Developer
Petar
Size
4,041 Kb
Views
16,192
  1. A Pen by Petar Previews
  2. A Pen by Petar HTML Codes
  3. A Pen by Petar CSS Codes
  4. A Pen by Petar JS Codes

How do I make an a pen by petar?

What is a a pen by petar? How do you make a a pen by petar? This script and codes were developed by Petar on 12 October 2022, Wednesday.

A Pen by Petar Previews
IQ Test

A Pen by Petar - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Petar</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <h1>Weather Code (C)A(m)pp <br> Weather in your location!</h1> <div class='location'>Your location => </div> <div class='wheather'> <div class='temp'></div> <span class="temperature">&#176;C</span> </div> <div class="condition"></div> <div class="icon hide sun-shower"> <div class="cloud"></div> <div class="sun"> <div class="rays"></div> </div> <div class="rain"></div>
</div>
<div class="icon hide thunder-storm thunderstom"> <div class="cloud"></div> <div class="lightning"> <div class="bolt"></div> <div class="bolt"></div> </div>
</div>
<div class="icon hide cloudy clouds"> <div class="cloud"></div> <div class="cloud"></div>
</div>
<div class="icon hide flurries snow"> <div class="cloud"></div> <div class="snow"> <div class="flake"></div> <div class="flake"></div> </div>
</div>
<div class="icon hide sunny clear "> <div class="sun"> <div class="rays"></div> </div>
</div>
<div class="icon hide rainy rain"> <div class="cloud"></div> <div class="rain"></div>
</div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

A Pen by Petar - Script Codes CSS Codes

body { background: rgb(22,22,22); color: rgb(22,22,22); text-align: center; margin-top: 50px;
}
h1 { color: white; line-height: 80px; font-size: 60px;
}
.location { font-size: 20px; color: white;
}
.wheather { color: white; margin-top: 40px; font-size: 30px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.temperature{ cursor:pointer; color:#006dcc;
}
.temperature:hover{ color:#005096;
}
.condition { font-size: 30px; margin-top: 30px; color: white;
}
.icon { position: relative; display: inline-block; width: 12em; height: 10em; font-size: 1.5em; /* control icon size here */
}
.cloud { position: absolute; z-index: 1; top: 50%; left: 50%; width: 3.6875em; height: 3.6875em; margin: -1.84375em; background: currentColor; border-radius: 50%; box-shadow: -2.1875em 0.6875em 0 -0.6875em, 2.0625em 0.9375em 0 -0.9375em, 0 0 0 0.375em #fff, -2.1875em 0.6875em 0 -0.3125em #fff, 2.0625em 0.9375em 0 -0.5625em #fff;
}
.cloud:after { content: ''; position: absolute; bottom: 0; left: -0.5em; display: block; width: 4.5625em; height: 1em; background: currentColor; box-shadow: 0 0.4375em 0 -0.0625em #fff;
}
.cloud:nth-child(2) { z-index: 0; background: #fff; box-shadow: -2.1875em 0.6875em 0 -0.6875em #fff, 2.0625em 0.9375em 0 -0.9375em #fff, 0 0 0 0.375em #fff, -2.1875em 0.6875em 0 -0.3125em #fff, 2.0625em 0.9375em 0 -0.5625em #fff; opacity: 0.3; -webkit-transform: scale(0.5) translate(6em, -3em); transform: scale(0.5) translate(6em, -3em); -webkit-animation: cloud 4s linear infinite; animation: cloud 4s linear infinite;
}
.cloud:nth-child(2):after { background: #fff; }
.sun { position: absolute; top: 50%; left: 50%; width: 2.5em; height: 2.5em; margin: -1.25em; background: currentColor; border-radius: 50%; box-shadow: 0 0 0 0.375em #fff; -webkit-animation: spin 12s infinite linear; animation: spin 12s infinite linear;
}
.rays { position: absolute; top: -2em; left: 50%; display: block; width: 0.375em; height: 1.125em; margin-left: -0.1875em; background: #fff; border-radius: 0.25em; box-shadow: 0 5.375em #fff;
}
.rays:before,
.rays:after { content: ''; position: absolute; top: 0em; left: 0em; display: block; width: 0.375em; height: 1.125em; -webkit-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: 50% 3.25em; transform-origin: 50% 3.25em; background: #fff; border-radius: 0.25em; box-shadow: 0 5.375em #fff;
}
.rays:before { -webkit-transform: rotate(120deg); transform: rotate(120deg);
}
.cloud + .sun { margin: -2em 1em;
}
.rain,
.lightning,
.snow { position: absolute; z-index: 2; top: 50%; left: 50%; width: 3.75em; height: 3.75em; margin: 0.375em 0 0 -2em; background: currentColor;
}
.rain:after { content: ''; position: absolute; z-index: 2; top: 50%; left: 50%; width: 1.125em; height: 1.125em; margin: -1em 0 0 -0.25em; background: #0cf; border-radius: 100% 0 60% 50% / 60% 0 100% 50%; box-shadow: 0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2), -0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2), -1.375em -0.125em 0 rgba(255,255,255,0.2); -webkit-transform: rotate(-28deg); transform: rotate(-28deg); -webkit-animation: rain 3s linear infinite; animation: rain 3s linear infinite;
}
.bolt { position: absolute; top: 50%; left: 50%; margin: -0.25em 0 0 -0.125em; color: #fff; opacity: 0.3; -webkit-animation: lightning 2s linear infinite; animation: lightning 2s linear infinite;
}
.bolt:nth-child(2) { width: 0.5em; height: 0.25em; margin: -1.75em 0 0 -1.875em; -webkit-transform: translate(2.5em, 2.25em); transform: translate(2.5em, 2.25em); opacity: 0.2; -webkit-animation: lightning 1.5s linear infinite; animation: lightning 1.5s linear infinite;
}
.bolt:before,
.bolt:after { content: ''; position: absolute; z-index: 2; top: 50%; left: 50%; margin: -1.625em 0 0 -1.0125em; border-top: 1.25em solid transparent; border-right: 0.75em solid; border-bottom: 0.75em solid; border-left: 0.5em solid transparent; -webkit-transform: skewX(-10deg); transform: skewX(-10deg);
}
.bolt:after { margin: -0.25em 0 0 -0.25em; border-top: 0.75em solid; border-right: 0.5em solid transparent; border-bottom: 1.25em solid transparent; border-left: 0.75em solid; -webkit-transform: skewX(-10deg); transform: skewX(-10deg);
}
.bolt:nth-child(2):before { margin: -0.75em 0 0 -0.5em; border-top: 0.625em solid transparent; border-right: 0.375em solid; border-bottom: 0.375em solid; border-left: 0.25em solid transparent;
}
.bolt:nth-child(2):after { margin: -0.125em 0 0 -0.125em; border-top: 0.375em solid; border-right: 0.25em solid transparent; border-bottom: 0.625em solid transparent; border-left: 0.375em solid;
}
.flake:before,
.flake:after { content: '\2744'; position: absolute; top: 50%; left: 50%; margin: -1.025em 0 0 -1.0125em; color: #fff; list-height: 1em; opacity: 0.2; -webkit-animation: spin 8s linear infinite reverse; animation: spin 8s linear infinite reverse;
}
.flake:after { margin: 0.125em 0 0 -1em; font-size: 1.5em; opacity: 0.4; -webkit-animation: spin 14s linear infinite; animation: spin 14s linear infinite;
}
.flake:nth-child(2):before { margin: -0.5em 0 0 0.25em; font-size: 1.25em; opacity: 0.2; -webkit-animation: spin 10s linear infinite; animation: spin 10s linear infinite;
}
.flake:nth-child(2):after { margin: 0.375em 0 0 0.125em; font-size: 2em; opacity: 0.4; -webkit-animation: spin 16s linear infinite reverse; animation: spin 16s linear infinite reverse;
}
/* Animations */
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-webkit-keyframes cloud { 0% { opacity: 0; } 50% { opacity: 0.3; } 100% { opacity: 0; -webkit-transform: scale(0.5) translate(-200%, -3em); transform: scale(0.5) translate(-200%, -3em); }
}
@keyframes cloud { 0% { opacity: 0; } 50% { opacity: 0.3; } 100% { opacity: 0; -webkit-transform: scale(0.5) translate(-200%, -3em); transform: scale(0.5) translate(-200%, -3em); }
}
@-webkit-keyframes rain { 0% { background: #0cf; box-shadow: 0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2), -0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2), -1.375em -0.125em 0 #0cf; } 25% { box-shadow: 0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2), -0.875em 1.125em 0 -0.125em #0cf, -1.375em -0.125em 0 rgba(255,255,255,0.2); } 50% { background: rgba(255,255,255,0.3); box-shadow: 0.625em 0.875em 0 -0.125em #0cf, -0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2), -1.375em -0.125em 0 rgba(255,255,255,0.2); } 100% { box-shadow: 0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2), -0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2), -1.375em -0.125em 0 #0cf; }
}
@keyframes rain { 0% { background: #0cf; box-shadow: 0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2), -0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2), -1.375em -0.125em 0 #0cf; } 25% { box-shadow: 0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2), -0.875em 1.125em 0 -0.125em #0cf, -1.375em -0.125em 0 rgba(255,255,255,0.2); } 50% { background: rgba(255,255,255,0.3); box-shadow: 0.625em 0.875em 0 -0.125em #0cf, -0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2), -1.375em -0.125em 0 rgba(255,255,255,0.2); } 100% { box-shadow: 0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2), -0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2), -1.375em -0.125em 0 #0cf; }
}
@-webkit-keyframes lightning { 45% { color: #fff; background: #fff; opacity: 0.2; } 50% { color: #0cf; background: #0cf; opacity: 1; } 55% { color: #fff; background: #fff; opacity: 0.2; }
}
@keyframes lightning { 45% { color: #fff; background: #fff; opacity: 0.2; } 50% { color: #0cf; background: #0cf; opacity: 1; } 55% { color: #fff; background: #fff; opacity: 0.2; }
}

A Pen by Petar - Script Codes JS Codes

var lat;
var lon;
var country;
var $location = $('.location');
var $wheather = $('.temp');
var $cel = $('.temperature');
var $math;
var $celsius;
var $farenheit;
var $clouds = $('.condition');
var $condition = $('.icon');
var $sky;
function locationAPI() { $.ajax({ async: false, url: "http://ip-api.com/json", success: function(data) { country = data.countryCode; lat = data.lat; lon = data.lon; $location.html('Your location => ' + country); } });
}
function wheatherAPI() { $.ajax({ url: "http://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + lon + "&units=metric&appid=13d098549308870ff8b19d2e7f5a736a", success: function(data) { $math = Math.round(data.main.temp); $celsius = Math.round(data.main.temp); $farenheit = Math.round((data.main.temp * 9) / 5 + 32); $sky = data.weather[0].main; $wheather.html($celsius); $clouds.html(data.weather[0].main); console.log(data); console.log($sky); icon($sky); } })
}
function icon(value) { var value = value.toLowerCase() console.log(value); switch (value) { case 'dizzle': addIcon(value) break; case 'clouds': addIcon(value) break; case 'rain': addIcon(value) break; case 'snow': addIcon(value) break; case 'clear': addIcon(value) break; case 'thunderstom': addIcon(value) break; default: $('div.clouds').removeClass('hide'); }
}
function addIcon(value) { console.log(value); $('div.' + value).removeClass('hide');
}
$(function() { locationAPI(); wheatherAPI(); $cel.on('click', function() { if ($math) { $wheather.html($celsius); $cel.html('&#176;C'); return $math = false; } else { $wheather.html($farenheit); $cel.html('&#176;F'); return $math = true; } })
});
A Pen by Petar - Script Codes
A Pen by Petar - Script Codes
Home Page Home
Developer Petar
Username Todorovic
Uploaded October 12, 2022
Rating 3
Size 4,041 Kb
Views 16,192
Do you need developer help for A Pen by Petar?

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!

Petar (Todorovic) Script Codes
Name
Moj projekat 1
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!