Test1 #11
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
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,91 @@ | ||
| // Getting elements | ||
|
Member
There was a problem hiding this comment. The first thing that came to my mind is "ok so this entire page was generated by ai" You don't need all of those commends, this is a really bad practice Am i wrong to assume that this is ai code?
Author
There was a problem hiding this comment. not entirely I've used ai here for 2 things
|
||
| const emailInput = document.getElementById('email-input'); | ||
| const submitButton = document.getElementById('submit-button'); | ||
| const dismissButton = document.getElementById('dismiss-button'); | ||
| const signupCard = document.getElementById('signup-card'); | ||
| const successCard = document.getElementById('success-card'); | ||
| const errorMessage = document.getElementById('error-message'); | ||
| const userEmailSpan = document.getElementById('user-email'); | ||
|
|
||
|
|
||
| // Show error state | ||
| function showError() { | ||
| errorMessage.classList.remove('hidden'); | ||
| emailInput.classList.add('error-input'); | ||
| } | ||
|
|
||
| // Hide error state | ||
| function hideError() { | ||
| errorMessage.classList.add('hidden'); | ||
| emailInput.classList.remove('error-input'); | ||
| } | ||
|
|
||
| // Switch to success stage | ||
| const showSuccessMessage = (email) => { | ||
| signupCard.classList.add('hidden'); | ||
| successCard.classList.remove('hidden'); | ||
| userEmailSpan.textContent = email; | ||
|
Member
There was a problem hiding this comment. You should check that your email if defined |
||
| }; | ||
|
|
||
| // Switch to signup stage | ||
| function showSignupStage() { | ||
| successCard.classList.add('hidden'); | ||
| signupCard.classList.remove('hidden'); | ||
| emailInput.value = ''; | ||
| hideError(); | ||
| } | ||
|
|
||
| // Email validation function | ||
| const validateEmail = (email) => { | ||
| const domain = email.split('@')[1]; | ||
| const emailDomain = ['gmail.com', 'yahoo.com', 'outlook.com', 'hotmail.com', 'collman.com']; | ||
|
|
||
| if (email === '' || !email.includes('@')) { | ||
| showError(); | ||
| return false; | ||
| } | ||
| if (!emailDomain.includes(domain)) { | ||
| showError(); | ||
| return false; | ||
| } else { | ||
|
Member
There was a problem hiding this comment. In your if you have a return statement so you dont really need the else Also you have 2 ifs that are doing exactly the same thing. |
||
| hideError(); | ||
| } | ||
|
|
||
| return true; | ||
| }; | ||
| // "Enable/disable" submit button based on email validity | ||
| emailInput.addEventListener('input', updateButtonState); | ||
|
|
||
| function updateButtonState() { | ||
| const email = emailInput.value.trim(); | ||
| if (validateEmail(email)) { | ||
| submitButton.classList.add('enabled-button'); | ||
| } else { | ||
| submitButton.classList.remove('enabled-button'); | ||
| } | ||
| } | ||
|
|
||
| // Handle form submission | ||
| submitButton.addEventListener('click', (e) => { | ||
| e.preventDefault(); | ||
|
|
||
| const email = emailInput.value.trim(); | ||
|
|
||
| // Validate email | ||
| if (validateEmail(email)) { | ||
| showSuccessMessage(email); | ||
| } | ||
| }); | ||
|
|
||
| // Handle dismiss button | ||
|
|
||
| dismissButton.addEventListener('click', function() { | ||
| showSignupStage(); | ||
| }); | ||
|
|
||
| // Hide error when user starts typing | ||
| emailInput.addEventListener('input', function() { | ||
| if (!errorMessage.classList.contains('hidden')) { | ||
| hideError(); | ||
| } | ||
| }); | ||
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,161 @@ | ||
| @font-face { | ||
| font-family: 'Roboto'; | ||
| src: url('./assets/fonts/Roboto-Regular.ttf') format('truetype'); | ||
| font-weight: normal; | ||
| font-style: normal; | ||
|
Member
There was a problem hiding this comment. Why did you add those attributes? |
||
| } | ||
|
|
||
| @font-face { | ||
| font-family: 'Roboto'; | ||
| src: url('./assets/fonts/Roboto-Bold.ttf') format('truetype'); | ||
| font-weight: bold; | ||
| font-style: normal; | ||
|
Member
There was a problem hiding this comment. This is the exact same code as above, remove it |
||
| } | ||
|
|
||
| body{ | ||
| font-family: 'Roboto', Arial, sans-serif; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
|
|
||
| background-color: hsl(234, 29%, 20%); | ||
|
Member
There was a problem hiding this comment. Colors should come from css variables and not inline like this |
||
| height: 100vh; | ||
| font-size: 16px; | ||
| } | ||
| .main-card{ | ||
| display: flex; | ||
| flex-direction: row; | ||
| background-color: hsl(0, 0%, 100%); | ||
|
Member
There was a problem hiding this comment. Same comment for all of the colors in this page |
||
| border: 1px solid hsl(234, 29%, 20%); | ||
| border-radius: 30px; | ||
| box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.2); | ||
| padding: 20px; | ||
| } | ||
| .text-section{ | ||
| padding: 50px; | ||
| } | ||
| #headline{ | ||
| font-size: 55px; | ||
| display: flex; | ||
| justify-content: start; | ||
| color: hsl(234, 29%, 20%); | ||
| font-weight: bold; | ||
| } | ||
| .description{ | ||
| font-size: 16px; | ||
| margin-bottom: 30px; | ||
|
|
||
| } | ||
| .info-list { | ||
| list-style: none; | ||
| padding-left: 0; | ||
| margin-bottom: 30px; | ||
| } | ||
| .list-icon { | ||
| margin-right: 10px; | ||
| } | ||
| .list-item { | ||
| display: flex; | ||
| align-items: center; | ||
| margin-bottom: 20px; | ||
| } | ||
| .email-label-block { | ||
| display: flex; | ||
| flex-direction: row; | ||
| } | ||
| .email-block{ | ||
| width: 100%; | ||
| gap: 10px; | ||
| margin-top: 20px; | ||
| } | ||
| #email-label{ | ||
| font-size: 12px; | ||
| margin-bottom: 10px; | ||
| } | ||
| #email-input{ | ||
| width: 100%; | ||
| padding: 12px 15px; | ||
| margin-bottom:20px; | ||
| border-radius: 5px; | ||
| border: 1px solid hsl(0, 0%,58%); | ||
| box-sizing: border-box; | ||
| } | ||
| .subscribe-button{ | ||
| width: 100%; | ||
| background-color: hsl(234, 29%, 20%); | ||
| color: hsl(0, 0%, 100%); | ||
| border: none; | ||
| padding: 15px; | ||
| border-radius: 5px; | ||
| cursor: pointer; | ||
| } | ||
| .enabled-button{ | ||
| transition: background 0.3s ease; | ||
| /*adding gradient to button*/ | ||
|
Member
There was a problem hiding this comment. So this is ai generated? or you wrote it? |
||
| background: linear-gradient(90deg, hsl(4, 100%, 67%), hsl(22, 90%, 66%)); | ||
| } | ||
|
|
||
| .hidden { | ||
| display: none; | ||
| } | ||
|
|
||
| /* Error States */ | ||
|
Member
There was a problem hiding this comment. My comment about comments in code apply to this entire page |
||
| .error-message { | ||
|
|
||
| color: hsl(4, 100%, 67%); | ||
| font-size: 12px; | ||
| margin-bottom: 8px; | ||
| font-weight: bold; | ||
| margin-left: auto; | ||
| } | ||
|
|
||
| .error-input { | ||
| border-color: hsl(4, 100%, 67%); | ||
| background-color: hsl(4, 100%, 95%); | ||
| color: hsl(4, 100%, 67%); | ||
| } | ||
|
|
||
| /* Success Page Styles */ | ||
| .success-section { | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: flex-start; | ||
| padding: 50px; | ||
| max-width: 400px; | ||
| } | ||
|
|
||
| .success-icon { | ||
| width: 48px; | ||
| height: 48px; | ||
| margin-bottom: 30px; | ||
| } | ||
|
|
||
| .success-title { | ||
| font-size: 55px; | ||
| color: hsl(234, 29%, 20%); | ||
| font-weight: bold; | ||
| margin-bottom: 30px; | ||
| line-height: 1; | ||
| } | ||
|
|
||
| .success-message { | ||
| font-size: 16px; | ||
| line-height: 1.5; | ||
| margin-bottom: 40px; | ||
| color: hsl(234, 29%, 20%); | ||
| } | ||
|
|
||
| .dismiss-button { | ||
| width: 100%; | ||
| background-color: hsl(234, 29%, 20%); | ||
| color: hsl(0, 0%, 100%); | ||
| border: none; | ||
| padding: 15px; | ||
| border-radius: 5px; | ||
| cursor: pointer; | ||
| font-size: 16px; | ||
| font-weight: bold; | ||
| &:hover { | ||
| background: linear-gradient(90deg, hsl(4, 100%, 67%), hsl(22, 90%, 66%)); | ||
| } | ||
| } | ||
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.
Why do you need both id and classes? you can use 2 classes
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.
there is no special reason, its just that I'm familiar with it
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.
It would be better to not always use id, only for spesific cases