Do you check the weather before deciding what to wear for the day? Of course you do! This customizable web app will allow you to use your local forecast data to recommend an outfit that will inspire you to become the fashionista that you have always wanted to be.
The interactive tutorial will help you to learn how to remix JavaScript.
After following the steps in the tutorial, your app will look something like this:
So, let's get started. Take a look at the code in the editor to the right and choose one of the buttons below:
If a Web page were an organism, HTML would be like its bones,
providing structure.
HTML is made up of tags, which often come in pairs. For
example, line 1 is an opening HTML tag, while line 15 is
a closing HTML tag. You can identify tags by the
< and > at either end.
A pair of tags and the space between them is sometimes called a block or element of HTML. The space between can contain text or more nested elements; when visualized, this can look like a series of boxes stacked atop one another.
For example, lines 2-10 comprise the <head> element,
while lines 11-14 form the <body>. Both of
these elements are nested in the <html> element.
The first thing we'll do is add a script to this webpage.
Scripts are like the brain, muscles, and central nervous system of a webpage: they allow a page to respond to user input, talk to the internet, and change itself in ways that can transform it from an inert page into a full-fledged application.
The webpage now has a somewhat broken app in it, which you'll be fixing. Let's add a stylesheet to the page so it doesn't look gross.
Stylesheets are written using a language called CSS, and are like the skin or clothing of a webpage: a set of rules draped over HTML to make it look pretty (or, in some cases, grotesque).
To add our stylesheet, type the following at line 3:
While it's prettier, it's also still broken: after you either enter the name of a place or use geolocation, there's an error on the page mentioning something about getForecastOutfit is not defined.
Computers run JavaScript much the same way cooks follow recipes. Just as building a meal requires cooking and combining different recipes from cookbooks, JavaScript follows its own kind of recipes, called functions, to accomplish simple tasks.
Here, the JavaScript brought into the page in line 4 is trying to call a function called getForecastOutfit, but it's not in any of the page's "cookbooks", so to speak.
The opening <script> tag at line 5 tells the browser to start processing the text until the closing </script> tag at line 8 as JavaScript code. This is where we'll define our getForecastOutfit function.
Type the following at line 6:
function getForecastOutfit(forecast) {
return "{{{baseURL}}}img/eskimo-lomen-1915.jpg";
}
Waiting for you to define the function…
Awesome.
Now that the function is defined, the app can find it and use it display an outfit to wear.
Recipes have input and output too: a chocolate chip cookie recipe takes raw ingredients—eggs, flour, chocolate chips—and produces cookies as its output.
The function you just wrote takes a weather forecast as its input, and produces an image URL as its output.
Click on the input in the text below.
function getForecastOutfit(forecast) {
return "{{{baseURL}}}img/eskimo-lomen-1915.jpg";
}
Arguments: the input
function getForecastOutfit(forecast) {
return "{{{baseURL}}}img/eskimo-lomen-1915.jpg";
}
The set of paretheses after the text getForecastOutfit make up the arguments of the function: the inputs that are handed to the function whenever it is called, or followed by the computer like a recipe. Think of the arguments as a sort of box that all the ingredients are put into before a chef starts cooking.
In our case, getForecastOutfit only takes one argument, called forecast. This is a bundle of information about the weather forecast.
When finished, the function returns an image URL as its output.
function getForecastOutfit(forecast) {
return "{{{baseURL}}}img/eskimo-lomen-1915.jpg";
}
A function always has a return value, which is like its output, or a box that a chef puts their cooked item into. The word return in our function tells the computer to stop following the recipe, and produce the URL following it as the function's output.
Now let's personalize the app to make it your own.
How do I change the picture?
Eskimos are awesome, but I have something else in mind…
To change the default Eskimo picture, you'll first want to find a new picture. You can do this via a Google search for images labeled for noncommercial reuse.
Once you find a good image, you'll want to copy its URL to your clipboard. Right-click or control-click on it, then select Copy image location (or Copy image URL or Copy image address, depending on your web browser).
Delete the Eskimo picture URL after the word return in the getForecastOutfit function that you typed earlier. Your cursor should be between a pair of double quotes, and the function should now look like this:
function getForecastOutfit(forecast) {
return "";
}
Now paste the URL from your clipboard so it fits between the pair of double quotes. You're done!
Try entering the names of different cities into the app.
As you'll see, while the app doesn't crash, it's still a bit broken, because it's always telling you to wear the same outfit regardless of what the forecast is!
To fix this, you'll want to change the algorithm that the function uses. An algorithm is just a fancy word for "recipe".
To make getForecastOutfit return a different outfit depending on the forecast, you'll want to add a bit of conditional logic to your algorithm.
When following a recipe, sometimes you need to follow slightly different instructions depending on your ingredients, or the preferences of your customers. For instance, if you want thinner pancakes, then you will want to add more milk to your batter than usual.
That's all conditional logic is: a statement that matches the pattern, “if some condition is true, then do something.”
In the case of your algorithm, you can use conditional logic to return a different outfit based on the weather conditions.
Conditionals based on temperature
Use the translator below to learn how to add conditional logic to your code that returns a particular outfit if certain temperature conditions hold true.
It's important to note that return immediately causes the computer to "leave" the function, ignoring any further instructions in the recipe. So we can insert a conditional into the beginning of our original function like so:
function getForecastOutfit(forecast) {
if (forecast.temp.f > 0) {
return "http://some/picture";
}
return "{{{baseURL}}}img/eskimo-lomen-1915.jpg";
}
Can you guess what temperature range the Eskimo outfit will be recommended? When would the other one be recommended?
Now see if you can change your code to return a different outfit when the weather forecast is 0 degrees Celsius and 100 degrees Celsius.
Waiting for you to complete this challenge…
If this challenge is really hard for you, then you may want to try the visual editor.
Sometimes you might want to combine multiple conditions together, doing something only if both or at least one of them hold true. Use the translator below to explore how this is done.
The ultimate logic challenge
As an algorithm acquires more conditional logic, it starts to look a bit like a tree, where the trunk is its starting point and the branches are different paths a computer can take through it depending on conditions.
To complete this challenge, you'll need to write a getForecastOutfit function that does the following:
Returns a different outfit when the weather forecast is 0 degrees Celsius and 100 degrees Celsius.
Returns a different outfit when the weather forecast is clear and thunderstorming.
If this challenge is really hard for you, then you may want to try the visual editor.
HOLY COW
You are pretty good at this.
Enabling debug mode
Some apps have a built-in debug mode or development mode that makes it easier to tinker with the app and quickly see how it reacts to different inputs.
Such a feature is particularly useful with this weather app. For instance, if you want to make sure your app provides the right outfit when it's hot and sunny outside, you don't want to have to wait until those weather conditions actually occur in real-life just to make sure your code behaves the way you intended.
You can enable this app's debug mode by adding the following code to line 7:
DEBUG = true;
Once you do this, you'll see a debug panel in your app that you can use to quickly change the forecast conditions and see how your code responds to them.
To disable the debug mode, you can change the word true to false.
Personalize the page title.
See the <title> element at line 9? That tells
your browser what the name of your page is, so it can display it
in the window (or tab) title bar.
The <h1> element at line 12 is part of the page
body and shows the app's title on the page itself.
Try changing the text of both elements to something a bit more
unique. For instance, if your name is Pat, you could change the
text to What Should Pat Wear Today?.
Waiting for you to complete this challenge…
Nice.
You have completed this challenge.
Remixing all the HTML
If you want to remix all of the app's HTML, just paste the following code at line 13.
Note that some of the above code uses the Mustache templating language.
About weather-outfit.js
The script you inserted around line 4, weather-outfit.js, is actually a big bundle of different things.
Among the bundle are a variety of JavaScript libraries, or "cookbooks", that the browser uses to power the app:
jQuery, which makes it easier to write code that manipulates the contents of web pages.
underscore.js, which makes it easier to do a variety of common things with JavaScript.
backbone.js, a toolkit that makes it easier to build web pages that work like full-fledged applications.
mustache, a very simple template processor that makes it easy for the app to insert data (like forecast information or error text) into HTML snippets.
The file also contains all the default HTML templates that are used by the app, which you can remix.
Finally, weather-outfit.js also contains some JavaScript that uses the libraries to create and power the app itself. Explaining how this code works is beyond the scope of this tutorial, but you can always browse the source code.
Where the forecasts come from
This app communicates with the OpenWeatherMap site to obtain the latest forecast for any location.
When one piece of software talks to another it is done through an interface, which is a very detailed set of instructions describing how to converse.
One example of a simple interface is actually the getForecastOutfit function you create in this tutorial. The interface for this function could be described as "if you give me a forecast, I will return to you a URL pointing to a picture of an outfit to wear."
When a person or organization has created an interface that allows other software to do something useful, they sometimes call it an application programming interface, or API.
