happy thoughts project #72
Conversation
There was a problem hiding this comment.
Good job Cornelia! You can be proud. The app meets all the basic requirements. I like the custom header and that you where able to add the counter. However, the part where the counter should turn red is not working. I think you only styled "counter" but not "red". I also like the scroll to bottom button.
| }; | ||
| }, []); | ||
|
|
||
| const calculateTimeDifference = (timestamp) => { |
There was a problem hiding this comment.
Would have been nice to have days, month etc. too as mentioned in your readme.
src/components/List/ThoughtList.jsx
Outdated
| } | ||
| }; | ||
|
|
||
| /*Function for the scroll to the top-button*/ |
There was a problem hiding this comment.
I like that, didn't think of it myself. 👍
README.md
Outdated
| ### View it live | ||
|
|
||
| Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about. | ||
| 🚨 There seem to be some kind of css issue when I try the netlify link on my phone. On my computers it looks fine. The arrow svg inside my scroll to the top button isn't centered within the button. The submit button font is white instead of black. Let me know if you also get this or if there is any other issue. Will look into it! |
There was a problem hiding this comment.
I get the same on my phone (white font and arrow not centered).
| <button type="submit" className="submit-button"> | ||
| ❤️ Send Happy Thought ❤️ | ||
| </button> | ||
| <div className={inputValue.length > 140 ? "counter red" : "counter"}> |
There was a problem hiding this comment.
I don't get a red counter here. It only gives me -xy characters. The styling for "red" seems to be missing.
There was a problem hiding this comment.
Hello Cornelia,
Fantastic job on your project! I'm pleased to inform you that you've successfully met all the criteria required for a passing grade. Your work in the ThoughtList.jsx file, particularly with logic stands out impressively, save for one minor hiccup. You might have noticed that when adding a new thought in your app, it necessitates a manual refresh to display. To circumvent this in your ThoughtList.jsx, you can simply adjust your useEffect dependency array from:
/*Fetches thoughts and sets up a fetch interval to update every 60 seconds.*/
/*Converts to minutes after 60 seconds*/
useEffect(() => {
fetchThoughts();
const fetchInterval = setInterval(fetchThoughts, 60000);
return () => {
clearInterval(fetchInterval);
};
}, []);
to:
/*Fetches thoughts and sets up a fetch interval to update every 60 seconds.*/
/*Converts to minutes after 60 seconds*/
useEffect(() => {
fetchThoughts();
const fetchInterval = setInterval(fetchThoughts, 60000);
return () => {
clearInterval(fetchInterval);
};
}, [thoughts]);
This should do the job !!
keep up the great work 💪💪💪💪
Updated with my database
Updated with my database
Updated with my database
Changed 60+ minutes to convert to h+min
Added time converter to days, weeks and years
Updates with the new thought immediately after posting it
Added sorting button, old-new posts
Added styling for the sort button
Fixed the counter, now it doesn't go beyond 140 chars and the text should turn red when it's 30 chars left.
Added red text to the counter once it hits the 30 chars left mark
Netlify link
https://celebrated-shortbread-0673ce.netlify.app/
Collaborators
Individual project