CS Dev Club 1st task - David Norman #15
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,52 +1,104 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <link rel="stylesheet" href="styles.css"> | ||
| <link rel="icon" type="image/png" sizes="32x32" | ||
| href="./assets/images/favicon-32x32.png"> | ||
| <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" | ||
| rel="stylesheet"> | ||
| <title>Frontend Mentor | Newsletter sign-up form with success message</title> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div class="main-container"> | ||
|
|
||
| <div class="content-section"> | ||
| <h1>Stay updated!</h1> | ||
| <p>Join 60,000+ product managers receiving monthly updates on:</p> | ||
| <div class="bullet"><img class="bullet-icon" | ||
| src="./assets/images/icon-list.svg" alt="icon-list">Product discovery | ||
| and building what matters</div> | ||
| <div class="bullet"><img class="bullet-icon" | ||
| src="./assets/images/icon-list.svg" alt="icon-list">Measuring to | ||
| ensure updates are a success</div> | ||
| <div class="bullet"><img class="bullet-icon" | ||
| src="./assets/images/icon-list.svg" alt="icon-list">And much more! | ||
| </div> | ||
|
|
||
| <div class="email-section"> | ||
| <div class="email-title"> | ||
| <h2>Email address</h2> | ||
| <h2 class="email-error-message">Invalid mail 😿</h2> | ||
| </div> | ||
| <input type="text" class="email-input" placeholder="email@company.com"> | ||
| </div> | ||
| <button type="submit" class="subscribe-button">Subscribe to monthly | ||
| newsletter</button> | ||
| </div> | ||
|
|
||
| <div class="star-wall"> | ||
| <div class="star-column" id="star-column-1"> | ||
|
Member
There was a problem hiding this comment. Why do you need both id and class |
||
| <img class="star" src="./assets/images/star.svg"> | ||
| <img class="star" src="./assets/images/star.svg"> | ||
| <img class="star" src="./assets/images/star.svg"> | ||
| <img class="star" src="./assets/images/star.svg"> | ||
| <img class="star" src="./assets/images/star.svg"> | ||
| <img class="star" src="./assets/images/star.svg"> | ||
| <img class="star" src="./assets/images/star.svg"> | ||
| <img class="star" src="./assets/images/star.svg"> | ||
| <img class="star" src="./assets/images/star.svg"> | ||
| <img class="star" src="./assets/images/star.svg"> | ||
| </div> | ||
| <div class="star-column" id="star-column-2"> | ||
| <img class="star" src="./assets/images/star.svg"> | ||
| <img class="star" src="./assets/images/star.svg"> | ||
| <img class="star" src="./assets/images/star.svg"> | ||
| <img class="star" src="./assets/images/star.svg"> | ||
| <img class="star" src="./assets/images/star.svg"> | ||
| <img class="star" src="./assets/images/star.svg"> | ||
| <img class="star" src="./assets/images/star.svg"> | ||
| <img class="star" src="./assets/images/star.svg"> | ||
| <img class="star" src="./assets/images/star.svg"> | ||
| <img class="star" src="./assets/images/star.svg"> | ||
| </div> | ||
| <div class="star-column" id="star-column-3"> | ||
| <img class="star" src="./assets/images/star.svg"> | ||
| <img class="star" src="./assets/images/star.svg"> | ||
| <img class="star" src="./assets/images/star.svg"> | ||
| <img class="star" src="./assets/images/star.svg"> | ||
| <img class="star" src="./assets/images/star.svg"> | ||
| <img class="star" src="./assets/images/star.svg"> | ||
| <img class="star" src="./assets/images/star.svg"> | ||
| <img class="star" src="./assets/images/star.svg"> | ||
| <img class="star" src="./assets/images/star.svg"> | ||
| <img class="star" src="./assets/images/star.svg"> | ||
| </div> | ||
| </div> | ||
|
|
||
| <img class="illustration" | ||
| src="./assets/images/illustration-sign-up-desktop.svg" | ||
| alt="Sign up illustration"> | ||
|
|
||
| </div> | ||
|
|
||
| <div class="success-state"> | ||
| <img class="success-symbol" src="./assets/images/icon-success.svg"> | ||
| <h1>Thanks for subscribing!</h1> | ||
| <p> | ||
| A confirmation email has | ||
| been sent to <b>ash@loremcompany.com</b>. Please open it and click the | ||
| button inside to confirm your subscription. | ||
| </p> | ||
| <button class="dismiss-button">Dismiss message</button> | ||
| </div> | ||
|
|
||
| <div class="credits"> | ||
| Challenge by a Mysterious Figure... I wasn't assigned a mentor yet<br> | ||
| Coded by David Norman. | ||
| </div> | ||
|
|
||
| <script src="script.js"></script> | ||
| </body> | ||
|
|
||
| </html> | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| 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"); | ||
|
There was a problem hiding this comment. nice use of const and let, when you have the chance read about the difference, and why we never use "var" |
||
|
|
||
| function validateEmail() { | ||
| let inputMail = emailInpt.value; | ||
|
Member
There was a problem hiding this comment. I would check that the value is actually not null |
||
| const regex = new RegExp("^\\S+@\\S+\\.\\S+$"); | ||
| if (regex.test(inputMail)) { | ||
| mainContainer.style.display = "none"; | ||
|
Member
There was a problem hiding this comment. Its not recommended to style elements like this, change he css classes and let the css classes do the work for you |
||
| successState.style.display = "flex"; | ||
| emailErrorMessage.style.display = "none"; | ||
| emailInpt.style.color = "black"; | ||
| emailInpt.style.borderColor = "black"; | ||
| emailInpt.style.backgroundColor = "wheat"; | ||
|
Member
There was a problem hiding this comment. If you will add |
||
| } | ||
| 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)"; | ||
| } | ||
| }; | ||
|
|
||
| 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))"; | ||
|
Member
There was a problem hiding this comment. Same comment in here about styling via js, also save those hardcoded strings into variables because you have repeating yourself |
||
| }); | ||
|
|
||
| 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", () => { | ||
|
There was a problem hiding this comment. This is a lambda function, worth reading up on how and when to use them |
||
| dismissBtn.style.backgroundImage = "linear-gradient(to right, hsl(4, 100%, 67%), hsl(46, 91%, 54%), hsl(4, 100%, 67%))"; | ||
| }); | ||
|
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
There was a problem hiding this comment. General note: I don't see a @media (max-width: 768px) {} is it responsive for mobile ? |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,159 @@ | ||
| body { | ||
| font-family: 'Roboto-Regular', sans-serif; | ||
| background-color: hsla(235, 18%, 26%, 1.00); | ||
| height: 95vh; | ||
|
There was a problem hiding this comment. why not 100vh (Full viewport height) |
||
| 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; | ||
| background-color: wheat; | ||
| } | ||
|
|
||
| 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%); | ||
|
Member
There was a problem hiding this comment. All of your colors in here should come from the css vraibles |
||
| 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! */ | ||
|
Member
There was a problem hiding this comment. Great but this comment is not needed, its ok to use ai and if the code is written in a good way you dont acutally need to write comment about it |
||
|
|
||
| .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 { | ||
|
Member
There was a problem hiding this comment. Will it not work with only |
||
| 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%); } | ||
| } | ||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Readable code, nice structure. good work!