DUE: N/A

GitHub Classroom Assignment Invite: https://classroom.github.com/a/aOrxrAKB

Issues: https://github.com/comp426-2022-spring/e02/issues

Description

Instructions

Use NVM to make sure that you are running the most current LTS version of NodeJS.

nvm list
    iojs-v3.3.1
->     v16.14.2
default -> lts/* (-> v16.14.2)
unstable -> N/A (default)
node -> stable (-> v16.14.2) (default)
stable -> 16.14 (-> v16.14.2) (default)
iojs -> iojs-v3.3 (-> iojs-v3.3.1) (default)
lts/* -> lts/gallium (-> v16.14.2)
lts/argon -> v4.9.1 (-> N/A)
lts/boron -> v6.17.1 (-> N/A)
lts/carbon -> v8.17.0 (-> N/A)
lts/dubnium -> v10.24.1 (-> N/A)
lts/erbium -> v12.22.12 (-> N/A)
lts/fermium -> v14.19.1 (-> N/A)
lts/gallium -> v16.14.2

You should see v16.14.2 in that list.

If you do not, run the following to update it:

nvm install --lts

This will help to ensure that you do not run into dependency issues with NPM, Node, and React.

Create a React app

After cloning the assignment starter repo, run the following inside the assignment directory:

npm install create-react-app

This will install the package required to create the basic structure of the React app.

Next run:

npx create-react-app .

This tells Node to create a new React app structure HERE in this directory. Wait for it to install everything and finish.

Watch the output closely.

If there are errors, they are likely because of missing dependencies due to a version mismatch.

See above to fix this. You can and also should Google the errors that you don’t understand.

Set an environment variable

Put the following in a file named .env in the root of your repository directory.

1

PORT=3000

This will tell React to run on port 3000.

When you run your app, it will open a browser tab by default. If you want to suppress this behavior, add the following to your .env file.

1
2

PORT=3000
BROWSER=none

If you do this, then you will have to open a browser and go to this URL to see your app running:

http://localhost:3000

Run to test

Do a test run of the default app.

npm start

You should be able to see the default React app that was created when we ran the create-react-app command in your repo.

Commit and push

Make sure that you are using git throughout to add and commit your changes along the way. This will help you.

Push whenever you are finished testing locally.

Build the app

Now that you know the React app can run, let’s add some code.

Find the file named App.js in the ref directory from the repo that should have been there when you cloned it.

Copy it to the newly-created src directory, replacing the App.js file that is already there.

Open it up and look at it. Read through the comments.

I have provided you with a working form that adds two numbers together.

Your job is to fill in the rest and create a form that will add together all of the scores from all of your assignments, exams, and engagement in the course.

The comments where you should make changes are numbered.

Add variable definitions

Look for this section in the code:

1
2
3
4
5

// 1. Create other variables for assignments, exams, and engagement here
    let currentA00 = document.querySelector('#a00').value
    let currentA01 = document.querySelector('#a01').value
    if(currentSum==='')
    return;

Note the variables use the ID of the input field from the HTML form later in the file.

You will need to create a new variable corresponding to each assignment, exam questionnaire, the engagement (your commit numbers), and any extra credit assignments.

Use simple semantic labels that correspond to the graded component (e.g., Begin, e01, a04, commits, etc.).

For example:

1
2
3
4
5
6
7
8
9

//...
	let currentA05 = document.querySelector('#a05').value
//	...
	let currentMidterm = document.querySelector('#midterm').value
//	...
	let currentCommits = document.querySelector('#commits').value
//	...
	let currentE02 = document.querySelector('#e02').value
//...

Add actions under Add component

The variables that you defined above, sourced from the form, need to be added together.

You’ll find the location of that action in the following line:

1
2
3
4

//...
// 2. This line is where you add the points all together. Add your other variable references here. Make sure that they match what is above and what is below in the HTML form
    let sum = parseInt(currentA00) + parseInt(currentA01);
//...

This line should end up looking like a long list of the values in the form added together (as the simplest approach):

1
2
3

//...
	let sum = parseInt(currentA00) + parseInt(currentA01) + parseInt(currentA05) + parseInt(currentMidterm) + parseInt(currentCommits) + parseInt(currentE02) + ... ;
//...

Add input fields

Now go to your form and you will see that you have a pretty clear location to add inputs that will act as the source of the data you are using above.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

//...
// 3. Create other assignment, exam, and engagement score fields below. Make sure the ID matches what is above.
// Pay attention to how react is handling the click events below. It is different than in a standard HTML form, but uses a similar logic. 
// https://reactjs.org/docs/handling-events.html
// Note also how we set the value of the result input field readonly and display currentSum, whether it is cleared or updated with current numbers in the form.
  return (
    <div className="App">
      <div className="app-title">
        <h1>COMP 426 Points</h1>
      </div>
      <form>
            <input type="text" id="a00" placeholder="a00" /><br/><br/>
            <input type="text" id="a01" placeholder="a01" /><br/><br/>
            <button onClick={Add}>Add</button>
            <button onClick={Clear}>Clear</button>
            <label for="result"><b>Result:</b></label>
            <input type="text" id="result" value={currentSum} readOnly />
      </form>
    </div>
  );
}
//...

Add more inputs, corresponding to the variables that you have defined above.

1
2
3
4

            <input type="text" id="a05" placeholder="a05 Human Interface" /><br/><br/>
            <input type="text" id="midterm" placeholder="Midterm" /><br/><br/>
            <input type="text" id="commits" placeholder="GH Commits" /><br/><br/>
            <input type="text" id="e02" placeholder="e02 React" /><br/><br/>

And that should do it.

If you want to put a raw number of commits into the form, remember to multiply that number by 500 in order to get the corresponding score, since you get 500 points per commit. You can do that just like you do any other math in JavaScript.