Skip to content

elyan/newsletter #18

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
elyanyemini wants to merge 1 commit into
base: main
Choose a base branch
from
Open

elyan/newsletter #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
82 changes: 53 additions & 29 deletions newsletter-sign-up-with-success-message-main/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,52 +1,76 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- displays site properly based on user's device. :O -->

<!-- This is for the requested font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
Copy link

@R0EYK R0EYK Nov 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These days its considered best practice to import the fonts and use them in your css , you can do it really easily

@font-face {
    font-family:Roboto ;
    src: url(./assets/fonts/Roboto-Regular.ttf);
}

.body { 
    font-family: 'Roboto';
}

This would apply that font to all elements in your body and it looks cleaner

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">

<link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon-32x32.png">

<title>Frontend Mentor | Newsletter sign-up form with success message</title>

<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
<style>
.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }
</style>
<link rel="stylesheet" href="style.css">
</head>
<body>

<!-- Sign-up form start -->

Stay updated!
<body>
<div class="container">
<div class="blueContainer">
<div class="mainbox">

Join 60,000+ product managers receiving monthly updates on:
<div class="text-side">
<div class="text">

Product discovery and building what matters
Measuring to ensure updates are a success
And much more!
<!-- Sign-up form start -->

Email address
email@company.com
<h1>Stay updated!</h1>

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

<!-- Sign-up form end -->
<div class="bullet-list">
Copy link

@R0EYK R0EYK Nov 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

just my OCD but in some codebases or companys, they will be hard with naming conventions,
so if you started naming your classes with camel case convention (someVariable), try to stick with it and do not have some-variable

<div class="bullet">
Product discovery and building what matters
</div>
<div class="bullet">Measuring to ensure updates are a success</div>
<div class="bullet">And much more!</div>
</div>

<!-- Success message start -->
<div class="emailPart">
<form action="" method="post" target="_self">
Copy link

@R0EYK R0EYK Nov 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the <form> action , method and target are meant to help us send the form data to some API endpoint which we are not trying to do now, so we can remove these to avoid the form sending weird api requests currently

<h5>Email address:</h5>
<input type="email" placeholder="email@company.com" class="emailBox" name="email" id="email" required><br><br>
Copy link

@R0EYK R0EYK Nov 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good job on using these input attributes, many HTML elements gives us attributes which we normally would have to use JavaScript to get, but being aware of them can save us coding time


Thanks for subscribing!
<button type="submit" class="submitButton" id="submitButton">
Subscribe to monthly newsletter
</button>
</form>
<!-- Sign-up form end -->
</div>

A confirmation email has been sent to ash@loremcompany.com.
Please open it and click the button inside to confirm your subscription.
</div>
</div>

Dismiss message
<div class="pic-side">
<img src="assets/images/illustration-sign-up-desktop.svg" alt="side photo">
</div>

<!-- Success message end -->

<div class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="#">Your Name Here</a>.
</div>
<div class="successContainer hidden">
<div class="successMsg">
<h1>Thanks for subscribing!</h1>
A confirmation email has been sent to <strong id="confirmedEmail"></strong>.
Please open it and click the button inside to confirm your subscription.<br><br><br>
<button type="submit" class="submitButton" id="dismissButton">Dismiss message</button>
</div>
</div>

</div>
<script src="script.js"></script>
</body>

</html>
34 changes: 34 additions & 0 deletions newsletter-sign-up-with-success-message-main/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Copy link

@R0EYK R0EYK Nov 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do we need to validate ourselves here? We are the developers so if we have an element with an id called "email"
we know this would exist so no reason to check for it

}

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');
});
150 changes: 150 additions & 0 deletions newsletter-sign-up-with-success-message-main/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Copy link

@R0EYK R0EYK Nov 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we actually need to imporant here ?

}

.mainbox{
display: flex;
margin: auto;
height: 65%;
width: 65%;
max-width: 700px;
background-color: white;
border-radius: 3%;
overflow: hidden;
Copy link

@R0EYK R0EYK Nov 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Border radius and paddings are usually given with some other measurment value instead of percentages, try using rem,
this would give you much more consistent layout

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%);
Copy link

@R0EYK R0EYK Nov 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Consider using CSS variables for these colors, it will make the code easier to understand and you will have a single source of truth for your collor pallete

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%;
}