introduction-to-git/.github/steps/4-step.md at 6c7567e53893bc22be99974c44d384ef99c2c652 · skills/introduction-to-git

Step 4: Comparing Changes

Now that we understand how to "undo", let's make some real game changes and learn how Git can show us what was changed before we commit it to the repository history.

Understanding file differences is crucial for reviewing your work and catching errors!

📖 Theory: Understanding Git Diffs

Git uses symbols and coloring to show file changes:

+ in green indicates lines that were added
- in red indicates lines that were removed

Example:

+ This is a line that was added
- This is a line that was removed

Tip

You can change Git's default comparison colors with the below commands:

git config --global color.diff.old yellow
git config --global color.diff.new blue

Git Diff Commands

The git diff command shows differences between development states.

git diff - Shows differences between the working directory and the staging area.
git diff --staged - Shows differences between the staging area and the previous commit.
git diff HEAD~1 - Shows differences between the current commit and the previous commit.

⌨️ Activity 1: View differences (using the CLI)

Let's make some changes to the game, then use the CLI to show the differences.

Open src/index.html.
On line 20, replace the info-section area about scoring with the below example:
```
<div class="info-section">
   <h3>Current Score</h3>
   <div class="score" id="score">0</div>
   <h3>High Score</h3>
   <div class="high-score" id="high-score">0</div>
</div>
```
This will demonstrate 3 kinds of changes:
- Modify the Score label to Current Score
- Add the High Score information.
- Remove the status information.
View the difference between your working directory and the last commit.
```
git diff src/index.html
```
Add the changes to the staging area.
```
git add src/index.html
```
Run the same comparison again. Notice that no changes are displayed, because the working directory now matches the staging area.
```
git diff src/index.html
```
View the differences between the staging area and the last commit.
```
git diff --staged src/index.html
```

Commit the changes with the following message:

git commit -m "Add element for showing high score"

⌨️ Activity 2: View differences (using VS Code)

Let's make some more changes to the game, then use the VS Code to show the differences.

Open src/patterns.js.

On line 3, replace the Null Pointer area with the below example to change the pattern:

{
  name: "Null Pointer",
  pattern: [
    [0, 1, 1, 1, 0],
    [0, 1, 0, 1, 0],
    [0, 1, 1, 1, 0],
    [0, 0, 1, 0, 0],
    [0, 0, 1, 0, 0],
  ],
},

In the File Explorer, notice that the file name patterns.js has changed color and now has an M, indicating that it has been modified.
Open the Source Control tab. In the Changes list, click patterns.js to open the diff (comparison) view.

💡 Tip: You can modify the content in the comparison view for live feedback!
Add the file to the staging area. ⚠️ Don't commit yet!

Notice the comparison view stopped showing changes since the current file matches the staging area.
In the Staged Changes list, click patterns.js to open the diff (comparison) view.

Notice that you can't make changes here. The staging area is locked in preparation for committing.
Commit the change with the following message:
```
Make null pointer pattern easier to complete
```
With your new commits added to the repository, Mona should already be busy checking your work. Give her a moment and keep watch in the comments. You will see her respond with progress info and the next steps.