diff --git a/newsletter-sign-up-with-success-message-main/index.html b/newsletter-sign-up-with-success-message-main/index.html index 8e7329b..df24218 100644 --- a/newsletter-sign-up-with-success-message-main/index.html +++ b/newsletter-sign-up-with-success-message-main/index.html @@ -2,51 +2,55 @@ - - + - 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!

+
+ +
+ + +

+
+ +
+
+ +
+ +
+ +
+ +
+
- - - 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. + Challenge by Frontend Mentor. + Coded by Linoy Rainshtein.
+ + - \ No newline at end of file + diff --git a/newsletter-sign-up-with-success-message-main/scrips.js b/newsletter-sign-up-with-success-message-main/scrips.js new file mode 100644 index 0000000..52bc12e --- /dev/null +++ b/newsletter-sign-up-with-success-message-main/scrips.js @@ -0,0 +1,39 @@ +document.addEventListener("DOMContentLoaded", function() { + const emailInput = document.getElementById("email"); + const button = document.getElementById("buttonSub"); + const errorMsg = document.getElementById("errorMsg"); + + function isValidEmail(email) { + const regex = /^[a-zA-Z]{1,15}@[a-zA-Z]{1,15}\.com$/; + return regex.test(email); + } + + button.addEventListener("click", function() { + console.log("Button clicked!"); + const emailValue = emailInput.value.trim(); + console.log("Email" ,emailValue); + + // 砖讚讛 专讬拽 + if (emailValue === "") { + errorMsg.textContent = "You Need To Enter An EMAIL first"; + errorMsg.style.visibility = "visible"; + emailInput.style.border = "2px solid red"; + return; + } + + // 驻讜专诪讟 诇讗 转拽讬谉 + if (!isValidEmail(emailValue)) { + errorMsg.textContent = "Wrong Mail Format"; + errorMsg.style.visibility = "visible"; + emailInput.style.border = "2px solid red"; + return; + } + + // 讛爪诇讞讛 + errorMsg.style.visibility = "hidden"; + emailInput.style.border = "2px solid green"; + + // 诪注讘专 诇注诪讜讚 讗讞专 + window.location.href = "success.html"; + }); +}); 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..dd63fc5 --- /dev/null +++ b/newsletter-sign-up-with-success-message-main/style.css @@ -0,0 +1,89 @@ +body { + background-color: hsl(235, 18%, 26%); +} + +.backOfWite { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + margin-top: 5%; +} + +.frontBox { + display: flex; + flex-direction: row; + background-color: white; + justify-content: space-around; + border-radius: 5%; +} + +.allText { + display: flex; + flex-direction: column; + justify-content: space-between; + margin-left: 5%; + margin-bottom: 10%; + margin-top: 5%; +} + +.checkText { + display: flex; + flex-direction: row; + gap: 5%; +} + +@font-face { + font-family: 'myFont1'; + src: url('./assets/fonts/Roboto-Regular.ttf') format('truetype'); +} + +@font-face { + font-family: 'myFont2'; + src: url('./assets/fonts/Roboto-Bold.ttf') format('truetype'); +} + +.textPage { + font-family: "myFont1", sans-serif; + font-size: 16px; + font-weight: 400; +} + +#higlight { + font-family: "myFont2", sans-serif; + font-size: 50px; + font-weight: 700; +} + +.mail { + display: flex; + flex-direction: column; + gap: 10px; + margin-top: 5%; +} + +#errorMsg { + color: red; + font-size: 12px; + margin-top: -5px; + visibility: hidden; /* JS 讬砖谞讛 诇-visible */ +} + +#e-mail { + font-family: "myFont2", sans-serif; + font-size: 13px; + font-weight: 900; +} + +#buttonSub { + background-color: hsl(234, 29%, 20%); + color: white; + cursor: pointer; +} + +.mail input, #buttonSub { + width: 300px; + padding: 12px; + border-radius: 5px; + box-sizing: border-box; +} diff --git a/newsletter-sign-up-with-success-message-main/stylsSuccess.css b/newsletter-sign-up-with-success-message-main/stylsSuccess.css new file mode 100644 index 0000000..0b91b1f --- /dev/null +++ b/newsletter-sign-up-with-success-message-main/stylsSuccess.css @@ -0,0 +1,28 @@ +body { + background-color: hsl(235, 18%, 26%); +} + +.backOfWite { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + margin-top: 5%; +} + +.frontBox { + display: flex; + flex-direction: row; + background-color: rgb(246, 125, 12); + align-items: center; + justify-content: center; + border-radius: 5%; + height: 500px; + width: 500px; +} + +#WELCOMEH{ + color: white; + font-size: 50px; + font-weight: bold; +} \ No newline at end of file diff --git a/newsletter-sign-up-with-success-message-main/success.html b/newsletter-sign-up-with-success-message-main/success.html new file mode 100644 index 0000000..10f14d9 --- /dev/null +++ b/newsletter-sign-up-with-success-message-main/success.html @@ -0,0 +1,15 @@ + + + + + + + +
+
+

WELCOME !!!!!!

+
+
+ + + \ No newline at end of file