Fucntion Weather

Developer
Alejandro Zuniga
Size
2,818 Kb
Views
28,336
  1. Fucntion Weather Previews
  2. Fucntion Weather HTML Codes
  3. Fucntion Weather CSS Codes
  4. Fucntion Weather JS Codes

How do I make an fucntion weather?

What is a fucntion weather? How do you make a fucntion weather? This script and codes were developed by Alejandro Zuniga on 27 September 2022, Tuesday.

Fucntion Weather Previews
IQ Test

Fucntion Weather - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>fucntion Weather</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Web 2 Starter</title> <link rel="apple-touch-icon" sizes="180x180" href="img/favicons/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="img/favicons/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="img/favicons/favicon-16x16.png"> <link rel="manifest" href="img/favicons/manifest.json"> <link rel="mask-icon" href="img/favicons/safari-pinned-tab.svg" color="#5bbad5"> <meta name="theme-color" content="#ffffff"> <link rel="stylesheet" href="css/styles.css">
</head>
<body> <!-- Sidebar/Drawer -->
<aside class=""> <ul> <li><a href="#one" id="city-1">Link 1</a></li> <li><a href="#two" id="city-2">Link 2</a></li> <li><a href="#three" id="city-3">Geolocation</a></li> </ul> <a class="toggle-drawer">&#x2715;</a>
</aside>
<!-- Section 1 (Homescreen) -->
<section id="one"> <a class="toggle-drawer">&#9776;</a> <p class="city">City</p> <p><span class="temp">00</span>&#x2109;</p>
</section>
<!-- Section 2 -->
<section id="two"> <a class="toggle-drawer">&#9776;</a> <p class="city">City</p> <p><span class="temp">00</span>&#x2109;</p>
</section>
<!-- Section 3 -->
<section id="three"> <a class="toggle-drawer">&#9776;</a> <p class="city">City</p> <p><span class="temp">00</span>&#x2109;</p>
</section> <!-- Scripts --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="js/jquery.simpleWeather.min.js"></script> <script src="js/scripts.js"></script>
</body>
</html> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Fucntion Weather - Script Codes CSS Codes

@import "normalize";
/* Styling */
body { background: teal;
}
// Drawer
aside { background: #ccc; position: fixed; height: 100%; min-height: 100%; left: -200px; width: 200px; // always on top z-index: 999999; // animate transition: left .25s;
}
// Show Drawer
.drawer { left: 0;
}
// All Sections
section { position: absolute; height: 100%; width: 100%;
}
// Section 1
#one { background: red;
}
// Section 2
#two { background: green;
}
// Section 3
#three { background: blue;
}
// :target Selection from Sidebar
:target { z-index: 1;
}

Fucntion Weather - Script Codes JS Codes

// Scripts
// Toggle, Show/Hide Drawer
$('.toggle-drawer').click( function() { $('aside').toggleClass('drawer');
});
// Section 1 Weather
$('#city-1').on('click', function() { $.simpleWeather({ location: 99004, unit: 'f', success: function(weather) { // Entire weather object console.log(weather); // Display Data $('#one .temp').text(weather.temp); $('#one .city').text(weather.city); }, error: function(error) { // Show if weather cannot be retreived console.log('Look outside.'); } });
});
// Section 2 Weather
$('#city-2').on('click', function() { $.simpleWeather({ location: 98105, unit: 'f', success: function(weather) { // Entire weather object console.log(weather); // Display Data $('#two .temp').text(weather.temp); $('#two .city').text(weather.city); }, error: function(error) { // Show if weather cannot be retreived console.log('Look outside.'); } });
});
// Section 3 Weather
$('#city-3').on('click', function() { //load weather using your lat/long coordinates navigator.geolocation.getCurrentPosition(function(position) { // Check lat/long coordinates var lat = position.coords.latitude; var long = position.coords.longitude; console.log(lat, long); // Send to SimpleWeather getWeather( lat + ',' + long ); }); var getWeather = function(location) { $.simpleWeather({ location: location, unit: 'f', success: function(weather) { // Entire weather object console.log(weather); // Display Data $('#three .temp').text(weather.temp); $('#three .city').text(weather.city); }, error: function(error) { // Show if weather cannot be retreived console.log('Look Outside.'); } });
};
});
Fucntion Weather - Script Codes
Fucntion Weather - Script Codes
Home Page Home
Developer Alejandro Zuniga
Username azuniga5
Uploaded September 27, 2022
Rating 3
Size 2,818 Kb
Views 28,336
Do you need developer help for Fucntion Weather?

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!

Alejandro Zuniga (azuniga5) Script Codes
Name
Internal CSS
H1 java
A Pen by alejandro zuniga
Positioning
WebKit Animation
Lab Challenge
Animation
Contact
Child
Random-background generator
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!