Convert Temperatures Filter
Part One
Given an array of integers on the $scope
of a controller, write an Angular filter that repeats through the temperatures and displays them on the view in either Celsius or Fahrenheit in the following format: 10°F
or 10°C
.
To do this, you'll need to include a parameter to your filter, either 'F'
(indicating a conversion from Celsius to Fahrenheit) or 'C'
(indicating a conversion from Fahrenheit to Celsius).
For this exercise, you should implement your filter in the view using the |
, and not in the JavaScript using the $filter
service. (Although that is a legitimate way to do it).
$scope.temps = [10, 15, 20, 25, 30]
HINT: Degree mark ° = option shift 8.
Part Two
Sign up for the Dark Sky Weather API @ https://developer.forecast.io/docs and get a personal developer key. Use your local longitude and latitude coordinates to get your local weather.
Display the local temperature on your page. Create a dropdown menu that lets the user choose to see the temperature in Fahrenheit, Celsius, or Kelvin. Create custom Angular filters that change the degree value and symbol/letter that is displayed.
Hint: look up select and ng-options for the drop down menu.
extra credit:
Add an input where the user can enter their ideal temperature. Create a separate filter that calculates and returns the difference between the user's ideal and the current temperate. Display that value elsewhere on the screen.
For further reading about custom filters, check out the Scotch.io Custom Angular Filters post.