From f60e72b34fe6fc3ff2ae5578e25da55752444d1b Mon Sep 17 00:00:00 2001 From: davnor10 <66805043+davnor10@users.noreply.github.com> Date: Sun, 16 Nov 2025 21:42:25 +0200 Subject: [PATCH 1/3] reverted change --- .../index.html | 28 +++++++++++++------ 1 file changed, 20 insertions(+), 8 deletions(-) diff --git a/newsletter-sign-up-with-success-message-main/index.html b/newsletter-sign-up-with-success-message-main/index.html index 8e7329b..69600be 100644 --- a/newsletter-sign-up-with-success-message-main/index.html +++ b/newsletter-sign-up-with-success-message-main/index.html @@ -1,19 +1,29 @@ + - + + + + - - Frontend Mentor | Newsletter sign-up form with success message + @@ -37,16 +47,18 @@ Thanks for subscribing! - A confirmation email has been sent to ash@loremcompany.com. + 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. + Challenge by Frontend Mentor. Coded by Your Name Here.
+ \ No newline at end of file From 18580f5d3c581d9bd87488d850c0877a224d8693 Mon Sep 17 00:00:00 2001 From: davnor10 <66805043+davnor10@users.noreply.github.com> Date: Fri, 21 Nov 2025 13:44:12 +0200 Subject: [PATCH 2/3] task1: 1. normal state (pc only for now); 2. successful state; 3. navigation based on a valid email regex; 4. error on bad regex email; 5. bonus: star wall animation (made using AI) --- .../assets/images/star.svg | 1 + .../index.html | 132 ++++++++++----- .../script.js | 59 +++++++ .../style-guide.md | 2 +- .../styles.css | 158 ++++++++++++++++++ 5 files changed, 305 insertions(+), 47 deletions(-) create mode 100644 newsletter-sign-up-with-success-message-main/assets/images/star.svg create mode 100644 newsletter-sign-up-with-success-message-main/script.js create mode 100644 newsletter-sign-up-with-success-message-main/styles.css diff --git a/newsletter-sign-up-with-success-message-main/assets/images/star.svg b/newsletter-sign-up-with-success-message-main/assets/images/star.svg new file mode 100644 index 0000000..4c213e8 --- /dev/null +++ b/newsletter-sign-up-with-success-message-main/assets/images/star.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/newsletter-sign-up-with-success-message-main/index.html b/newsletter-sign-up-with-success-message-main/index.html index 69600be..ae9d6d0 100644 --- a/newsletter-sign-up-with-success-message-main/index.html +++ b/newsletter-sign-up-with-success-message-main/index.html @@ -4,61 +4,101 @@ - - + - + Frontend Mentor | Newsletter sign-up form with success message - - - +
+
+

Stay updated!

+

Join 60,000+ product managers receiving monthly updates on:

+
icon-listProduct discovery + and building what matters
+
icon-listMeasuring to + ensure updates are a success
+
icon-listAnd much more! +
+ + + +
+ +
+
+ + + + + + + + + + +
+
+ + + + + + + + + + +
+
+ + + + + + + + + + +
+
+ + Sign up illustration +
- - - 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 - - +
+ +

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. +

