Happy thoughts - Zoe #104
Happy thoughts - Zoe #104
Conversation
api/api.js
Outdated
There was a problem hiding this comment.
Nice that you abstracted these functions 👍
| <!-- 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" | ||
| /> |
| @@ -0,0 +1,40 @@ | |||
| /* eslint-disable react/prop-types */ | |||
There was a problem hiding this comment.
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), { |
| const handleSubmit = (event) => { | ||
| // Prevent the form's default behavior of reloading the page when submitted | ||
| event.preventDefault(); | ||
| if (message.length < 5 || message.length > 140) { |
| return ( | ||
| <form onSubmit={handleSubmit}> | ||
| <h1 htmlFor="thought">What’s making you happy right now?</h1> | ||
| <input |
There was a problem hiding this comment.
The input element is generally used for shorter text input, so maybe you'd wanna use a textare instead?
| .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); | ||
| } |
There was a problem hiding this comment.
I'd probably add a fixed width and height to this button to make it round ⚪
There was a problem hiding this comment.
This project is really well put together! Great job, Zoe 🙌 It was really fun and inspiring to look through your code and see your approach.
The structure is clean and modular, with each component doing its own job, which makes the whole codebase easy to follow and probably to maintain as well. Your naming conventions are clear, and the comments throughout the code add a nice layer of understanding without overwhelming things.
Really nice touch with the optimistic UI update! I left a couple of comments for potential improvements.
Look forward to seeing your next project ✨
|
|
||
| return ( | ||
| <form onSubmit={handleSubmit}> | ||
| <h1 htmlFor="thought">What’s making you happy right now?</h1> |
There was a problem hiding this comment.
The "for" (or htmlFor in jsx) is only applicable to <label> and <output>. One suggestion could be to either add a proper label, or if you want the H1 to be the label then maybe add a visually hidden label for screen readers.
| // Prevent the form's default behavior of reloading the page when submitted | ||
| event.preventDefault(); | ||
| if (message.length < 5 || message.length > 140) { | ||
| alert("Message must be between 5 and 140 characters."); // Show an alert if it's not valid |
There was a problem hiding this comment.
Great work with the validation! One improvement could be to replace the alert with a more modern approach, like an inline error text, which would give a more seamless UX.
| } | ||
| }; | ||
|
|
||
| loadThoughts(); // Call the function to fetch thoughts when the component loads |
There was a problem hiding this comment.
One enhancement could be to add a loading state when first fetching the posts from the API. On a slow network it might take a while for the posts to load, making the page look broken for users.
https://happythoughts-api.netlify.app/