diff --git a/newsletter-sign-up-with-success-message-main/index.html b/newsletter-sign-up-with-success-message-main/index.html index 8e7329b..e2008d5 100644 --- a/newsletter-sign-up-with-success-message-main/index.html +++ b/newsletter-sign-up-with-success-message-main/index.html @@ -1,52 +1,76 @@ + - + + + + + + + - + 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 +

Stay updated!

- Subscribe to monthly newsletter + 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:
+

- 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 +
+ side photo +
- - -
- 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/script.js b/newsletter-sign-up-with-success-message-main/script.js new file mode 100644 index 0000000..9d9a101 --- /dev/null +++ b/newsletter-sign-up-with-success-message-main/script.js @@ -0,0 +1,34 @@ +const submitButton = document.getElementById('submitButton'); +const emailAddress = document.getElementById('email'); +const dismissButton = document.getElementById('dismissButton'); +const mainContainer = document.querySelector(".mainbox") +const successContainer = document.querySelector('.successContainer'); +const confirmedEmail = document.getElementById('confirmedEmail') + + +submitButton.addEventListener('click', function (event) { + event.preventDefault(); + + if (!emailAddress) { + console.error("Error: Could not find the email input field! Check your HTML IDs."); + return; + } + + if (emailAddress.checkValidity()) { + const email = emailAddress.value; + confirmedEmail.textContent = email; + + mainContainer.classList.add('hidden'); + successContainer.classList.remove('hidden'); + + } else { + console.log("Email is invalid."); + emailAddress.reportValidity(); + } +}); + + +dismissButton.addEventListener('click', function () { + successContainer.classList.add('hidden'); + mainContainer.classList.remove('hidden'); +}); 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..1d77572 --- /dev/null +++ b/newsletter-sign-up-with-success-message-main/style.css @@ -0,0 +1,150 @@ +html, body { + height: 100%; + margin: 0; + font-family: "Roboto", sans-serif; +} + +h1{ + font-size: 50px; + color: hsl(235, 18%, 26%); + +} + +h5 { + margin-bottom: 7px; + color: hsl(235, 18%, 26%); + } + +.container { + display: flex; + align-items: center; + justify-content: center; + height: 95vh; +} + +.blueContainer{ + display: flex; + background-color: hsl(234, 29%, 20%); + height: 85%; + width: 85%; +} + +.hidden { + display: none !important; +} + +.mainbox{ + display: flex; + margin: auto; + height: 65%; + width: 65%; + max-width: 700px; + background-color: white; + border-radius: 3%; + overflow: hidden; + justify-content: space-evenly; + padding: 3%; +} + +.text-side { + height: 100%; + width: 50%; + display: flex; + justify-content: center; + margin-top: 30px; + font-size: 16px; +} + +.text{ + height: 70%; + width: 100%; +} + +.bullet-list{ + display: flex; + margin-top: 20px; + flex-direction: column; + line-height: 2; +} + +.bullet::before{ + content: url("assets/images/icon-list.svg"); + margin-right: 6px; + +} + +.emailPart{ + display: flex; + margin-top: 20px; +} + +#emailTitle{ + font-size: 1px; +} + +.emailBox{ + width: 100%; + height: 40px; + padding-left: 20px; + box-sizing: border-box; +} + +.emailBox:hover{ + cursor: pointer; +} + +.submitButton{ + background-color: hsl(235, 18%, 26%); + color: white; + border: none; + border-radius: 5px; + height: 41px; + box-sizing: border-box; + padding: 10px 50px; +} + +.submitButton:hover { + background-color: hsl(4, 100%, 67%); + cursor: pointer; + box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3); +} + +.pic-side{ + display: flex; + height: 100%; + width: 50%; + justify-content: flex-end; + align-items: center; +} + +.pic-side img{ + height: 100%; + width: 100%; + object-fit: cover; + object-position: center; + border-radius: 2%; +} + +.successContainer{ + display: flex; + justify-items: center; + margin: auto; + justify-content: center; + width: 65%; +} + +.successMsg::before{ + content: url("assets/images/icon-success.svg"); + margin-right: 6px; + +} + +.successMsg{ + height: 30%; + width: 30%; + max-width: 700px; + background-color: white; + border-radius: 3%; + overflow: hidden; + padding: 3%; +} \ No newline at end of file