Happy Thoughts By Anna #95
Conversation
…css files, fetched the thoughts data from API
…/max number of characters, also added styling to some components
…he latest message when they change
… added time stamp
…rm and setup the elements in correct order and changed color contrast
… of hours after 24 hours has passed
…th screen zooming in on mobile
…ssibility measures
There was a problem hiding this comment.
Good job with your happy thoughts app Anna! You’ve successfully copied the design as well as fetched from an API in React 🥳
Really good error handling as well as structure of your components. Just remember that your folders should be in lowercase (unless you structure your files so that you have one folder called e.g. Header with a Header.jsx and a Header.css in it). A next step for better structure would be to break it down even further, e.g. abstracting the API calls and helper functions such as your timeAgo function (kudos on coding that from scratch by the way!)
I can see that you put some thought into accessibility as well - great!
Overall, your code is easy to follow but I would like to add some notes on clean code:
Be consistent with single or double quotes and whether or not you’re using semicolons
Remove unused code
Order your imports in the following order:
// React and core libraries
import { useState, useEffect } from 'react';
// Components
import { Header } from"./Components/Header";
import { ThoughtForm } from "./Components/ThoughtForm";
import { ThoughtList } from"./Components/ThoughtList";
// Assets (CSS, images)
import "./Styles/App.css";
Changes requested
- Clean up code
src/Styles/App.css
Outdated
| max-width: 95%; | ||
| padding: 10px; | ||
| box-sizing: border-box; | ||
| resize: none; |
…ble quotes, ordered the components in correct order and changeed some styling
|
Thank you for your great feedback and comments @HIPPIEKICK! I have now;
Can you please have a look again? ps. The timeAgo function I got help from chatGPT with, maybe I was not clear enough in the readme file about that. 🙈 |
There was a problem hiding this comment.
I was really impressed overall with your happy thoughts app, Anna! 🩷 You did a great job hitting all the requirements and matching the design but with your own flair. Your code looks really organized and you have such clarity with your comments so I appreciate being able to follow along easily. I just had a couple of suggestions to deal with separation of concerns and maintainability. Hope this helps as our projects get larger and more complex.
Keep up the fantastic work, gold star for you ! 🌟 I'm excited to see what you'll create next 😊
src/App.jsx
Outdated
| <div className="App"> | ||
|
|
||
| {isLoading && <h1>Loading...</h1>} {/* Show loading message while data is being fetched */} | ||
| {/* Render the app content once loading is complete */} |
There was a problem hiding this comment.
Nice job with showing the loading message ⭐
src/assets/smilingheart.png
Outdated
| <h2>What is making you happy right now?</h2> | ||
| <form onSubmit={handleSubmit}> | ||
| {/* Label for accessibility (hidden visually but helps screen readers) */} | ||
| <label htmlFor="thoughtText" className="visually-hidden">Share your happy thought:</label> |
There was a problem hiding this comment.
Nice with the extra attention to a11y 👏
| <span | ||
| className={`heart-count ${liked ? "liked" : ''}`} | ||
| onClick={handleLike} | ||
| style={{ cursor: "pointer" }}> |
There was a problem hiding this comment.
I think it's generally considered best practice to put styling in CSS for separation of concerns, reusability and maintainability. You have declared a className here which you can use to add style in the ThoughtHeart.css file
| border-radius: 50%; | ||
| padding: 10px; | ||
| margin-right: 5px; | ||
| } |
There was a problem hiding this comment.
I think the heart-count style I mentioned in the ThoughtHeart.jsx file can be used here, and you can replace span with .heart-count. Using a specific class that you already created rather than the generic span selector can improve maintainability and clarity of your code. Something like this maybe ?
.heart-count {
background-color: #EAEAEA;
border-radius: 50%;
padding: 10px;
margin-right: 5px;
/* Add cursor: pointer here */
cursor: pointer;
}
.heart-count.liked {
/* Add styles for the liked state */
}
| // ThoughtList Component: Responsible for displaying a list of thoughts passed down from the App component. | ||
|
|
||
| // Each component has it's separate CSS file*/ } | ||
|
|
There was a problem hiding this comment.
Thank you for this very clear explanation of your components. 🙏
| max-width: 95%; | ||
| /* Use a smaller max-width on mobile */ | ||
| padding: 10px; | ||
| } |
There was a problem hiding this comment.
You have styles here for .thought-form and .thought-list, but you also have ThoughtForm.css and ThoughtList.css files... You can also create a media query in the other CSS files. Consolidating all styles for the .thought-form class into the ThoughtForm.css file and the .thought-list class into the ThoughtList.css file will improve consistency and avoid conflicts that can lead to unexpected behavior.
|
|
||
| .visually-hidden { | ||
| display: none; | ||
| } |
There was a problem hiding this comment.
An example of the comment I made in your App.css file :
You can move the media query from the App.css over here like this (and similarly create a media query in your ThoughtList.css for the .thought-list class), and that way changes you might make to a class will be applied consistently across your project (plus for larger projects, it makes it easier to find in a single file 🔦):
@media (max-width: 600px) {
.thought-form {
max-width: 95%;
padding: 10px;
}
}
Netlify link
https://happythoughtsbyanna.netlify.app/