Skip to content
This repository was archived by the owner on Apr 15, 2024. It is now read-only.

Feedback #1

Open
wants to merge 2 commits into
base: feedback
Choose a base branch
from
Open

Feedback #1

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d7ecc94
Setting up GitHub Classroom Feedback
emrekaraca Sep 12, 2020
b502221
done the homework
vader13 Sep 15, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 30 additions & 1 deletion src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,5 +28,34 @@ Feel free to have fun and experiment with others too!
If you get stuck or need help, please reach out on Slack.
*/
export default function App() {
return <div>Replace this with your beautiful JSX</div>;
const members = team;
Copy link

@carolstran carolstran Sep 17, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You were the only one to experiment with JS variables before the return, nice job!


return (
<>
Copy link

@carolstran carolstran Sep 17, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good use of fragments 😍

<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1>Redi React Fall 2020 Team</h1>
</header>
<table className="members-table">
<thead>
<tr>
<th>Photo</th>
<th>Name</th>
<th>Role</th>
</tr>
</thead>
<tbody>
{members.map((member) => (
<tr className="member-row">
<td className="avatar-cell" key={member.name}>
<img alt="userImage" src={member.image} />
Copy link

@carolstran carolstran Sep 17, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because the alt attribute primarily helps people who use screen readers to access websites, we want to make sure that the text describes each individual image in the map.

One way to do this would be to use the name:

// On its own
alt={member.name} 

// Inside a template literal
alt={`Headshot of ${member.name}`}

</td>
<td className="name-cell">{member.name}</td>
<td className="role-cell">{member.role}</td>
</tr>
))}
</tbody>
</table>
</>
);
}