From 3bddbc137ce652ffa9c045af23c5d0880050cc60 Mon Sep 17 00:00:00 2001 From: Asher Pe'er Date: Sat, 22 Nov 2025 16:36:26 +0200 Subject: [PATCH 1/2] first update --- .DS_Store | Bin 0 -> 8196 bytes .../email.js | 26 ++++ .../index.css | 118 ++++++++++++++++++ .../index.html | 70 +++++------ 4 files changed, 176 insertions(+), 38 deletions(-) create mode 100644 .DS_Store create mode 100644 newsletter-sign-up-with-success-message-main/email.js create mode 100644 newsletter-sign-up-with-success-message-main/index.css diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..99a452e92dff331419275bbb220cc241e0e5da34 GIT binary patch literal 8196 zcmeHMPfrs;6n|4twj#1Xkw4L7V?CGvib5pB7;3>NF$O{jf`Db)4rOIK)9h}kKuCJk zn;*ar;3x3lg`*ea&71Kf=+%?H`BM;qiwTCrna#Z4o0<3K?fzzWXI~2dBwZ=o1n33; z3#&l88O0GrjEj1x#B@(1B0+xuA1Fk4PzVlLn-0T(VZbn87%&VN22KM5xMz!E9kcJN zQ6milhJpW*0r7rtunJ6RtSOYQ4iqv4Kolu}EU051AblK-DUCIS(iP`a*#pt8M5h=; zx#PGa%n?%>YYLS+5akX;MApIno?RN}-X40mHyy2E^mj4-7N*Duf5}_W^8s zP{gqTs6ZKI726T4p%!9K9uJCIi0zWrT(qaM?V>H4^m#t#^Bl&&$1?T_@%m3$uI`>> z+*~y*>$vZ7W#0>HD1j`Zd3`=Zm=j?vz+_6y6)!YJX+1# ziE+*%*JCu04qkzx$0&i3f7!G33W z==RP|-0Do;xHFSo_e+ew#LLG*^xF(tRC`apLhZzs#mjGKddSB*Jzs6RPEh<@^ZAww zt#(^`M_Zz;v$OMJS9ecu@1?BWk#qCw#Xwy6IQMyw_A7L;7bI3Lj$QO4V% zS-brY(-~TLw%;|oSw@@0eutdyK|m>!^G&U;hBTW0O<%~`tzkakzCX=FFY-8BSPF63 zCL>y!WUCw_Zs3wlmBmmvM}rXYkk9;r8w4&Z()8xC@8+mK#nL>Acu81_+47uC2UN^7 z@1ZWPB{}w8ElV=>sIFX7iVaDn;74?#u4yF6-IbcuXBlTS9#5vG^^gU9a1S2C9IV3@ zyoNXM7T&`L_yXVH2WcWb + - - - - - Frontend Mentor | Newsletter sign-up form with success message - - - + + Asher Pe'er + + - - - - - 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. +
+
+

Stay update!

+

+ 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!
    • +
+ + + + + + +
+ +
+ +
+
- Dismiss message - - -
- Challenge by Frontend Mentor. - Coded by Your Name Here. -
+ + \ No newline at end of file From 7532a2ab8ad53638d9aeac0718329cf0fb82a4ec Mon Sep 17 00:00:00 2001 From: Asher Pe'er Date: Mon, 1 Dec 2025 12:47:03 +0200 Subject: [PATCH 2/2] Handled after first feedback --- .../email.js | 28 ++++++++++--------- .../index.css | 12 ++++---- .../index.html | 5 +++- 3 files changed, 25 insertions(+), 20 deletions(-) diff --git a/newsletter-sign-up-with-success-message-main/email.js b/newsletter-sign-up-with-success-message-main/email.js index 958db0d..42c8772 100644 --- a/newsletter-sign-up-with-success-message-main/email.js +++ b/newsletter-sign-up-with-success-message-main/email.js @@ -1,26 +1,28 @@ -const emailInput = document.getElementById("email"); +const emailPattern = document.getElementById("email"); +const CCC = "#ccc" +const WHITE = "white" -emailInput.addEventListener("input", function () { - const email = emailInput.value; +emailPattern.addEventListener("input", function () { + const email = emailPattern.value; const pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (email === "") { - emailInput.style.borderColor = "#ccc"; - emailInput.style.backgroundColor = "white"; + emailPattern.style.borderColor = "CCC"; + emailPattern.style.backgroundColor = "WHITE"; return; } if (pattern.test(email)) { - emailInput.style.borderColor = "green"; - emailInput.style.backgroundColor = "#e6ffe6"; + emailPattern.style.borderColor = "green"; + emailPattern.style.backgroundColor = "#e6ffe6"; } else { - emailInput.style.borderColor = "red"; - emailInput.style.backgroundColor = "#ffe6e6"; + emailPattern.style.borderColor = "red"; + emailPattern.style.backgroundColor = "#ffe6e6"; } }); -emailInput.addEventListener("blur", function () { - if (emailInput.value.trim() === "") { - emailInput.style.borderColor = "#ccc"; - emailInput.style.backgroundColor = "white"; +emailPattern.addEventListener("blur", function () { + if (emailPattern.value.trim() === "") { + emailPattern.style.borderColor = "CCC"; + emailPattern.style.backgroundColor = "WHITE"; } }); \ No newline at end of file diff --git a/newsletter-sign-up-with-success-message-main/index.css b/newsletter-sign-up-with-success-message-main/index.css index 09f1b9e..c87e305 100644 --- a/newsletter-sign-up-with-success-message-main/index.css +++ b/newsletter-sign-up-with-success-message-main/index.css @@ -20,8 +20,8 @@ body { .container { display: flex; background: white; - width: 843px; - height: 592px; + width: 45%; + height: 55%; border-radius: 25px; overflow: hidden; box-shadow: 0 10px 35px rgba(0,0,0,0.25); @@ -32,8 +32,10 @@ body { flex-direction: column; justify-content: center; padding: 50px; - width: 350px; + width: 43%; + height: auto; margin-left:15px; + } @@ -103,9 +105,7 @@ button:hover { justify-content: center; background: linear-gradient(135deg, #ff4664, #ff8f40); width: 390px; - margin-top: 20px; - margin-bottom: 20px; - margin-right: 20px; + margin: 20px 20px 20px 0; border-radius: 15px; } diff --git a/newsletter-sign-up-with-success-message-main/index.html b/newsletter-sign-up-with-success-message-main/index.html index 9c06ed8..940051a 100644 --- a/newsletter-sign-up-with-success-message-main/index.html +++ b/newsletter-sign-up-with-success-message-main/index.html @@ -30,7 +30,10 @@

Stay update!

- +
+ +
+