The goal of this exercise is to build a simple word processor that runs in a web browser -- a simplified Google Docs.
You should use React to build the application.
The application should have two major sections. At the top, create an area for buttons and other form controls. Below that create an area for the user to type. This second, "editor" component should take up the remaining space on the page.
In the control area of the page add buttons for the following operations. For this phase, these buttons do not need to function. Each button can simple trigger an alert() or console.log() to announce that it was clicked.
- Bold
- Italics
- Strike-through
- Undo
- Redo
For the first phase, the editor component should contain a blinking cursor.
NOTE: You might be tempted to use a
<textarea>or use acontenteditableelement, but if you do, you may find you have to replace it in upcoming phases.
NOTE: An underscore (
_) or an pipe (|) might make a good cursor.
Update the editor component to allow the user to type into it. The characters typed by the user should appear in the editor. This includes the <Enter> and <Backspace> keys.
Each character the user types should appear at the end of the text. The blinking cursor should always remain positioned at the end of the text.
Update the editor component to allow the user to use the left and right arrow keys to move the cursor through the text. From this point on the text the user types should be inserted at the location of the cursor.
NOTE: Do not make the up and down arrows do anything.
Add functionality to the Print button.
When the user clicks the Print button, a printer dialog should appear. If the users chooses to print only the text should be printed. The buttons in the control component should not be visible.
Add functionality to the bold button. When the user clicks the Bold button all the text should turn bold.
Add functionality to the italic button. When the user clicks the Italic button all the text should turn italic.
Add functionality to the Strike-Through button. When the user clicks the Strike-Through button all the text should have a line running down the middle of it.
If the button's format behavior is currently being applied to the text, clicking the button again should turn off the behavior. In other words, each button should toggle the behavior.
It should be possible to turn on multiple format behaviors at the same time. For example, text can be both bold and italic.
Any new text typed into the editor control should be displayed in the same format as the rest of the text.
Change the behavior of the format buttons to apply the format only to any selected text instead of the entire document. The user should be able to use the mouse to select the text.
Change the behavior of the format buttons to change the mode of the editor when there is no selected text. The mode should affect any text typed after the mode is set.
For example. if the text in the editor is...
The secret to learning to code is to
...and the user has not selected any text...
...and the bold button is clicked...
...then new text should be displaed in bold...
The secret to learning to code is to have fun!
Implement undo and redo functionality.