From 407c9ecd7b1ca27c698bb83729d8c3ccbf5ed201 Mon Sep 17 00:00:00 2001 From: brauni18 Date: Sun, 16 Nov 2025 21:27:19 +0200 Subject: [PATCH 1/5] fff --- newsletter-sign-up-with-success-message-main/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/newsletter-sign-up-with-success-message-main/index.html b/newsletter-sign-up-with-success-message-main/index.html index 8e7329b..422ca48 100644 --- a/newsletter-sign-up-with-success-message-main/index.html +++ b/newsletter-sign-up-with-success-message-main/index.html @@ -6,8 +6,8 @@ - Frontend Mentor | Newsletter sign-up form with success message - + Frontend Mentor llll | Newsletter sign-up form with success message + From 14c58cdc9cfdcf36ac09c10cb4136a9efe4e2b29 Mon Sep 17 00:00:00 2001 From: brauni18 Date: Mon, 17 Nov 2025 14:12:53 +0200 Subject: [PATCH 4/5] index page update --- .../index.html | 44 ++++++---- .../style.css | 87 +++++++++++++++++++ 2 files changed, 115 insertions(+), 16 deletions(-) create mode 100644 newsletter-sign-up-with-success-message-main/style.css diff --git a/newsletter-sign-up-with-success-message-main/index.html b/newsletter-sign-up-with-success-message-main/index.html index c17dce5..7e2fb1a 100644 --- a/newsletter-sign-up-with-success-message-main/index.html +++ b/newsletter-sign-up-with-success-message-main/index.html @@ -5,50 +5,62 @@ - - Frontend Mentor | Newsletter sign-up form with success message + + Frontend Mentor | Newsletter sign-up form with success message +
+
+

Stay updated!

- Stay updated! +

Join 60,000+ product managers receiving + monthly updates on:

+ +
    +
  • checkmark icon Product discovery and building what matters
    • +
  • checkmark icon Measuring to ensure updates are a success
    • +
  • checkmark icon And much more!
    • +
- Join 60,000+ product managers receiving monthly updates on: + - Product discovery and building what matters - Measuring to ensure updates are a success - And much more! + - Email address - email@company.com +
+
+ information illustration +
- Subscribe to monthly newsletter +
- + - + -
+ \ No newline at end of file diff --git a/newsletter-sign-up-with-success-message-main/style.css b/newsletter-sign-up-with-success-message-main/style.css new file mode 100644 index 0000000..4782820 --- /dev/null +++ b/newsletter-sign-up-with-success-message-main/style.css @@ -0,0 +1,87 @@ +@font-face { + font-family: 'Roboto'; + src: url('./assets/fonts/Roboto-Regular.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Roboto'; + src: url('./assets/fonts/Roboto-Bold.ttf') format('truetype'); + font-weight: bold; + font-style: normal; +} + +body{ + font-family: 'Roboto', Arial, sans-serif; + display: flex; + justify-content: center; + align-items: center; + + background-color: hsl(234, 29%, 20%); + height: 100vh; + font-size: 16px; +} +.main-card{ + display: flex; + flex-direction: row; + background-color: hsl(0, 0%, 100%); + 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{ + 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; +} +.email-block{ + width: 100%; + gap: 10px; + margin-top: 20px; +} +.subscribe-button{ + width: 100%; + background-color: hsl(234, 29%, 20%); + color: hsl(0, 0%, 100%); + border: none; + padding: 15px; + border-radius: 5px; + cursor: pointer; +} \ No newline at end of file From e0a27bb7b8da9b31cb5a95867b0be85fdac6ce60 Mon Sep 17 00:00:00 2001 From: brauni18 Date: Wed, 19 Nov 2025 19:00:24 +0200 Subject: [PATCH 5/5] logic implantion --- .../index.html | 33 ++++--- .../script.js | 91 +++++++++++++++++++ .../style.css | 82 ++++++++++++++++- 3 files changed, 190 insertions(+), 16 deletions(-) create mode 100644 newsletter-sign-up-with-success-message-main/script.js diff --git a/newsletter-sign-up-with-success-message-main/index.html b/newsletter-sign-up-with-success-message-main/index.html index 7e2fb1a..cb66722 100644 --- a/newsletter-sign-up-with-success-message-main/index.html +++ b/newsletter-sign-up-with-success-message-main/index.html @@ -18,7 +18,7 @@ -
+

Stay updated!

@@ -32,35 +32,44 @@

Stay updated!

- +
information illustration
-
- - - - Dismiss message --> + - + + + \ No newline at end of file diff --git a/newsletter-sign-up-with-success-message-main/script.js b/newsletter-sign-up-with-success-message-main/script.js new file mode 100644 index 0000000..4a945cb --- /dev/null +++ b/newsletter-sign-up-with-success-message-main/script.js @@ -0,0 +1,91 @@ +// Getting elements +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; +}; + +// 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 { + 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(); + } +}); diff --git a/newsletter-sign-up-with-success-message-main/style.css b/newsletter-sign-up-with-success-message-main/style.css index 4782820..82c241b 100644 --- a/newsletter-sign-up-with-success-message-main/style.css +++ b/newsletter-sign-up-with-success-message-main/style.css @@ -59,6 +59,15 @@ body{ 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; @@ -71,12 +80,72 @@ body{ border: 1px solid hsl(0, 0%,58%); box-sizing: border-box; } -.email-block{ +.subscribe-button{ width: 100%; - gap: 10px; - margin-top: 20px; + background-color: hsl(234, 29%, 20%); + color: hsl(0, 0%, 100%); + border: none; + padding: 15px; + border-radius: 5px; + cursor: pointer; } -.subscribe-button{ +.enabled-button{ + transition: background 0.3s ease; + /*adding gradient to button*/ + background: linear-gradient(90deg, hsl(4, 100%, 67%), hsl(22, 90%, 66%)); +} + +.hidden { + display: none; +} + +/* Error States */ +.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%); @@ -84,4 +153,9 @@ body{ 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%)); + } } \ No newline at end of file