A simple exercise showing the key differences between jQuery and React, ie between an imperative programming style and a declarative one. We will build a simple TweetBox.
-
The "tweet" button has a disabled state
- The button must be disabled if the textarea is empty
- The button must be enabled if the textarea contains at least one letter
-
An indicator must show the remaining character count
- The indicator will contain a number representing the remaining character count
- If the count is over the tweet limit (140chars), the number must be negative, and the "tweet" button must be disabled
-
A button must allow the user to upload a picture.
- For this exercise, we are not going to actually upload a photo, instead the button will simply toggle an internal state, describing if the tweet contains a picture or not. A picture counts for 23 characters.
- The button has the content "Photo added :)" if a picture is added, else "Add a photo"
- If a photo has been added, the "tweet" button is enabled, event if the textarea is empty
-
An alert box must show up when the remaining character count is overflown
- The content of the alert must begin with '...' and the last 10 valid characters, then print the extra text in bold