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..6c80023 --- /dev/null +++ b/newsletter-sign-up-with-success-message-main/css/colors.css @@ -0,0 +1,10 @@ +: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%); + --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 new file mode 100644 index 0000000..bf195af --- /dev/null +++ b/newsletter-sign-up-with-success-message-main/css/index.css @@ -0,0 +1,16 @@ +.max-width { + width: 100%; +} +.flex-column { + display: flex; + flex-direction: column; +} +.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 new file mode 100644 index 0000000..07e6f3e --- /dev/null +++ b/newsletter-sign-up-with-success-message-main/css/main.css @@ -0,0 +1,222 @@ +* { + 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; +} +.action-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; +} +.action-button:hover { + background: linear-gradient(90deg, hsl(347, 100%, 66%), hsl(13, 100%, 61%)); + box-shadow: 0 12px 20px var(--box-shadow-pink); +} + +.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; +} +.list-item { + display: flex; + gap: 10px; + 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 { + outline: 1px solid var(--red); + background-color: var(--input-background-error); +} +.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; + display: flex; + justify-content: space-around; + align-items: center; + display: none; +} +.signup-image { + width: 260px; + padding-right: 15px; +} + +.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; + } + + .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..ec62de2 --- /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..722aa8b --- /dev/null +++ b/newsletter-sign-up-with-success-message-main/js/main.js @@ -0,0 +1,68 @@ +const emailInput = document.getElementById("emailInput"); +const errorMsg = document.querySelector(".error-msg"); +const signup = document.getElementById("signup"); +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@]+$/; + +signupForm.addEventListener("submit", onSubmit); + +dismissBtn.addEventListener("click", onDismiss); + + +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.classList.add("font-weight-bold"); + + signupForm.reset(); + + toggleViews("success"); + + clearErrorState(); +} + +function clearErrorState() { + emailInput.classList.remove("input-error"); + errorMsg.classList.remove("block"); + errorMsg.classList.add("hidden"); +} + +function showErrorState() { + emailInput.classList.add("input-error"); + errorMsg.classList.remove("hidden"); + errorMsg.classList.add("block"); +} + +function toggleViews(toggle) { + if (toggle == "signup") { + signup.style.display = "flex"; + success.style.display = "none"; + return; + } + signup.style.display = "none"; + success.style.display = "flex"; +} + +function isValidEmail(email) { + return email && EMAIL_PATTERN.test(email); +}