Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Happy thoughts - Zoe #104

Open
wants to merge 16 commits into
base: main
Choose a base branch
from
Open

Happy thoughts - Zoe #104

wants to merge 16 commits into from

Conversation

zoe-lindqvist
Copy link

Copy link
Contributor

@HIPPIEKICK HIPPIEKICK left a comment

Choose a reason for hiding this comment

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

Well-structured project - good job! Left some comments for you to have a look at and maybe think about for upcoming projects.

Copy link
Contributor

Choose a reason for hiding this comment

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

Nice that you abstracted these functions 👍

Comment on lines +8 to +12
<!-- Favicon with heart emoji -->
<link
rel="icon"
href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext y='.9em' font-size='90'%3E%E2%9D%A4%EF%B8%8F%3C/text%3E%3C/svg%3E"
/>
Copy link
Contributor

Choose a reason for hiding this comment

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

Love it!

@@ -0,0 +1,40 @@
/* eslint-disable react/prop-types */
Copy link
Contributor

Choose a reason for hiding this comment

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

You can do this in an eslint config file as well

- 'formatDistanceToNow' from 'date-fns' formats the time,
like "2 minutes ago".
*/}
{formatDistanceToNow(new Date(thought.createdAt), {
Copy link
Contributor

Choose a reason for hiding this comment

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

const handleSubmit = (event) => {
// Prevent the form's default behavior of reloading the page when submitted
event.preventDefault();
if (message.length < 5 || message.length > 140) {
Copy link
Contributor

Choose a reason for hiding this comment

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

Nice!

return (
<form onSubmit={handleSubmit}>
<h1 htmlFor="thought">What’s making you happy right now?</h1>
<input
Copy link
Contributor

Choose a reason for hiding this comment

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

The input element is generally used for shorter text input, so maybe you'd wanna use a textare instead?

Comment on lines +106 to +120
.heart-button {
background: none;
border: none;
background-color: #ebebeb;
color: #ff4500;
font-size: 1.3em;
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
border-radius: 50%;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}
Copy link
Contributor

Choose a reason for hiding this comment

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

I'd probably add a fixed width and height to this button to make it round ⚪

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants