This.fetchWeather( document.querySelector( ".search-bar").value) ĭocument.querySelector( ".search button"). VanillaTilt.init( document.querySelector( ".card"), = data.weather ĭocument.querySelector( ".city").innerText = "Weather in " + name ĭocument.querySelector( ".description").innerText = description ĭocument.querySelector( ".temp").innerText = temp + "☌" ĭocument.querySelector( ".humidity").innerText =ĭocument.querySelector( ".wind").innerText =ĭocument.querySelector( ".weather").classList.remove( "loading") ĭ = "none" ĭ = "100" var preloader = document.getElementById( 'loading') I have added the Vanilla-Tilt Js file in the resources mentioned above in Step 1. Script for the loading animation and Vanilla-Tilt js.To work with the Weather Underground API you will need an API key but don’t worry because it’s free, although it has a limit of 500 calls a day. Add a weather icon for the default icon display. Today we will be using geolocation and the Weather Underground API to create a simple Weather App that will determine where you are and tell you the current weather for your location.
#EASY WEATHER APP CODE#
You can use this code for the button in the card div. I have used a search button which is an SVG.One for the heading title and one for the card. Now start with the body and if you wish to add a loader to your website then you may add this in the body tag and then write a script for it.I have used Poppins font which is one of my favorites. Before linking style.css and script.js, link the google font that you want.Start with the usual template of the HTML file.Use your favorite code editor, create a folder named "Weather App" or anything you want, and create these three files and add these resources in the folder: Do check out! Step 1 - Set up the environment and Collect all the resources If you want to refer to the entire code then here's my Github repository. Since, this is a blog, not a video, I'm keeping it concise. Note: I have mentioned only a few key points and steps that you should/may use in your code. Take a look at the final website that we will be coding.
The app uses Open Weather Map as weather provider that might require a user provided API key. The programming languages that we will be using in this project are HTML, CSS, and JS. Simple Weather Get weather information Get all weather information you want at a glance. I have added a tilt effect to the card and also a glassmorphism look. Also for adding a little spice to it we will be also using Unsplash API for the website's background image ? which will be based on the location you typed. Today we are going to make an awesome ? Weather Application ? where we could search for ANY city ?, region ?, or country and get its current weather using Weather API.