代写HW 2留学生、代做Java程序语言、代写data、Java代写代做

日期：2020-03-12 10:29

Note that in order to setup this assignment, do the following:

Download and install Node.js. This tool provides a platform for other tools.

Download and install npm. This tool helps retrieve other development packages, making project

setup easier.

Optionally install yarn. Note that this is a tool like npm that can alternatively be used. You may use

either npm or yarn for things like starting React builds, it is up to you.

Download and install React Developer Tools. This will help with things like debugging.

Create a local directory called hw2 on your computer where you will do your work for HW 2.

Open Visual Studio Code and Open the hw2 directory. In this tool, click on the Terminal menu and

choose New Terminal. This should open and dock a Terminal window to the bottom of your VSC

window. This is where you'll be able to enter all necessary commands for starting your react builds

and servers.

Clone the provided gologolo_hw2 repository into your hw2 directory by typing git clong

https://github.com/TheMcKillaGorilla/gologolo_hw2.

Make sure you have all the needed node modules by entering npm install.

Start the app by typing yarn start. This should start the Node server and compile the React project

and create a runnable version, then start a Web server that serves the content that will be served

to a browser on a local URL. Note that your default browser will automatically be opened and any

updates that you make to your program will be reloaded each time you save your changes.

RECOMMENDATION: while you are working, I strongly recommend that you do so with a split

screen where Visual Studio Code takes up the left half of the screen and the browser you are using

to test your app takes up the right. Once you start the react server, every time you edit code in the

left and save, it will immediately be reflected in the browser window on the right. This makes for

much easier developer experience with instant feedback regarding errors as you type and save

continusously. In addition, I strongly recommend that you use the React Components tab in the

Firefox Debugging window. This will let you see what all the state data is for all of your

components, which will make it much easier for you to figure out what is going on a track down

problems.

Run the application and you'll find that it is a partially working goLogoLo app similar to what we did

in HW 1. Note that there are some differences, like now we're using Materialize for layout and

style. Also note that the first time you run the program it will load recent work from a JSON file, but

subsequent to that it will do so from local storage. It is your task to complete the project. Note that

you may make changes to the project as you like but it must remain a React application. Be

careful deciding how to manage the application's state in particular in concert with event handling.

Note that you may use any code you like from HW 1.

gologolo_hw2

Complete the React application such that it works just like your project in HW 1 with one exception,

control Z and control Y provide Undo/Redo features that work for the following edits:

Undo/Redo - Undo currently works for the two provided edits (text color and font size). Make sure

both undo and redo work for all Logo Edits. This means backwards and forwards repeatedly.

Local Storage - Make sure the browser's local storage always has the latest and greatest of all

logos. So, you may simply make sure all data is written to local storage after each change.

Change Text - Clicking on the provided change text button (to the left of Undo) should open up a

dialog and ask the user for text to enter, which will change the text in the logo, which should then

be the text used in the Recent Work list the next time you see the logo on the home screen. Note

that text with all whitespace should be rejected.

Change Background Color - provide controls and implementation for the user to change the

logo's background color

Change Border Color, Radius, and Thickness - provide controls and implementation for the user

to change these properties as well. Again, all of these things should be undoable/redoable.

Change Padding and Margins - same as above. All should be undoable and redoable.

Deleting a list - this does not have to be undoable. Remember this should also be updated in local

storage

Display Numbers above all Sliders - the slider I have provided does not show a value. Make sure

all sliders you use (padding, margin) as well as the font size display the value of the slider above

the slider indicator so that the user can see what its value is.

Foolproof Design - note that the Undo button employs foolproof design. It disables when there is

nothing to undo. Make sure the Redo button you add does the same.

Nice UI - arrange your components neatly using a similar theme with materialize cards as has

been provided. Different students may arrange controls differently, but all UIs should look nice and

professional.

Use Git - be sure to commit after you complete each of the above tasks. So, if you finish all the

tasks in this application you would have one commit (with good, descriptive comments) for each

requirement.