1-add-a-feature.md

Lab 1: Add a Feature

In this lab, you're going to add a feature to your game. The initial version of the game has already been deployed to GitHub Pages. The link can be found in the About section of your repository on GitHub.com.

Scenario

Currently, the game functions as expected, however players don't know how it works. We need to add the rules of the game so that players know what to do and how to win.

Task 1: Create a Branch

Before you start adding a feature, you should create a branch to work on.

1. Open the terminal or command prompt

2. Create and checkout a new branch

   git checkout -b feature/rules

Task 2: Add the Rules

The rules for the game are simple, but they should be displayed so new players know what to do.

1. Open index.html

2. Locate the comment <!-- Lab 1: Add Game Rules -->

3. Add the following code below the comment

   <p class="game-explanation">
     <strong class="important">How to play:</strong>
     Use your <strong>arrow keys</strong> to move the tiles. When two tiles with
     the same number touch, they <strong>merge into one!</strong>
   </p>

4. Save the file

Task 3: Test the Feature

Before you commit your changes, you should test the feature to make sure it works as expected.

1. Open index.html in your web browser

2. Verify the rules are displayed

   

Task 4: Commit your Changes

Now that you've tested the feature, you should commit your changes to your feature branch.

1. Open the terminal or command prompt

2. Add your changes to the staging area

   git add index.html

3. Commit your changes

   git commit -m 'Add game rules to index.html'

Task 5: Switch to the main Branch

Now that you've added the feature, you should switch back to the main branch so you can start working on something new!

1. Checkout the main branch

   git checkout main

Task 6: Merge the feature/rules Branch

Now that you're on the main branch, you should merge the feature/rules branch into the main branch. That way, when your changes are pushed, the rules will be displayed on GitHub Pages the next time you refresh.

1. Merge the feature/rules branch into the main branch

   git merge feature/rules

2. Push your changes to GitHub

   git push

3. Navigate to your repository on GitHub.com

4. Click the Actions tab

5. Click the running Deploy to GitHub Pages workflow

6. Wait for the workflow run to complete

7. Click the Code tab

8. Click the link to your game

9. Verify the rules are now displayed on the game page

Need Help?

If you're having trouble with any of the steps, you can ask for help in the meeting chat.

The code changes for this lab can be found in the solutions directory.

• Copy the contents of solutions/1-add-a-feature/index.html and replace the contents of index.html