Skip to content
This repository was archived by the owner on Aug 2, 2023. It is now read-only.

add hardcoded HTML for styling cat life events #3

Merged
merged 1 commit into from
Nov 28, 2022
Merged

add hardcoded HTML for styling cat life events #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
Empty file removed src/cat-life-event.jsx
View file
Open in desktop
Empty file.
37 changes: 34 additions & 3 deletions src/cat-life-event.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,40 @@ export type Props = {

export default (): FC<Props> => {
const component = (props: Props): ReactElement => {
return <>
{props.children}
</>
return <div>
Copy link
Contributor Author

Choose a reason for hiding this comment

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

div works for a lot of things, but I think there's a more semantic tag for this. Have you looked into section?

Here's MDN's docs on it: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section

Specifically I'm looking at this:

The

HTML element represents a generic standalone section of a document, which doesn't have a more specific semantic element to represent it.

Suggested change
return <div>
return <section>

But also you'll need to cover the end tag if you apply this change.

<h2>Cat life events</h2>
<table>
<thead>
<tr>
<td>date</td>
<td>event</td>
<td>cat</td>
<td>lives left</td>
</tr>
</thead>
<tbody>
<tr>
<td>2022.11.27</td>
<td>lost a life</td>
<td>Acylsm</td>
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Where does this name come from?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

const foo = bar()

Change foo to bar.

This is a better cat name:

Suggested change
<td>Acylsm</td>
<td>Garfield</td>

Copy link
Contributor Author

@LoganBarnett LoganBarnett Nov 28, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

Before merging:

  • Clean up typos
  • Explain how cat names appeared

<td>8</td>
</tr>
<tr>
<td>2022.11.26</td>
<td>went to the petting queue</td>
<td>Agory</td>
<td>8</td>
</tr>
<tr>
<td>2022.11.25</td>
<td>made friends with a dog</td>
<td>Spaw</td>
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Oh I get it: "Catspaw"!

<td>7</td>
</tr>
</tbody>
</table>

</div>
}
component.displayName = 'CatLifeEvent'
return component
Expand Down