diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..41e6ed0 Binary files /dev/null and b/.DS_Store differ diff --git a/newsletter-sign-up-with-success-message-main/index.css b/newsletter-sign-up-with-success-message-main/index.css new file mode 100644 index 0000000..5fdf905 --- /dev/null +++ b/newsletter-sign-up-with-success-message-main/index.css @@ -0,0 +1,123 @@ +body { + height: 100vh; + margin: 0; + padding: 0; + background-color: #2c2e47; + font-family: Arial, sans-serif; +} + +.maincontainer { + margin-top: 32%; + height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.center { + padding: 20px; + width: 750px; + background: white; + border-radius: 20px; + display: flex; + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25); + overflow: hidden; + margin-bottom: 20px; +} + +#successCard { + display: none; + flex-direction: column; + align-items: center; + justify-content: center; + width: 381px; +} + +.text { + flex: 1; + padding: 40px; +} + +.text h1 { + margin-top: 0; + font-size: 32px; + font-weight: 700; +} + +.text p { + color: #555; + margin-bottom: 15px; +} + +.text ul { + list-style: none; + padding: 0; + margin-bottom: 30px; +} + +.text ul li { + margin-bottom: 10px; + display: flex; + align-items: center; + gap: 10px; +} + +.text label { + font-size: 12px; + font-weight: bold; + display: block; + margin-bottom: 6px; +} + +.text input { + width: 100%; + padding: 12px; + margin-bottom: 20px; + border-radius: 6px; + border: 1px solid #ccc; + font-size: 14px; +} + +#subscribeBtn { + width: 110%; + padding: 14px; + border-radius: 6px; + border: none; + background-color: #1d223a; + color: white; + font-size: 14px; + cursor: pointer; + font-weight: bold; + transition: 0.3s ease; +} + +#subscribeBtn.valid { + background: linear-gradient(to right, #ff6f91, #ff9671); +} + +#dismissBtn:hover { + opacity: 0.9; +} + +#errorMsg { + display: none; + color: red; + font-size: 9px; + margin-bottom: 5px; + text-align: right; + margin-right: -23px; +} + +#dismissBtn { + width: 110%; + padding: 14px; + border-radius: 6px; + border: none; + background-color: #1d223a; + color: white; + font-size: 14px; + cursor: pointer; + font-weight: bold; + margin-top: 20px; +} diff --git a/newsletter-sign-up-with-success-message-main/index.html b/newsletter-sign-up-with-success-message-main/index.html index 8e7329b..d961fd1 100644 --- a/newsletter-sign-up-with-success-message-main/index.html +++ b/newsletter-sign-up-with-success-message-main/index.html @@ -1,52 +1,61 @@ + - - + - - Frontend Mentor | Newsletter sign-up form with success message - - - + + Newsletter Sign-up + - +
- Stay updated! +
- Join 60,000+ product managers receiving monthly updates on: +
+

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! +
    +
  • Product discovery and building what matters
    • +
  • Measuring to ensure updates are a success
    • +
  • And much more!
    • +
- Email address - email@company.com + +

Valid email required

+ - Subscribe to monthly newsletter + +
- +
+ Sign Up Illustration +
- +
- 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. +

Thanks for subscribing!

- Dismiss message +

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

+ + +
+
- - -
- 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/index.js b/newsletter-sign-up-with-success-message-main/index.js new file mode 100644 index 0000000..6e74396 --- /dev/null +++ b/newsletter-sign-up-with-success-message-main/index.js @@ -0,0 +1,50 @@ +const input = document.getElementById("emailInput"); +const error = document.getElementById("errorMsg"); +const btn = document.getElementById("subscribeBtn"); +const formCard = document.querySelector("#formCard"); +const successCard = document.querySelector("#successCard"); + +input.addEventListener("input", function () { + const email = input.value; + + if (!email.includes("@")) { + btn.classList.remove("valid"); + return; + } + + const [, domain] = email.split("@"); + + if (domain === "gmail.com" || domain === "colman.com") { + btn.classList.add("valid"); + } else { + btn.classList.remove("valid"); + } +}); + +btn.onclick = function () { + const email = input.value; + + if (!email.includes("@")) { + error.style.display = "block"; + return; + } + + const parts = email.split("@"); + const domain = parts[1]; + + if (domain !== "gmail.com" && domain !== "colman.com") { + error.style.display = "block"; + return; + } + + error.style.display = "none"; + formCard.style.display = "none"; + successCard.style.display = "flex"; +}; + +const dismissBtn = document.getElementById("dismissBtn"); + +dismissBtn.onclick = function () { + successCard.style.display = "none"; + formCard.style.display = "flex"; +};