Overall, you are converting the provided starter code from a JS implementation to a ReactJS implementation. While doing so, you are maintaining the functionality of the website.
You will notice the code get shorter; after combining the lines between my two js files, and combining the lines between my two jsx files, I got about an overall ~31% decrease of lines. You will notice the code get easier to read as well!
TO GET STARTED:
Create a copy of the starter code. (statercode given hw8js.zip)
In that copy, do the following:
- Open in your preferred editing environment.
- Add a jsx folder.
- Cut/paste your js files from the js folder to the jsx folder. Give them an extension of .jsx
- Ensure your editing environment has updated based on the new folder and files.
- Start the transpile script and http-server (or preferred method of hosting).
- The code will transpile and work in the browser.
CHANGE CODE INCREMENTALLY
You only need to update the two .jsx files. Change things in the code incrementally. What I mean by this is change one “code group” at a time or change one function at a time. I have grouped relevant code together, separating the groups by spaces. Test after each incremental change that you make to make sure your code still works.
If you try and change everything at once, the assignment will take way longer than it should.
I suggest starting with the bottom and working your way up to the top of the code. Remember that classes will need to:
- extend React.Component
- contain props, and possibly state
FYI: I have kept the structure the same. In other words:
- the name and overall functionality of the methods in class Timer and class ExerciseProgress should remain the same. Note the code will still need tweaks.
- function fillColWithTimer() is intended to be the render() method inside of class Timer.
- function fillColWithProgress() is intended to be the render() method inside of class Exercise Progress.
- The functions outside of the classes can easily turn into React Components with a render() method. Specifically, I am speaking to function fillRow() in both files.
Please consult the rubric below to understand how we will grade. To paraphrase the rubric, beyond the website working as intended, the .jsx files should not:
- have any reference to “document.getElementById()” except on the very last line when you call ReactDOM.render(…)
- have any calls to document.createElement(…)
- work with HTML DOM elements as variables (e.g., rowDiv, exerciseColDiv)
- have any functions outside of class Timer. Those will be added to or turned into React Components as mentioned above.
- have any class methods work with DOM (except in render(), as that is necessary)
- not have this.propsVarName and this.stateVarName. Instead, use this.props.varName and this.state.varName
In addition, both class Timer and class ExerciseProgress should not need any parameters in their functions, beyond:
- the constructor (in class Timer)
- formatToString() (in class Timer and ExerciseProgress)
|This criterion is linked to a Learning OutcomeFunctionality remains1pt: Can start, stop, reset, and save both timers.
1pt: Start/stop button toggles correctly.
1pt: After pressing Start, if Reset or Save are pressed, the timer is stopped and reset (plus time is saved for the Save button)
1pt: View Progress shows the overall saved progress for the user in both exercises.
|This criterion is linked to a Learning OutcomeReact implementation replaces calls to document.getElementById() except on the very last line||
|This criterion is linked to a Learning OutcomeReact implementation replaces calls to document.createElement(…)||
|This criterion is linked to a Learning OutcomeReact implementation replaces working with HTML DOM elements as variables (e.g., rowDiv, exerciseColDiv)||
|This criterion is linked to a Learning OutcomeReact implementation does not include functions outside of class Timer||
|This criterion is linked to a Learning OutcomeReact implementation does not have class methods work with DOM (except in render())||
|This criterion is linked to a Learning OutcomeReact implementation removes parameters in class functions beyond the constructor and formatToString||
|This criterion is linked to a Learning OutcomeReact implementation replaces works with this.props.varName and this.state.varName instead of this.propsVarName and this.stateVarName||
|Total Points: 18|
Order an Essay Now & Get These Features For Free: