The WeatherForecast class is shared among both apps. Shared: Holds common classes referenced by both the Api and Client projects which allows data to flow from API endpoint to the front-end web app. A fallback route is implemented to ensure client-side routing is functional. The WeatherForecastFunction returns an array of WeatherForecast objects.Ĭlient: The front-end Blazor WebAssembly project. The app featured in this tutorial is made up from three different Visual Studio projects:Īpi: The C# Azure Functions application which implements the API endpoint that provides weather information to the Blazor WebAssembly app.
#Easy weather api link how to#
The following tutorial demonstrates how to deploy C# Blazor WebAssembly application that display weather data returned by a serverless API. PrerequisitesĪzure Static Web Apps allows you to create static web applications supported by a serverless backend.
#Easy weather api link trial#
If you don't have an Azure subscription, create a free trial account. In this tutorial, you deploy a web application to Azure Static Web apps using the Azure portal. window.Azure Static Web Apps publishes a website to a production environment by building apps from a GitHub repository. But for the sake of simplicity, I’ll only use the if statement in this tutorial. If you want, you can also add an else statement for cases when the location is not available. We will use an if statement here because many browsers do not allow access to the location. And then, we will use the navigator object to get the latitude and longitude of the user. Inside the function, we will create two variables called lat and long to store the user's latitude and longitude. * ) Īs you can see, we are using an arrow function here. If you are not familiar with flexbox, check our two-part flexbox series.īefore starting to style our project, we will reset the default margins and paddings of the page. But before we start styling our app, please make sure you know about CSS flexbox. Up to this point, our markup will look like this, if you open the above HTML file in browser, Finally, two divs are used to indicate sunrise and sunset timing.Īll the div's text will be shown when the browser cannot get the users' geolocation. The weather class consists of three classes to show Celcius's temperature, Fahrenheit, and a div to separate them. And then, we are wrapping the temperatures inside a div called weather. A desc class is added under the location that will show the summary of the weather. The div has a text saying "Unable to fetch weather".
The container contains an image tag with a blank src attribute, another div with an ID of location. The whole information section is wrapped under a div named container. In the HTML file, we link the CSS file called styles.css and the JavaScript file called scripts.js. The classes and IDs are important because we will be using those to interact with the DOM. In the above code, you can see we are using multiple divs with classes and IDs. And in the end, we are showing the sunrise and sunset time. Below it is the summary of the weather, the temperature is in both Celcius and Fahrenheit.
The location will be based on the user's geolocation. We have an image that will change according to the weather. You can see the image below of the final output to get an idea about our markup style. The markup or HTML of the app is straightforward. Now that we have understood the prerequisites and other vital information let's jump into coding our app. How to use a third-party API service and more What will we learn? By building this app, we'll learn some stuff like, If you are not familiar with any of that, you can check some fantastic guides below: In this tutorial, we'll be building a geolocation-based weather app that will show us the current weather data depending on the user's location.īasic JavaScript (knowing Javascript promise is a plus)
It helps to understand the core basics of the DOM and teaches how to use fetch API, to call and get data from a third-party service. Building a Weather app with JavaScript is an excellent project for beginners.