generated from Technigo/react-vite-boilerplate
-
Notifications
You must be signed in to change notification settings - Fork 53
Happy Thoughts Project - Tavan #28
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
Open
T-Thiry
wants to merge
36
commits into
Technigo:main
Choose a base branch
from
T-Thiry:main
base: main
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Changes from all commits
Commits
Show all changes
36 commits
Select commit
Hold shift + click to select a range
17ff0a7
added files and basic html
bdfb165
added html, classes and structure for adding new messages/happy thoughts
7457c50
added styling and message form
6cf7289
added message list and message card
7e4472e
added more classes and styling
ff0e91a
corrected paragrapgh wording, added class and styling
a7959e5
added illustration and styling
8d8bf90
added illustration and styling
64fbbf1
Removed and added classes in html for better page layout. Added styli…
151011f
added fetch for happy thoughts from remote API and handlelike function
986a48f
added messagecard component with like button and time-ago formatting
e1a2c20
added validated message form with API POST request
d3d6132
added onLike prop to message card to enable likes
9edac10
removed and added styling
b009565
making changes to import the image
8e22a50
removed redundant class and changed color contrast of text
d65bd89
added meta description to increase seo in lighthouse
4bf1cf4
changed API link
adc18e7
changed the API link in message form
e0e8f59
Update README.md
T-Thiry 6771273
Update README.md
T-Thiry 811a5f3
added SignupForm file and import
c50c74b
Added new code
72a3bc3
Added user as a pop and uncluded user in the body
786639e
Saving user in localstorage
5000838
Removed user from body and added response to onAddMessage
2f04c85
Added user to body
3c6e69c
Removed localStorage and user prop
d984bec
Added class to submit button and styled the button
7ddb1ec
Added handleDelete function and passed the prop in home, messageCard …
25a9185
Removed the disabled attribute to set the page state to home
c81e991
Added handleEdit function and passed prop onEdit to home, messageCard…
c9bfcee
Added button class to buttons and structured the css
c6b13b4
Added another shade to error text
d3a1cce
Added class error-text to paragraph
078cf3a
Added disabled prop and changed media queries
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,5 @@ | ||
| # Happy Thoughts | ||
|
|
||
| A Happy Thoughts app built with React and Hooks, where users can share and like positive messages fetched from an external API. | ||
|
|
||
| https://tthiry-happythoughts.netlify.app | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,356 @@ | ||
| /* Define CSS Variables */ | ||
| :root { | ||
| --primary-color: #FFA0C1; | ||
| --text-color: #1E1E1E; | ||
| --secondary-bg: #F0F0F0; | ||
| --disabled-bg: #D3D3D3; | ||
| --disabled-text: #A9A9A9; | ||
| --error-color: #c82020; | ||
| --placeholder-color: #767676; | ||
| --border-color: #CCCCCC; | ||
| } | ||
|
|
||
| /* Global Styles */ | ||
| body { | ||
| margin: 0; | ||
| padding: 0; | ||
| font-family: 'Segoe UI', sans-serif; | ||
| background: #F9F9F9; | ||
| } | ||
|
|
||
| h1 { | ||
| font-size: 1.5rem; | ||
| margin: 1rem 0; | ||
| text-align: center; | ||
| } | ||
|
|
||
| p { | ||
| color: var(--error-color); | ||
| max-width: 70%; | ||
| } | ||
|
|
||
| input { | ||
| color:rgb(171, 171, 171); | ||
| padding: 0.75rem; | ||
| border: 1px solid var(--border-color); | ||
| border-radius: 4px; | ||
| font-size: 1rem; | ||
| } | ||
|
|
||
| button { | ||
| background: var(--primary-color); | ||
| color: var(--text-color); | ||
| padding: 0.75rem; | ||
| border: 1px solid var(--border-color); | ||
| border-radius: 4px; | ||
| font-size: 1rem; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| .submit-button:disabled { | ||
| background-color: var(--disabled-bg); | ||
| color: var(--disabled-text); | ||
| cursor: not-allowed; | ||
| opacity: 0.7; | ||
| } | ||
|
|
||
| /* Layout */ | ||
| .outer-wrapper { | ||
| max-width: 500px; | ||
| margin: 0 auto; | ||
| padding: 0 1rem; | ||
| } | ||
|
|
||
| .app-container { | ||
| padding: 1rem; | ||
| background-color: #FFFFFF; | ||
| border: 1px solid var(--primary-color); | ||
| margin-bottom: 1rem; | ||
| box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.7); | ||
| } | ||
|
|
||
| /* Header */ | ||
| .header { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| margin: 2rem 1rem 1rem 1rem; | ||
| flex-wrap: wrap; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .header img { | ||
| width: 70px; | ||
| height: auto; | ||
| } | ||
|
|
||
| /* Message components */ | ||
| .message-container { | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 1rem; | ||
| margin-bottom: 4rem; | ||
| } | ||
|
|
||
| .message-card { | ||
| position: relative; | ||
| width: 100%; | ||
| padding: 1rem; | ||
| box-sizing: border-box; | ||
| background: #FFFFFF; | ||
| border: 1px solid var(--primary-color); | ||
| word-break: break-word; | ||
| box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.7); | ||
| } | ||
|
|
||
| .message-card small { | ||
| font-size: 0.9rem; | ||
| font-weight: 300; | ||
| display: block; | ||
| margin-top: 1rem; | ||
| color: var(--placeholder-color); | ||
| } | ||
|
|
||
| .message-actions { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: space-between; | ||
| margin-top: 1rem; | ||
| } | ||
|
|
||
| .message-list { | ||
| display: flex; | ||
| align-items: center; | ||
| flex-direction: column; | ||
| gap: 1rem; | ||
| } | ||
|
|
||
| .like-button { | ||
| background-color: rgb(233, 233, 233); | ||
| border: 1px solid rgb(233, 233, 233); | ||
| border-radius: 50%; | ||
| width: 40px; | ||
| height: 40px; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| cursor: pointer; | ||
| padding: 0; | ||
| } | ||
|
|
||
| .like-button.liked { | ||
| background-color: var(--primary-color); | ||
| border-color: var(--primary-color); | ||
| } | ||
|
|
||
| .like-count { | ||
| margin-left: 8px; | ||
| font-size: 1rem; | ||
| color: var(--placeholder-color); | ||
| } | ||
|
|
||
| .time-ago { | ||
| margin-left: auto; | ||
| font-size: 0.8rem; | ||
| color: var(--placeholder-color); | ||
| } | ||
|
|
||
| /* Form styles */ | ||
| form { | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 1rem; | ||
| width: 100%; | ||
| max-width: 350px; | ||
| } | ||
|
|
||
| .message-form { | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 1rem; | ||
| margin: 2rem 0; | ||
| } | ||
|
|
||
| .message-form textarea { | ||
| resize: none; | ||
| padding: 1rem; | ||
| font-size: 1rem; | ||
| border-radius: 8px; | ||
| border: 1px solid var(--border-color); | ||
| } | ||
|
|
||
| .message-form textarea::placeholder { | ||
| color: var(--placeholder-color); | ||
| } | ||
|
|
||
| .message-form button { | ||
| width: 100%; | ||
| padding: 0.5rem; | ||
| font-size: 1rem; | ||
| background-color: var(--primary-color); | ||
| border: none; | ||
| border-radius: 8px; | ||
| color: var(--text-color); | ||
| cursor: pointer; | ||
| transition: background 0.3s ease; | ||
| } | ||
|
|
||
| /* Error Text */ | ||
| .error-text { | ||
| color: var(--error-color); | ||
| font-size: 0.9rem; /* Optional: Adjust font size */ | ||
| margin-top: 0.5rem; /* Optional: Add spacing */ | ||
| } | ||
|
|
||
| /* Edit/Delete Buttons */ | ||
| .button { | ||
| padding: 0.5rem 1rem; | ||
| border-radius: 4px; | ||
| border: none; | ||
| cursor: pointer; | ||
| font-size: 0.9rem; | ||
| transition: background 0.3s ease; | ||
| } | ||
|
|
||
| .save-button { | ||
| background-color: var(--primary-color); | ||
| color: var(--text-color); | ||
| } | ||
|
|
||
| .cancel-button { | ||
| background-color: var(--secondary-bg); | ||
| color: var(--text-color); | ||
| } | ||
|
|
||
| .submit-button { | ||
| background-color: var(--primary-color); | ||
| color: var(--text-color); | ||
| } | ||
|
|
||
| .submit-button:disabled { | ||
| background-color: var(--disabled-bg); | ||
| color: var(--disabled-text); | ||
| cursor: not-allowed; | ||
| opacity: 0.7; | ||
| } | ||
|
|
||
| .edit-button, | ||
| .delete-button { | ||
| background: none; | ||
| border: none; | ||
| color: var(--text-color); | ||
| cursor: pointer; | ||
| font-size: 0.9rem; | ||
| } | ||
|
|
||
| .edit-button { | ||
| padding: 5px 10px; | ||
| border-radius: 5px; | ||
| } | ||
|
|
||
| .edit-button:hover, | ||
| .delete-button:hover { | ||
| background-color: #E0E0E0; | ||
| } | ||
|
|
||
| .delete-message button { | ||
| background: none; | ||
| border: none; | ||
| color: var(--text-color); | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| .delete-message button:hover { | ||
| background-color: var(--secondary-bg); | ||
| color: var(--error-color); /* Highlight the delete button in red */ | ||
| } | ||
|
|
||
| .delete-message button:focus { | ||
| outline: 2px solid var(--primary-color); /* Add focus outline for accessibility */ | ||
| } | ||
|
|
||
| div > div > p { | ||
| color: var(--text-color); | ||
| } | ||
|
|
||
| /* Signup/Login Containers */ | ||
| .signup-container, | ||
| .login-container { | ||
| margin: 2rem; | ||
| } | ||
|
|
||
| /* Edit Actions */ | ||
| .top-right-actions { | ||
| position: absolute; | ||
| top: 10px; | ||
| right: 10px; | ||
| display: flex; | ||
| } | ||
|
|
||
| .edit-container { | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 0.5rem; | ||
| } | ||
|
|
||
| .edit-textarea { | ||
| width: 80%; | ||
| padding: 0.5rem; | ||
| font-size: 1rem; | ||
| border: 1px solid var(--border-color); | ||
| border-radius: 4px; | ||
| } | ||
|
|
||
| .edit-buttons { | ||
| display: flex; | ||
| gap: 0.5rem; | ||
| } | ||
|
|
||
|
|
||
| /* Responsive design */ | ||
| @media (min-width: 400px) { | ||
| .header h1 { | ||
| font-size: 2rem; | ||
| margin: 2rem 0; | ||
| } | ||
|
|
||
| .header img { | ||
| width: 80px; | ||
| } | ||
|
|
||
| .top-right-actions { | ||
| gap: 0.5rem; | ||
| } | ||
| } | ||
|
|
||
| @media (max-width: 600px) { | ||
| .app-container { | ||
| padding: 1rem; | ||
| } | ||
|
|
||
| .message-form textarea { | ||
| font-size: 0.9rem; | ||
| } | ||
| } | ||
|
|
||
| @media (min-width: 768px) { | ||
| .header { | ||
| flex-direction: row; | ||
| justify-content: center; | ||
| text-align: left; | ||
| gap: 1rem; | ||
| } | ||
|
|
||
| .header h1 { | ||
| font-size: 2.25rem; | ||
| margin: 2rem 0; | ||
| } | ||
|
|
||
| .header img { | ||
| width: 100px; | ||
| } | ||
|
|
||
| .message-form button { | ||
| width: 50%; | ||
| } | ||
| } |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hey! I really enjoyed checking out your Happy Thoughts project. Nice work the code is really easy to read and maintain.
That said, you should definitely be proud of what you’ve built!