+ +
-
- Challenge by Frontend Mentor. - Coded by Your Name Here. +
+ Challenge by a Mysterious Figure... I wasn't assigned a mentor yet
+ Coded by David Norman.
+ + \ 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..141855b --- /dev/null +++ b/newsletter-sign-up-with-success-message-main/script.js @@ -0,0 +1,59 @@ +const mainContainer = document.querySelector(".main-container"); +const successState = document.querySelector(".success-state"); +const subscribeBtn = document.querySelector(".subscribe-button"); +const dismissBtn = document.querySelector(".dismiss-button"); +const emailInpt = document.querySelector(".email-input"); +const emailErrorMessage = document.querySelector(".email-error-message"); +const starColumn1 = document.querySelector("#star-column-1"); +const starsColumn1 = starColumn1.querySelectorAll(".child"); +const starColumn2 = document.querySelector("#star-column-2"); +const starsColumn2 = starColumn2.querySelectorAll(".child"); +const starColumn3 = document.querySelector("#star-column-3"); +const starsColumn3 = starColumn3.querySelectorAll(".child"); + +function validateEmail() { + let inputMail = emailInpt.value; + const regex = new RegExp("^\\S+@\\S+\\.\\S+$"); + if (regex.test(inputMail)) { + mainContainer.style.display = "none"; + successState.style.display = "flex"; + emailErrorMessage.style.display = "none"; + emailInpt.style.color = "black"; + emailInpt.style.borderColor = "black"; + } + else { + emailErrorMessage.style.display = "inline"; + emailInpt.style.color = "hsl(4, 100%, 67%)"; + emailInpt.style.borderColor = "hsl(4, 100%, 67%)"; + } +}; + +emailInpt.addEventListener("keydown", (e) => { + if (e.key === "Enter") { + validateEmail(); + } +}); +subscribeBtn.addEventListener("click", validateEmail); + + + +subscribeBtn.addEventListener("mouseover", () => { + subscribeBtn.style.backgroundImage = "linear-gradient(to right, hsla(313, 97%, 38%, 1.00), hsla(334, 85%, 26%, 1.00), hsla(313, 97%, 38%, 1.00))"; +}); + +subscribeBtn.addEventListener("mouseleave", () => { + subscribeBtn.style.backgroundImage = "linear-gradient(to right, hsl(4, 100%, 67%), hsl(46, 91%, 54%), hsl(4, 100%, 67%))"; +}); + +dismissBtn.addEventListener("click", () => { + successState.style.display = "none"; + mainContainer.style.display = "flex"; +}); + +dismissBtn.addEventListener("mouseover", () => { + dismissBtn.style.backgroundImage = "linear-gradient(to right, hsla(313, 97%, 38%, 1.00), hsla(334, 85%, 26%, 1.00), hsla(313, 97%, 38%, 1.00))"; +}); + +dismissBtn.addEventListener("mouseleave", () => { + dismissBtn.style.backgroundImage = "linear-gradient(to right, hsl(4, 100%, 67%), hsl(46, 91%, 54%), hsl(4, 100%, 67%))"; +}); diff --git a/newsletter-sign-up-with-success-message-main/style-guide.md b/newsletter-sign-up-with-success-message-main/style-guide.md index 822e21d..9d6298e 100644 --- a/newsletter-sign-up-with-success-message-main/style-guide.md +++ b/newsletter-sign-up-with-success-message-main/style-guide.md @@ -18,7 +18,7 @@ The designs were created to the following widths: ### Neutral - Blue 800: hsl(234, 29%, 20%) -- Blue 700: hsl(235, 18%, 26%) +- Blue 700: hsla(235, 18%, 26%, 1.00) - Grey: hsl(0, 0%,58%) - White: hsl(0, 0%, 100%) diff --git a/newsletter-sign-up-with-success-message-main/styles.css b/newsletter-sign-up-with-success-message-main/styles.css new file mode 100644 index 0000000..c6b4be9 --- /dev/null +++ b/newsletter-sign-up-with-success-message-main/styles.css @@ -0,0 +1,158 @@ +body { + font-family: 'Roboto-Regular', sans-serif; + background-color: hsla(235, 18%, 26%, 1.00); + height: 95vh; + width: 95vw; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.main-container, +.success-state { + justify-content: center; + align-content: center; +} + +.main-container { + display: flex; + flex-direction: row; + height: 60vh; + width: 60vw; + background-color: hsl(0, 0%, 100%); + border-radius: 1.5rem; + padding: 2rem; +} + +.content-section { + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.illustration { + width: auto; + height: 100%; + object-fit: scale-down; + margin-left: auto; +} + +.bullet-icon { + margin-right: 1rem; +} + +.bullet { + display: flex; + align-items: center; +} + +.email-section { + display: flex; + flex-direction: column; +} + +.email-title { + font-weight: bold; + margin-bottom: 0.5rem; + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.email-input { + height: 3rem; + border-radius: 0.5rem; + text-align: center; + color: black; + border: 1px solid black; + transition: all 0.3s ease; +} + +h2 { + font-size: small; +} + +.email-error-message { + display: none; + color:hsl(4, 100%, 67%); +} + +.subscribe-button { + height: 3rem; + border-radius: 0.5rem; + background-image: linear-gradient(to right, hsl(4, 100%, 67%), hsl(46, 91%, 54%), hsl(4, 100%, 67%)); + color: white; + cursor: pointer; +} + +.success-state { + display: none; + flex-direction: column; + height: 50vh; + width: 30vw; + background-color: hsl(0, 0%, 100%); + border-radius: 1.5rem; + padding: 2rem; + justify-content: space-around; +} + +.success-symbol { + height: 15%; + width: 15%; +} + +.dismiss-button { + height: 3rem; + border-radius: 0.5rem; + background-image: linear-gradient(to right, hsl(4, 100%, 67%), hsl(46, 91%, 54%), hsl(4, 100%, 67%)); + color: white; + cursor:pointer; +} + +.credits { + position: absolute; + bottom: 1.5rem; + color: white; + text-align: center; +} + +/* Only this animation was done with AI! */ + +.star-wall { + display: flex; + flex-direction: row; + justify-content: space-around; + width: 10rem; + overflow: hidden; +} + + +.star-column { + display: flex; + flex-direction: column; + justify-content: space-between; + overflow: hidden; + width: 2rem; + gap: 1rem; +} + +#star-column-1 .star, +#star-column-3 .star { + transform: translateY(-50px); + animation: scroll-down 8s linear infinite; +} + +@keyframes scroll-down { + 0% { transform: translateY(-100%); } + 100% { transform: translateY(0%); } +} + +#star-column-2 .star { + animation: scroll-up 8s linear infinite; +} + +@keyframes scroll-up { + 0% { transform: translateY(0%); } + 100% { transform: translateY(-100%); } +} \ No newline at end of file From 5f5723591968521f7919a380dc559ac147517bf3 Mon Sep 17 00:00:00 2001 From: davnor10 <66805043+davnor10@users.noreply.github.com> Date: Fri, 21 Nov 2025 13:57:15 +0200 Subject: [PATCH 3/3] small adjustment: input background color changes now --- newsletter-sign-up-with-success-message-main/script.js | 2 ++ newsletter-sign-up-with-success-message-main/styles.css | 1 + 2 files changed, 3 insertions(+) diff --git a/newsletter-sign-up-with-success-message-main/script.js b/newsletter-sign-up-with-success-message-main/script.js index 141855b..3b0b091 100644 --- a/newsletter-sign-up-with-success-message-main/script.js +++ b/newsletter-sign-up-with-success-message-main/script.js @@ -20,11 +20,13 @@ function validateEmail() { emailErrorMessage.style.display = "none"; emailInpt.style.color = "black"; emailInpt.style.borderColor = "black"; + emailInpt.style.backgroundColor = "wheat"; } else { emailErrorMessage.style.display = "inline"; emailInpt.style.color = "hsl(4, 100%, 67%)"; emailInpt.style.borderColor = "hsl(4, 100%, 67%)"; + emailInpt.style.backgroundColor = "hsla(4, 66%, 91%, 1.00)"; } }; diff --git a/newsletter-sign-up-with-success-message-main/styles.css b/newsletter-sign-up-with-success-message-main/styles.css index c6b4be9..fe5388f 100644 --- a/newsletter-sign-up-with-success-message-main/styles.css +++ b/newsletter-sign-up-with-success-message-main/styles.css @@ -67,6 +67,7 @@ body { color: black; border: 1px solid black; transition: all 0.3s ease; + background-color: wheat; } h2 {