辅导HW 2留学生、讲解Java程序语言、辅导data、Java讲解

- 首页 >> Algorithm 算法
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.