From 0d420547ca9fa95ef30615be012ba1728fc05f2c Mon Sep 17 00:00:00 2001 From: Elad Abutbul Date: Thu, 20 Nov 2025 17:03:34 +0200 Subject: [PATCH 1/3] elad-abutbul --- .../css/colors.css | 8 + .../css/index.css | 10 + .../css/main.css | 236 ++++++++++++++++++ .../html/main.html | 96 +++++++ .../index.html | 52 ---- .../js/main.js | 98 ++++++++ 6 files changed, 448 insertions(+), 52 deletions(-) create mode 100644 newsletter-sign-up-with-success-message-main/css/colors.css create mode 100644 newsletter-sign-up-with-success-message-main/css/index.css create mode 100644 newsletter-sign-up-with-success-message-main/css/main.css create mode 100644 newsletter-sign-up-with-success-message-main/html/main.html delete mode 100644 newsletter-sign-up-with-success-message-main/index.html create mode 100644 newsletter-sign-up-with-success-message-main/js/main.js diff --git a/newsletter-sign-up-with-success-message-main/css/colors.css b/newsletter-sign-up-with-success-message-main/css/colors.css new file mode 100644 index 0000000..1a36d2e --- /dev/null +++ b/newsletter-sign-up-with-success-message-main/css/colors.css @@ -0,0 +1,8 @@ +:root { + --red: hsl(4, 100%, 67%); + --blue-800: hsl(234, 29%, 20%); + --blue-700: hsl(235, 18%, 26%); + --grey: hsl(0, 0%, 58%); + --white: hsl(0, 0%, 100%); + --black:hsl(0, 0%, 0%); +} \ No newline at end of file diff --git a/newsletter-sign-up-with-success-message-main/css/index.css b/newsletter-sign-up-with-success-message-main/css/index.css new file mode 100644 index 0000000..7128af1 --- /dev/null +++ b/newsletter-sign-up-with-success-message-main/css/index.css @@ -0,0 +1,10 @@ +.max-width{ + width: 100%; +} +.flex-column{ + display: flex; + flex-direction: column; +} +.font-weight-600{ + font-weight: 600; +} \ No newline at end of file diff --git a/newsletter-sign-up-with-success-message-main/css/main.css b/newsletter-sign-up-with-success-message-main/css/main.css new file mode 100644 index 0000000..e0e8815 --- /dev/null +++ b/newsletter-sign-up-with-success-message-main/css/main.css @@ -0,0 +1,236 @@ +* { + margin: 0; + padding: 0; +} +body { + background-color: var(--blue-800); + font-family: "Work Sans", sans-serif; +} + +.container { + height: 100vh; + display: flex; + justify-content: center; + align-items: center; +} +.button { + border: none; + padding: 15px; + background-color: var(--blue-800); + border-radius: 5px; + color: var(--white); + font-size: 11px; + cursor: pointer; + transition: 0.2s ease-in; +} +.button:hover { + background: linear-gradient(90deg, hsl(347, 100%, 66%), hsl(13, 100%, 61%)); + box-shadow: 0 12px 20px rgba(255, 83, 123, 0.35); +} + +/* */ +.signup-container { + display: flex; + align-items: center; + justify-content: space-between; + width: 650px; + height: 415px; + border-radius: 20px; + background-color: var(--white); + overflow: hidden; + margin: 20px; +} +.signup-form { + gap: 10px; + width: 290px; + padding-left: 40px; +} +.signup-form h1 { + font-size: 40px; + padding-bottom: 7px; + white-space: nowrap; + color: var(--blue-800); +} +.signup-form p { + font-size: 11.5px; +} +.list-container { + gap: 5px; + padding: 10px 0 10px 0; +} +.list-item { + display: flex; + gap: 10px; +} +.list-item img { + width: 15px; + height: 15px; +} +.email-container { + gap: 6px; + padding-bottom: 5px; +} +.email-label-row { + display: flex; + justify-content: space-between; + align-items: center; +} +.input-error { + border: 1px solid red; + background-color: #ffe6e6; +} +.error-msg { + color: var(--red); + font-size: 10px; + display: none; +} +.email-container label { + font-size: 10px; + color: var(--blue-800); +} +.email-input { + padding: 10px; + border: 1px solid var(--black); + box-sizing: border-box; + border-radius: 5px; + width: 100%; +} +/* */ + +/* */ +.container-success { + width: 350px; + height: 330px; + background-color: var(--white); + border-radius: 15px; + padding: 25px 20px 25px 20px; + display: flex; + justify-content: space-around; + align-items: center; +} +.signup-image { + width: 260px; + padding-right: 15px; +} +/* */ + +#success { + display: none; +} +.success-content { + width: 300px; + justify-content: space-between; + gap: 20px; +} +.success-img { + width: 50px; + height: 50px; +} +.confirmation-success { + font-size: 12px; + padding-bottom: 10px; +} +.title-success { + font-size: 40px; + color: var(--blue-800); +} + +@media (max-width: 700px) { + .container { + margin: 0; + } + .signup-image { + display: none; + } + .signup-container { + width: 360px; + justify-content: center; + } + .signup-form { + padding: 0; + } +} + +@media (max-width: 375px) { + .container { + margin: 0; + } + .signup-container { + height: 100vh; + width: 100vw; + margin: 0; + border-radius: 0px; + flex-direction: column-reverse; + justify-content: flex-end; + gap: 20px; + } + .signup-form { + width: 90%; + height: 100%; + justify-content: space-around; + padding-bottom: 20px; + } + .signup-form h1 { + font-size: 40px; + padding: 0; + white-space: normal; + } + .signup-form p { + font-size: 16px; + } + .list-container { + gap: 10px; + } + .signup-image { + display: block; + width: 100%; + padding: 0; + border-radius: 0px; + content: url("../assets/images/illustration-sign-up-mobile.svg"); + } + .email-container input { + padding: 20px; + } + .button-submit { + padding: 20px; + } + /* --- SUCCESS MOBILE --- */ + + .container-success { + width: 100vw; + height: 100vh; + margin: 0; + border-radius: 0; + padding: 40px 24px; + display: flex; + justify-content: center; + align-items: flex-end; + box-sizing: border-box; + } + + .success-content { + display: flex; + flex-direction: column; + gap: 24px; + } + + .success-img { + width: 56px; + height: 56px; + } + + .confirmation-success { + font-size: 15px; + margin-bottom: 200px; + } + + #dismissBtn { + margin-top: 40px; + padding: 18px; + font-size: 14px; + } +} + +/* */ + +/* */ diff --git a/newsletter-sign-up-with-success-message-main/html/main.html b/newsletter-sign-up-with-success-message-main/html/main.html new file mode 100644 index 0000000..4b735c1 --- /dev/null +++ b/newsletter-sign-up-with-success-message-main/html/main.html @@ -0,0 +1,96 @@ + + + + + + + + + + + + + + Frontend Mentor | Newsletter sign-up form with success message + + + + +
+ + +
+
+ +
+ +

Thanks for subscribing!

+

+ A confirmation email has been sent to . Please + open it and click the button inside to confirm your subscription. +

+ +
+
+ +
+
+ + + diff --git a/newsletter-sign-up-with-success-message-main/index.html b/newsletter-sign-up-with-success-message-main/index.html deleted file mode 100644 index 8e7329b..0000000 --- a/newsletter-sign-up-with-success-message-main/index.html +++ /dev/null @@ -1,52 +0,0 @@ - - - - - - - - - Frontend Mentor | Newsletter sign-up form with success message - - - - - - - - - Stay updated! - - 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 - - Subscribe to monthly newsletter - - - - - - Thanks for subscribing! - - A confirmation email has been sent to ash@loremcompany.com. - Please open it and click the button inside to confirm your subscription. - - Dismiss message - - - -
- Challenge by Frontend Mentor. - Coded by Your Name Here. -
- - \ No newline at end of file diff --git a/newsletter-sign-up-with-success-message-main/js/main.js b/newsletter-sign-up-with-success-message-main/js/main.js new file mode 100644 index 0000000..5359847 --- /dev/null +++ b/newsletter-sign-up-with-success-message-main/js/main.js @@ -0,0 +1,98 @@ +const emailInput = document.getElementById("emailInput"); +const errorMsg = document.getElementById("errorMsg"); +const signup = document.getElementById("signup"); +const success = document.getElementById("success"); +const successEmail = document.getElementById("successEmail"); +const dismissBtn = document.getElementById("dismissBtn"); +const signupForm = document.getElementById("signupForm"); +const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + + + +// handlerim | +// v + +signupForm.addEventListener("submit",onSubmit); + +dismissBtn.addEventListener("click", onDismiss); + +emailInput.addEventListener("input", clearErrorState); + +// handlerim ^ +// | + + + + +// functions | +// v + +function onSubmit(event) { + + event.preventDefault() + + const email = emailInput.value.trim(); + + if (isValidEmail(email)) { + showSuccessState(email); + return; + } + + showErrorState(); + +} + +function onDismiss(){ + toggleViews("signup") +} + +function showSuccessState(email) { + + successEmail.textContent = email; + + successEmail.style.fontWeight = "600"; + + signupForm.reset(); + + toggleViews("success"); + + clearErrorState(); + +} + +function clearErrorState() { + + emailInput.classList.remove("input-error"); + + errorMsg.style.display = "none"; + +} + +function showErrorState() { + + emailInput.classList.add("input-error"); + + errorMsg.style.display = "block"; + +} + + + +function toggleViews(toggle) { + + if (toggle=="signup") { + signup.style.display = "flex"; + success.style.display = "none"; + } else { + signup.style.display = "none"; + success.style.display = "flex"; + } + +} + +function isValidEmail(email) { + return EMAIL_PATTERN.test(email); +} + +// ^ +// functions | \ No newline at end of file From ab461c2214b0307a5eb357e91b1169128e7027b9 Mon Sep 17 00:00:00 2001 From: Elad Abutbul Date: Mon, 1 Dec 2025 15:16:49 +0200 Subject: [PATCH 2/3] updated code based on PL comments --- .../css/colors.css | 6 +- .../css/index.css | 18 ++++-- .../css/main.css | 31 +++------- .../html/main.html | 16 ++--- .../js/main.js | 62 +++++-------------- 5 files changed, 50 insertions(+), 83 deletions(-) diff --git a/newsletter-sign-up-with-success-message-main/css/colors.css b/newsletter-sign-up-with-success-message-main/css/colors.css index 1a36d2e..6c80023 100644 --- a/newsletter-sign-up-with-success-message-main/css/colors.css +++ b/newsletter-sign-up-with-success-message-main/css/colors.css @@ -4,5 +4,7 @@ --blue-700: hsl(235, 18%, 26%); --grey: hsl(0, 0%, 58%); --white: hsl(0, 0%, 100%); - --black:hsl(0, 0%, 0%); -} \ No newline at end of file + --black: hsl(0, 0%, 0%); + --box-shadow-pink: rgba(255, 83, 123, 0.35); + --input-background-error: #ffe6e6; +} diff --git a/newsletter-sign-up-with-success-message-main/css/index.css b/newsletter-sign-up-with-success-message-main/css/index.css index 7128af1..bf195af 100644 --- a/newsletter-sign-up-with-success-message-main/css/index.css +++ b/newsletter-sign-up-with-success-message-main/css/index.css @@ -1,10 +1,16 @@ -.max-width{ - width: 100%; +.max-width { + width: 100%; } -.flex-column{ +.flex-column { display: flex; flex-direction: column; } -.font-weight-600{ - font-weight: 600; -} \ No newline at end of file +.font-weight-bold { + font-weight: 600; +} +.hidden { + display: none; +} +.block { + display: block; +} diff --git a/newsletter-sign-up-with-success-message-main/css/main.css b/newsletter-sign-up-with-success-message-main/css/main.css index e0e8815..15604d4 100644 --- a/newsletter-sign-up-with-success-message-main/css/main.css +++ b/newsletter-sign-up-with-success-message-main/css/main.css @@ -25,10 +25,9 @@ body { } .button:hover { background: linear-gradient(90deg, hsl(347, 100%, 66%), hsl(13, 100%, 61%)); - box-shadow: 0 12px 20px rgba(255, 83, 123, 0.35); + box-shadow: 0 12px 20px var(--box-shadow-pink); } -/* */ .signup-container { display: flex; align-items: center; @@ -56,15 +55,15 @@ body { } .list-container { gap: 5px; - padding: 10px 0 10px 0; + padding: 10px 0; } .list-item { display: flex; gap: 10px; -} -.list-item img { - width: 15px; - height: 15px; + img { + width: 15px; + height: 15px; + } } .email-container { gap: 6px; @@ -76,8 +75,8 @@ body { align-items: center; } .input-error { - border: 1px solid red; - background-color: #ffe6e6; + outline: 1px solid var(--red); + background-color: var(--input-background-error); } .error-msg { color: var(--red); @@ -95,28 +94,23 @@ body { border-radius: 5px; width: 100%; } -/* */ -/* */ .container-success { width: 350px; height: 330px; background-color: var(--white); border-radius: 15px; - padding: 25px 20px 25px 20px; + padding: 25px 20px; display: flex; justify-content: space-around; align-items: center; + display: none; } .signup-image { width: 260px; padding-right: 15px; } -/* */ -#success { - display: none; -} .success-content { width: 300px; justify-content: space-between; @@ -194,7 +188,6 @@ body { .button-submit { padding: 20px; } - /* --- SUCCESS MOBILE --- */ .container-success { width: 100vw; @@ -230,7 +223,3 @@ body { font-size: 14px; } } - -/* */ - -/* */ diff --git a/newsletter-sign-up-with-success-message-main/html/main.html b/newsletter-sign-up-with-success-message-main/html/main.html index 4b735c1..fd2b6a9 100644 --- a/newsletter-sign-up-with-success-message-main/html/main.html +++ b/newsletter-sign-up-with-success-message-main/html/main.html @@ -31,24 +31,24 @@

Stay updated!

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

- + icon-list

Product discovery and building what matters

- + icon-list

Measuring to ensure updates are a success

- + icon-list

And much more!

+ diff --git a/newsletter-sign-up-with-success-message-main/js/main.js b/newsletter-sign-up-with-success-message-main/js/main.js index 5359847..722aa8b 100644 --- a/newsletter-sign-up-with-success-message-main/js/main.js +++ b/newsletter-sign-up-with-success-message-main/js/main.js @@ -1,35 +1,19 @@ const emailInput = document.getElementById("emailInput"); -const errorMsg = document.getElementById("errorMsg"); +const errorMsg = document.querySelector(".error-msg"); const signup = document.getElementById("signup"); -const success = document.getElementById("success"); +const success = document.querySelector(".container-success"); const successEmail = document.getElementById("successEmail"); const dismissBtn = document.getElementById("dismissBtn"); const signupForm = document.getElementById("signupForm"); const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; - - -// handlerim | -// v - -signupForm.addEventListener("submit",onSubmit); +signupForm.addEventListener("submit", onSubmit); dismissBtn.addEventListener("click", onDismiss); -emailInput.addEventListener("input", clearErrorState); - -// handlerim ^ -// | - - - - -// functions | -// v function onSubmit(event) { - - event.preventDefault() + event.preventDefault(); const email = emailInput.value.trim(); @@ -39,60 +23,46 @@ function onSubmit(event) { } showErrorState(); - } -function onDismiss(){ - toggleViews("signup") +function onDismiss() { + toggleViews("signup"); } function showSuccessState(email) { - successEmail.textContent = email; - successEmail.style.fontWeight = "600"; + successEmail.classList.add("font-weight-bold"); signupForm.reset(); toggleViews("success"); clearErrorState(); - } function clearErrorState() { - emailInput.classList.remove("input-error"); - - errorMsg.style.display = "none"; - + errorMsg.classList.remove("block"); + errorMsg.classList.add("hidden"); } function showErrorState() { - emailInput.classList.add("input-error"); - - errorMsg.style.display = "block"; - + errorMsg.classList.remove("hidden"); + errorMsg.classList.add("block"); } - - function toggleViews(toggle) { - - if (toggle=="signup") { + if (toggle == "signup") { signup.style.display = "flex"; success.style.display = "none"; - } else { - signup.style.display = "none"; - success.style.display = "flex"; + return; } - + signup.style.display = "none"; + success.style.display = "flex"; } function isValidEmail(email) { - return EMAIL_PATTERN.test(email); + return email && EMAIL_PATTERN.test(email); } - -// ^ -// functions | \ No newline at end of file From 0a71ed216c896b497bf0f925343a3764b566129c Mon Sep 17 00:00:00 2001 From: Elad Abutbul Date: Mon, 1 Dec 2025 15:23:10 +0200 Subject: [PATCH 3/3] change the class of the button to action-button --- newsletter-sign-up-with-success-message-main/css/main.css | 7 ++----- .../html/main.html | 4 ++-- 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/newsletter-sign-up-with-success-message-main/css/main.css b/newsletter-sign-up-with-success-message-main/css/main.css index 15604d4..07e6f3e 100644 --- a/newsletter-sign-up-with-success-message-main/css/main.css +++ b/newsletter-sign-up-with-success-message-main/css/main.css @@ -13,7 +13,7 @@ body { justify-content: center; align-items: center; } -.button { +.action-button { border: none; padding: 15px; background-color: var(--blue-800); @@ -23,7 +23,7 @@ body { cursor: pointer; transition: 0.2s ease-in; } -.button:hover { +.action-button:hover { background: linear-gradient(90deg, hsl(347, 100%, 66%), hsl(13, 100%, 61%)); box-shadow: 0 12px 20px var(--box-shadow-pink); } @@ -185,9 +185,6 @@ body { .email-container input { padding: 20px; } - .button-submit { - padding: 20px; - } .container-success { width: 100vw; diff --git a/newsletter-sign-up-with-success-message-main/html/main.html b/newsletter-sign-up-with-success-message-main/html/main.html index fd2b6a9..ec62de2 100644 --- a/newsletter-sign-up-with-success-message-main/html/main.html +++ b/newsletter-sign-up-with-success-message-main/html/main.html @@ -60,7 +60,7 @@

Stay updated!

+