Description

Attention: You are allowed to submit a maximum of 5 times! for grade purposes. Once you have submitted your solution, you should see your grade and a feedback about your code on the Coursera website within 20 minutes. If you want to improve your grade, just submit an improved solution. The best of all your first 5 submissions will count as the final grade. You can still submit after the 5th time to get feedback on your improved solutions, however, these are for research purposes only, and will not be counted towards your final grade.
To start, first download the assignment: calculator.zip.
Note to IntelliJ users: IntelliJ seems to have trouble importing this assignment. Please use the workaround in this comment.
In this assignment, you will use Function Reactive Programming (FRP), with the Signal[A] class that you have seen in the lectures, to implement a spreadsheet­like calculator. In this calculator, cells can depend on the value of other cells, and are recomputed automatically when the latter change.
The User Interface (UI) for the programs in this assignment are Web­based, i.e., they run in an HTML page in your Web browser. To compile your code to runnable JavaScript, we use Scala.js, the Scala to JavaScript compiler. We have all set it up for you in the assignment template, but this will change the way you run the program.
Tweet length monitoring
As you probably know, Tweets (messages on Twitter) are limited to 140 characters. When typing a Tweet, it is very helpful to receive instantaneous visual feedback on the number of characters you have left.
The traditional way of implementing this visual feedback is to set up an onchange event handler (a callback) on the text area. In the event handler, we imperatively ask for the text, compute the length, then write back the computed remaining characters.
In FRP, we use Signals to abstract away the mutable nature of the UI (both inputs and outputs) while working on the logic that binds output to input, which is functional.
From Tweet text to remaining char count
Your first task is to implement the function tweetRemainingCharsCount in TweetLength.scala. This function takes a Signal[String] of the text of a Tweet being typed, and returns a Signal[Int] with the corresponding number of characters that are left.
Note that the Tweet length is not text.length, as this would not properly handle supplementary characters. Use the provided function tweetLength to correctly compute the length of a given text.
(Actually, even this is a simplification from reality. The complete specification, which we do not implement in this assignment, can be found here.)
Note that the remaining number of characters could very well be negative, if the Tweet text currently contains more than MaxTweetLength characters.
Running the application so far
Now that you have implemented the first function, you can start running the Web UI. To do so, you need to compile the UI to JavaScript from sbt (you cannot do this from your IDE).
In sbt, run:
> webUI/fastOptJS
If your code compiles, this will produce the JavaScript necessary to run the HTML page in the browser. You can now open the file webui/index.html in your favorite browser, and enter text in the first text area.
If you implemented tweetRemainingCharsCount correctly, the remaining number of characters should automatically update.
For better visual feedback, we also want to display the remaining character count in colors indicating how “safe” we are:
If there are 15 or more characters left, the color “green”
If there are between 0 and 14 characters left, included, the color “orange”
Otherwise (if the remaining count is negative), the color “red”
(these are HTML colors).
Implement the function colorForRemainingCharsCount, which uses the signal of remaining char count to compute the signal of color.
You can now re­run webUI/fastOptJS and refresh your browser. You should see the number of remaining characters changing color
https://class.coursera.org/reactive-002/assignment/view?assignment_id=23 1/2

https://class.coursera.org/reactive-002/assignment/view?assignment_id=23 2/2