Skip to content

Add files via upload #1

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

Add files via upload #1

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
114 changes: 65 additions & 49 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,52 +1,68 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Form Styling</title>
<link
href="https://fonts.googleapis.com/css?family=Raleway"
rel="stylesheet"
/>
</head>
<body>
<div id="container">
<div class="form-wrap">
<h1>Sign Up</h1>
<p>It's free and only takes a minute</p>
<form>
<div class="form-group">
<label for="first-name">First Name</label>
<input type="text" name="firstName" id="first-name" />
</div>
<div class="form-group">
<label for="last-name">Last Name</label>
<input type="text" name="lastName" id="last-name" />
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" name="email" id="email" />
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" name="password" id="password" />
</div>
<div class="form-group">
<label for="password2">Confirm Password</label>
<input type="password" name="pasword2" id="password2" />
</div>
<button type="submit" class="btn">Sign Up</button>
<p class="bottom-text">
By clicking the Sign Up button, you agree to our
<a href="#">Terms & Conditions</a> and
<a href="#">Privacy Policy</a>
</p>
</form>
</div>
<footer>
<p>Already have an account? <a href="#">Login Here</a></p>
</footer>

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Form Styling</title>
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet" />
<link href="style.css" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/emailjs-com@3/dist/email.min.js"></script>
Copy link
Contributor Author

@terrataylor terrataylor Nov 19, 2021

Choose a reason for hiding this comment

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

Make sure you reference your javascript right before your closing body tag

<script type="text/javascript">
(function () {
emailjs.init("user_GEzG5oxHXJrBooA8X11cd");
})();
</script>
</head>

<body>
<div id="container">
<div class="form-wrap">
<h1>CREATE AN ACCOUNT</h1>
<p>It's free and only takes a minute</p>
<form id="form" autocomplete="off">
<div class="form-group">
<label for="first-name">First Name</label>
<input type="text" name="firstName" id="first-name" required />
<i class="fas fa-signature"></i>
</div>
<div class="form-group">
<label for="last-name">Last Name</label>
<input type="text" name="lastName" id="last-name" required />
<i class="fas fa-signature"></i>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" name="email" id="email" required />
<i class="far fa-envelope"></i>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" name="password" id="password" required />
<i class="fas fa-key"></i>
</div>
<div class="form-group">
<label for="password2">Confirm Password</label>
<input type="password" name="password2" id="password2" required />
<i class="fas fa-key"></i>
</div>
<button type="submit" class="btn">Sign Up</button>
<p class="bottom-text">
By clicking the Sign Up button, you agree to our
<a href="#">Terms & Conditions</a> and
<a href="#">Privacy Policy</a>
</p>
</form>
</div>
</body>
</html>
<footer>
<p>Already have an account? <a href="#">Login Here</a></p>
</footer>
<div class="msg" id="errorMsg"></div>
<div class="msg" id="successMsg"></div>
</div>
<script src="sendEmail.js"></script>
</body>

</html>
43 changes: 38 additions & 5 deletions sendEmail.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,39 @@
// Your code to validate your form and send the email will go here!
// All Fields are required for submission
// Make sure the Password and Confirm Password Match

// Let the user know if the passwords to not match
// Also let the user know when the email has been successfully sent
document.querySelector('#form').addEventListener('submit', e => {

// Prevent default refresh
e.preventDefault()

// Initiate variables
let errorMsg
let formData = new FormData(e.target)
let pass = formData.get('password')
let pass2 = formData.get('password2')
let errorText = document.querySelector('#errorMsg')
let successText = document.querySelector('#successMsg')

// Check password
if(pass.length < 6) errorMsg = "The password must be at least 6 characters long"
else if(pass != pass2) errorMsg = "The passwords don't match"
else if(!/\d/.test(pass)) errorMsg = "The password must have 1 number"

if(errorMsg != undefined) {
successText.style.display = 'none'
errorText.innerText = errorMsg
errorText.style.display = 'block'
}
else { // Success - send email
errorText.style.display = 'none'
emailjs.send("service_iike7xf","template_5m2iexe",{
firstName: formData.get('firstName'),
lastName: formData.get('lastName'),
email: formData.get('email')
}).then(() => {
form.reset()
successText.innerText = "Success! Email sent."
successText.style.display = 'block'
}, (err) => {
console.error(JSON.stringify(err))
Copy link
Contributor Author

@terrataylor terrataylor Nov 19, 2021

Choose a reason for hiding this comment

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

You should also let the user know if there's been an error

})
}
})
128 changes: 87 additions & 41 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,88 +1,134 @@
@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,600');

:root {
--poppins: 'Poppins', sans-serif;
--super-light: #F4F6F7;
--blue: #169ad3;
--grey-medium: #727476;
--grey-dark: #404040;
--background-image: url(https://images.unsplash.com/photo-1524758631624-e2822e304c36?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80);
}


* {
/*
-May want to add "border-box for "box-sizing so padding does not affect width
-Reset margin and padding
*/
margin: 0;
font-family: var(--poppins);
font-weight: 400;
}

body {
/*
-Background color is #344a72
*/
background: var(--background-image) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color: var(--grey-dark);
}

h1 {
margin: 10px;
}

a {
/*
Underlined links are ugly :)
*/
text-decoration: none;
color: var(--blue)
}


#container {
/*
-Remember, margin: auto on left and right will center a block element
-I would also set a "max-width" for responsiveness
-May want to add some padding
*/
width: 100%;
max-width: 600px;
min-width: 400px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: var(--super-light);
text-align: center;
padding: 20px;
opacity: .87;
}

.form-wrap {
/*
This is the white area around the form and heading, etc
*/

}

form { margin-top: 25px}

.form-wrap h1,
.form-wrap p {
/*
May want to center these
*/
margin: 10px 0 10px 0;
}

.form-wrap .form-group {
/*
Each label, input is wrapped in .form-group
*/
margin: 5px auto;
}

.form-wrap .form-group:hover i {
color: var(--blue);
}

.form-wrap .form-group i {
color: var(--grey-medium);
display: inline-block;
}

.form-wrap .form-group label {
/*
Label should be turned into a block element
*/
display: inline-block;
text-align: right;
width: 200px;
margin: 0 15px 0 -55px;
}

.form-wrap .form-group input {
/*
Inputs should reach accross the .form-wrap 100% and have some padding
*/
display: inline-block;
width: 40%;
min-width: 250px;
border: none;
padding: 5px;
margin: 1px 5px;
}

.form-wrap button {
/*
Button should wrap accross 100% and display as block
Background color for button is #49c1a2
*/
background: var(--blue);
color: white;
border: none;
padding: 10px 20px;
margin: 25px 10px 15px 10px;
transition: .2s;
border: 2px solid var(--blue);
}

.form-wrap button:hover {
/*
Hover background color for button is #37a08e
*/
background: var(--super-light);
border: 2px solid var(--blue);
color: var(--grey-medium);
}

.form-wrap .bottom-text {
/*
Bottom text is smaller
*/
margin: 15px;
}

footer {
/*
Should be centered
*/
margin: 15px;
}

footer a {
/*
Footer link color is #49c1a2
*/
}
}

.msg {
padding: 10px;
margin: 20px 15px;
border: 1px solid grey;
display: none;
width: auto;
}

#errorMsg { color: red; }
#successMsg { color: green; }