Game Comparison: Code-Along Activity

Follow the instructions below to build a webpage that helps users compare the various features of different games. Use a table and some iframes to provide information to the user. Start from the empty project, and then follow the instructions below.

StackBlitz: https://stackblitz.com/edit/stackblitz-starters-bznpdvwh?file=index.html

Setup

Start with the basic HTML setup for the page.

Open the index.html file for editing
Add the html tags (opening and closing)
Add the body tags within the html tags
Add an h1 header that says "Game Comparison" within the body
Click the Run button and make sure it appears as expected!

At the end of this section, your webpage code should look like this:

<html>
    <body>
        <h1>Game Comparison</h1>
    </body>
</html>

Comparison Table Basics

Under the header, add a table tag (opening and closing)
Add the "border" attribute to the table element so a border appears

At the end of this section, your table code should look like this:

<table border="1">

</table>

Comparison Table Headers

Between the opening and closing table tags, add a tr (table row)
Between the opening and closing tr tags, add four ths (table header data)
Make the content for the th tags the following text values:
- Game Title
- Release Year
- Platform
- Price

At the end of this section, your table header code should look like this:

<tr>
    <th>Game Title</th>
    <th>Release Year</th>
    <th>Platform</th>
    <th>Price</th>
</tr>

Comparison Table Row Data

Between the opening and closing table tags, add three trs (table row)
- Each row will represent one game
In each row, add four tds (table data), each corresponding with the column headers
The data should be as follows:
- Fortnite, 2017, Multiple, Free
- Candy Crush Saga, 2012, Mobile, Free
- Pokemon Sword & Shield, 2019, Nintendo Switch, $59.99

At the end of this section, your table body code should look like this:

<tr>
    <td>Fortnite</td>
    <td>2017</td>
    <td>Multiple</td>
    <td>Free</td>
</tr>
<tr>
    <td>Candy Crush Saga</td>
    <td>2012</td>
    <td>Mobile</td>
    <td>Free</td>
</tr>
<tr>
    <td>Pokemon Sword & Shield</td>
    <td>2019</td>
    <td>Nintendo Switch</td>
    <td>$59.99</td>
</tr>

Game Reviews

In addition to showing the user the information for these games, add a review for each of them! Instead of copying and pasting from review sites, use iframes to directly show the reviews on the page.

Under the comparison table, add an h3 that says "Fortnite"
Under that h3, add an iframe that will point to a review of Fortnite
Set the src attribute of the iframe to "https://www.pcmag.com/reviews/fortnite-for-pc"
Set the height attribute to 300
Set the width attribute to 500
Add additional h3 headers and iframe elements for the other games:
- Candy Crush Saga: https://www.cnet.com/reviews/candy-crush-saga-android-review/
- Pokemon Sword & Shield: https://www.pcmag.com/reviews/pokemon-swordshield-for-nintendo-switch

At the end of this section, your iframes should look like this:

<h3>Fortnite</h3>
<iframe width="500" height="300" src="https://www.pcmag.com/reviews/fortnite-for-pc"></iframe>
<h3>Candy Crush Saga</h3>
<iframe width="500" height="300" src="https://www.cnet.com/reviews/candy-crush-saga-android-review/"></iframe>
<h3>Pokemon Sword & Shield</h3>
<iframe width="500" height="300" src="https://www.pcmag.com/reviews/pokemon-swordshield-for-nintendo-switch"></iframe>

Final HTML

<html>
    <body>
        <h1>Phone Comparison</h1>
        <table border="1">
            <tr>
                <th>Game Title</th>
                <th>Release Year</th>
                <th>Platform</th>
                <th>Price</th>
            </tr>
            <tr>
                <td>Fortnite</td>
                <td>2017</td>
                <td>Multiple</td>
                <td>Free</td>
            </tr>
            <tr>
                <td>Candy Crush Saga</td>
                <td>2012</td>
                <td>Mobile</td>
                <td>Free</td>
            </tr>
            <tr>
                <td>Pokemon Sword & Shield</td>
                <td>2019</td>
                <td>Nintendo Switch</td>
                <td>$59.99</td>
            </tr>
        </table>

        <h3>Fortnite</h3>
        <iframe width="500" height="300" src="https://www.pcmag.com/reviews/fortnite-for-pc"></iframe>
        <h3>Candy Crush Saga</h3>
        <iframe width="500" height="300" src="https://www.cnet.com/reviews/candy-crush-saga-android-review/"></iframe>
        <h3>Pokemon Sword & Shield</h3>
        <iframe width="500" height="300" src="https://www.pcmag.com/reviews/pokemon-swordshield-for-nintendo-switch"></iframe>
    </body>
</html>

Game Comparison Code-Along