Skip to content

[IMPROVE] wip #28

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
GalM111 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

[IMPROVE] wip #28

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
69 changes: 42 additions & 27 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,67 @@
<!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">
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="./script.js"></script>
<!-- displays site properly based on user's device -->
Copy link
Member

@Tamir198 Tamir198 Dec 2, 2025

Choose a reason for hiding this comment

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

I would remove this comment


<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>
</head>

<body>

<!-- Sign-up form start -->
<div class="wholeForm">
Copy link
Member

@Tamir198 Tamir198 Dec 2, 2025

Choose a reason for hiding this comment

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

just a suggestion - formContainer

<form class="mainForm" action="">

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!
<h1> Stay updated!</h1>

Email address
email@company.com

Subscribe to monthly newsletter

<!-- Sign-up form end -->
<h5> Join 60,000+ product managers receiving monthly updates on:</h5>

<!-- Success message start -->
<ul>
<li>
<div class="itemList">
<img src="./assets/images/icon-list.svg">
<p> Product discovery and building what matters</p>
</div>
</li>
<li>
<div class="itemList">
<img src="./assets/images/icon-list.svg">
<p> Measuring to ensure updates are a success</p>
</div>
</li>
<li>
<div class="itemList">
<img src="./assets/images/icon-list.svg">
<p> And much more!</p>
</div>
</li>
</ul>
<div class="emailBox">
<h6 class="emailTitle"> Email address </h6>
<input id="inputData" placeholder="email@company.com" type="text" id="fname" name="fname"><br><br>
Copy link
Member

@Tamir198 Tamir198 Dec 2, 2025

Choose a reason for hiding this comment

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

Why do you need id? could you use class instead?

</div>
<button type="button" class="buttonClass" onclick="onSubClick()">
Copy link
Member

@Tamir198 Tamir198 Dec 2, 2025

Choose a reason for hiding this comment

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

the class is very general, can you try to find more specific name?

Subscribe to monthly newsletter
</button>

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

<!-- 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>.
</form>
<img src="./assets/images/illustration-sign-up-desktop.svg" alt="">
</div>
</body>

</html>
34 changes: 34 additions & 0 deletions newsletter-sign-up-with-success-message-main/msgPage.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<!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="style.css">
<script src="./msgPage.js" defer></script>
<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>
</head>

<body>
<div class="successForm">

<form class="mainForm" action="">
<img src="./assets/images/icon-success.svg">
<h1>
Thanks for subscribing! <span id="username"></span>
Copy link
Member

@Tamir198 Tamir198 Dec 2, 2025

Choose a reason for hiding this comment

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

Same here about the id

</h1>
<h5>
A confirmation email has been sent to
<span id="currentValue"></span>.<br>
Please open it and click the button inside to confirm your subscription.
</h5>

<button type="button" class="disButtonClass" onclick="onDislick()">
Copy link
Member

@Tamir198 Tamir198 Dec 2, 2025

Choose a reason for hiding this comment

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

you dont have to add the class part

Dismiss message
</button>
</form>
</div>
</body>

</html>
6 changes: 6 additions & 0 deletions newsletter-sign-up-with-success-message-main/msgPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
let email = localStorage.getItem("userEmail");
Copy link
Member

@Tamir198 Tamir198 Dec 2, 2025

Choose a reason for hiding this comment

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

You could extract everything related to local storage into a service and expose all of the methods from that service

document.getElementById("currentValue").textContent = email;
Copy link
Member

@Tamir198 Tamir198 Dec 2, 2025

Choose a reason for hiding this comment

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

You can add null check for the element


function onDislick() {
window.location.href = "./index.html";
}
5 changes: 5 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,5 @@
function onSubClick() {
const email = document.getElementById('inputData').value;
localStorage.setItem("userEmail", email);
window.location.href = "./msgPage.html";
Copy link
Member

@Tamir198 Tamir198 Dec 2, 2025

Choose a reason for hiding this comment

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

hardcoded strings should come from constants file

}
136 changes: 136 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,136 @@
body {
background-color: hsl(235, 18%, 26%);
Copy link
Member

@Tamir198 Tamir198 Dec 2, 2025

Choose a reason for hiding this comment

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

colors should come from css variables

font-family: 'Roboto', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
}

.mainForm {
display: flex;
flex-direction: column;
align-items: flex-start;
align-content: center;
background-color: transparent;
border-radius: 0;
padding: 32px 40px;
}

.wholeForm {
display: flex;
flex-direction: row;
background-color: #ffffff;
border-radius: 12px;
overflow: hidden;
}


.wholeForm img {
display: block;
}

.successForm {
display: flex;
flex-direction: row;
background-color: #ffffff;
border-radius: 12px;
overflow: hidden;
}

.itemList {
display: flex;
flex-direction: row;
gap: 5%;
}

ul {
list-style-type: none;
padding-left: 0;
margin: 0;
}

h6 {
margin: 0;
}

.emailBox {
width: 100%;
max-width: 380px;
}

.emailTitle {
font-size: 14px;
font-weight: 600;
display: block;
margin-bottom: 6px;
}

.emailBox input {
width: 100%;
padding: 14px 18px;
font-size: 16px;

border: 1px solid #d5d5d5;
border-radius: 12px;
outline: none;

transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.emailBox input:focus {
border-color: #a06cff;
box-shadow: 0 0 0 4px rgba(160, 108, 255, 0.15);
}

.buttonClass {
width: 100%;
max-width: 380px;
margin-top: 8px;

display: inline-block;
text-align: center;
white-space: nowrap;
padding: 18px 0;
border: none;
border-radius: 12px;
background: linear-gradient(90deg, #ff5f7b, #ff9152);
color: #fff;
font-size: 18px;
font-weight: 600;
cursor: pointer;
box-shadow: 0 20px 30px rgba(255, 120, 120, 0.35);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.buttonClass:hover {
transform: translateY(-2px);
box-shadow: 0 24px 40px rgba(255, 120, 120, 0.6);
}


.disButtonClass {
width: 100%;
max-width: 380px;
margin-top: 8px;

display: inline-block;
text-align: center;
white-space: nowrap;
padding: 18px 0;
border: none;
border-radius: 12px;
background: linear-gradient(90deg, #242840);
color: #fff;
font-size: 18px;
font-weight: 600;
cursor: pointer;
box-shadow: 0 20px 30px rgba(120, 181, 255, 0.35);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.disButtonClass:hover {
transform: translateY(-2px);
box-shadow: 0 24px 40px rgba(120, 185, 255, 0.6);
}