By Julia Hocker

I wanted to create a program that answers the question “What should you do tomorrow?” based on the weather forecast. The goal was to help people come up with creative things to do tomorrow and plan out their day. Often, we fall back on the same activities or, if it's a nice day, find out we're too late to book something. Then we have regrets.

This was one of the first multi-layered coding projects I’d ever tackled, but it’s pretty simple with the right API and Azure Functions. In this tutorial blog, I’ve split the work into three parts: the webpage, the HTTP trigger, and the JavaScript.

What you’ll need:

• A Microsoft Azure subscription (you can get one for free for a limited time)
• An account at openweather.org (this is totally free for the API we’re using unless you want to upgrade)
• Visual Studio Code (and to make things easier, install the Live Server extension – for testing your webpage along the way – the Azure Functions extension, and the Azure App Service extension)

Part #1: The Webpage

This is the easiest part because the webpage is relatively simple. The most important section is creating the div and form elements for the submission form. You need one overall div (I used the id “container”), inside of which is a hidden div (id “hidden-weather”) and a form element (id “zipcode-form”).

<div id="container">

        <div id="hidden-weather" type="hidden"></div>
        
        <form id="zipcode-form" onsubmit="handle(event)">

	            

        </form>

</div>

Leave the onsubmit part for later – that comes with the JS, which is Part #3.

Inside the form element add two input tags. The first creates the zip code input box, and the second creates the submit button, which activates the whole process, with the HTTP trigger function and the API.

<input type="text" name="zipcode" id="zipcode-input" accept="5" placeholder="Enter zip code">
<input size="100" type="submit" value="Get recommendations!" id="submit-button-style"></input>

The rest of the code in this section formats the webpage. The code below would be placed inside the div with the id "container".

<div id="weather-result">

	<center>
	<h3>Weather Forecast for Tomorrow:</h3>
	</center>

</div>

  <br>
  <br>

<div id="recommendations-result">
        
	<center>
	<h3>Recommendations:</h3>
	</center>

</div>

Now that we have the user interface complete, let's code the Azure function the user will trigger.