Skip to content

Contact-page #9

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 4 commits into
base: master
Choose a base branch
from
Open

Contact-page #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
884f11f
Contact-page
mayramsay Nov 15, 2019
699d8fa
change pagpe to page
KatonaCsaba Nov 17, 2019
86f4519
Updated HTML and CSS files for contact-page
mayramsay Nov 20, 2019
8151b43
2nd updated HTML and CSS file for contact page
mayramsay Nov 25, 2019
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
95 changes: 95 additions & 0 deletions contact-page.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
body {
font-family: "Varela", sans-serif;
font-size: 1rem;
text-align: center;
}

.nav-box {
padding: 1em 2em;
width: 100%;
justify-content: center;
display: flex;
}

.navlist li {
display: inline;
list-style-type: none;
letter-spacing: 0.15em;
}

li a {
padding: 10px;
text-decoration: none;
text-transform: uppercase;
font-size: large;
color: black;
}

.banner-box {
display: flex;
height: 75vh;
position: relative;
background-image: url(http://cliquetechmedia.com/wp-content/uploads/2017/12/contact-us-background.jpg);
background-size: cover;
background-repeat: no-repeat;
}

.title-msg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}

h1 {
font-size: xx-large;
font-weight: bold;
text-transform: uppercase;
}

h2 {
font-size: x-large;
text-transform: capitalize;
}

.form-box {
padding: 1rem 2rem;
}

.error-msg {
margin: 10px;
padding: 10px;
background: red;
}

.contact-info {
display: grid;
grid-template-columns: 150px 300px 150px 300px;
grid-gap: 25px 20px;
}

.contact-info label {
text-align: left;
}

.contact-info textarea {
width: 100%;
padding: 30px;
}

.button {
background-color: #616ecc;
color: white;
padding: 1rem;
border-radius: 5px;
font-size: 1.2rem;
text-transform: uppercase;
cursor: pointer;
letter-spacing: 1px;
transition: background 0.2s ease-in-out;
}

.button:hover {
background-color: #661166;
}
83 changes: 83 additions & 0 deletions contact-page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8" />
<html lang="en-US">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Contact Page:</title>
<link href="https://fonts.googleapis.com/css?family=Varela&display=swap" rel="stylesheet" />
<link href="https://unpkg.com/sanitize.css" rel="stylesheet" />
<link href="https://unpkg.com/sanitize.css/typography.css" rel="stylesheet" />
<link href="https://unpkg.com/sanitize.css/forms.css" rel="stylesheet" />
<link rel="stylesheet" href="contact-page.css" />
</head>

<body>
<!--1st JS function-->
<nav>
<div class="nav-box">
<div id="nav-logo">
<img src="" alt="" />
<!--insert logo img here-->
</div>
<div class="navbar">
<ul class="navlist">
<li id="link-home-pagpe"><a href="#home-page">Home</a></li>
<li id="link-about-page"><a href="#about-page">About</a></li>
<li id="link-portfolio-page">
<a href="#portfolio-page">Portfolios</a>
</li>
<li id="link-blog-page"><a href="#blog-page">Blog</a></li>
<li id="link-contact-page"><a href="#contact-page">Contact</a></li>
</ul>
</div>
</div>
<!--this is the nav bar that will be identical across each page -->
</nav>

<div class="banner-box">
<div class="title-msg">
<h1>Contact Us</h1>
<h2>We'd love to hear from you. <br />please let us know what do you think of this website.</h2>
</div>
</div>

<div class="form-box">
<p>Please leave your information in the form below, your contact information will not be shared to any third parties.</p>
<div class="error-msg">
Error messages will show here when validating the form and field
</div>
<form action="#" onsubmit="return validateForm()" id="myForm">
<!--2nd JS function-->
<div class="contact-info">
<label for="first-name">First Name:
<abbr title="This field is mandatory" aria-label="required">*</abbr></label>
<input type="text" id="first-name" class="contact-info" placeholder="First Name" required minlength="3" maxlength="100" />
<label for="last-name">Last Name:
<abbr title="This is mandatory" aria-label="required">*</abbr></label>
<input type="text" id="last-name" class="contact-info" placeholder="Last Name" required />
<label for="email">Email Address:
<abbr title="This is mandatory" aria-label="required">*</abbr></label>
<input type="email" id="email" class="contact-info" placeholder="[email protected]" required />
<label for="company-name">Company Name: </label>
<input type="text" id="company-name" class="contact-info" placeholder="Company Name" />
<label for="url">Company Url: </label>
<input type="url" id="url" class="contact-info" placeholder="www.example.com" />
<label for="phone">Phone Number:
<abbr title="This is mandatory" aria-label="required">*</abbr></label>
<input type="tel" id="phone" class="contact-info" placeholder="Format: 123-456-7890" required />
<label for="textarea">Leave Your Message:
<abbr title="This is mandatory" aria-label="required">*</abbr></label>
<textarea id="comment" class="contact-info" placeholder="How can we help?" required></textarea>
</div>
<button type="submit" class="button" id="submit-btn">Submit</button>
</form>
</div>
<footer>
<span class="footer">@2019, all rights reserved.</span>
</footer>
<script src="contact-page.js" type="text/javascript"></script>
</body>

</html>
116 changes: 116 additions & 0 deletions contact-page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
var firstName = document.getElementById("first-name").value;
Copy link
Member

Choose a reason for hiding this comment

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

Please look into encapsulation in JavaScript and how to avoid global namespace pollution. If you have more time, you could also check out design patterns like module pattern. It would be pretty useful.

var lastName = document.getElementById("last-name").value;
var email = document.getElementById("email").value;
var compName = document.getElementById("company-name").value;
var compUrl = document.getElementById("url").value;
var phone = document.getElementById("phone").value;
var message = document.getElementById("comment").value;
var errorText = document.getElementById("error-msg");
var text;

errorText.style.padding = "10px";

firstName.addEventListener("blur", fstNameVerify, true);
Copy link
Member

Choose a reason for hiding this comment

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

Don't be afraid of longer function names. I think verifyFirstName is way easier to read than fstNameVerify. Also, do you think you will have different rules for all these fields? Can't you just use a general validation for fields like this? First name, last name, company name and message all should have a common validation.

lastName.addEventListener("blur", lstNameVerify, true);
email.addEventListener("blur", emailVerify, true);
compName.addEventListener("blur", compNameVerify, true);
compUrl.addEventListener("blur", compUrlVerify, true);
phone.addEventListener("blur", phoneVerify, true);
message.addEventListener("blur", messageVerify, true);

function validateForm() {
if (firstName.value == "" || firstName.length < 3) {
Copy link
Member

Choose a reason for hiding this comment

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

You should always trim() the value so users can't submit spaces :) And prefer using "===" instead of "==" to avoid type conversion. I also shared my opinion on the length in the HTML.

firstName.style.border = "1px solid red";
Copy link
Member

Choose a reason for hiding this comment

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

Again, you should add an error class on the field and don't style it inside your JS file.

text = "Please Enter A Valid First Name";
errorText.innerHTML = text;
Copy link
Member

Choose a reason for hiding this comment

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

If there is no HTML, errorText.textContent would be better to insert text.

firstName.focus();
return false;
Copy link
Member

Choose a reason for hiding this comment

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

Do you want to stop validating if the first field is invalid? You should always check everything on submit and display every error, so users can correct them before they click on submit again.

} else {
return true;
Copy link
Member

Choose a reason for hiding this comment

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

If the firstname field is valid, the function will stop here with this return and nothing else will be executed.

}

if (lastName.value == "" || lastName.length < 3) {
lastName.style.border = "1px solid red";
text = "Please Enter A Valid Last Name";
errorText.innerHTML = text;
lastName.focus();
return false;
} else {
return true;
}
Comment on lines +32 to +40
Copy link
Member

Choose a reason for hiding this comment

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

Same as above.


function emailValidate(email) {
var atpos = email.indexOf("@");
var dotpos = email.lastIndexOf(".");
if (email.value == "" || atpos < 1 || (dotpos - atpos < 2)) {
email.style.border = "1px solid red";
text = "Please Enter A Valid Email Address Using The Example Format";
errorText.innerHTML = text;
email.focus();
return false;
} else {
return true;
}
}
Comment on lines +42 to +54
Copy link
Member

Choose a reason for hiding this comment

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

Same as above. And... Why is this function inside validateForm?



if (compName.value == "" || compName.length < 6) {
compName.style.border = "1px solid red";
text = "Please Enter A Valid Company Name";
errorText.innerHTML = text;
compName.focus();
return false;
} else {
return true;
}

function validURL(compUrl) {
var pattern = new RegExp('^(https?:\\/\\/)?' + // protocol
'((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.?)+[a-z]{2,}|' + // domain name
'((\\d{1,3}\\.){3}\\d{1,3}))' + // ip (v4) address
'(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + //port
'(\\?[;&amp;a-z\\d%_.~+=-]*)?' + // query string
'(\\#[-a-z\\d_]*)?$', 'i'); //fragment locater
if (!pattern.test(compUrl)) {
compName.style.border = "1px solid red";
text = "Please Enter A Valid Company Name";
errorText.innerHTML = text;
compName.focus();
return false;
} else {
return true;
}
}
document.write(validURL("http://qries.com"));


function phonenumber(phone) {
var phoneno = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
if (phone.value.match(phoneno)) {
return true;
} else {
phone.style.border = "1px solid red";
text = "Please Enter A Valid Phone Number Using The Correct Format";
errorText.innerHTML = text;
phone.focus();
return false;
}
}

if (message.value == "" || message.length < 140) {
Copy link
Member

Choose a reason for hiding this comment

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

This minimum length is also bad UX.

message.style.border = "1px solid red";
text = "Please Enter A Valid First Name";
errorText.innerHTML = text;
message.focus();
return false;
}
}

function clickSubmitButton() {
var thankYou = "Thanks for your message, we will be in touch soon. ";
document.getElementById("submit-btn").innerHTML = showThankYouMsg(thankYou);
}
Comment on lines +109 to +112
Copy link
Member

Choose a reason for hiding this comment

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

As I mentioned above, you don't need a different click listener. It doesn't matter if someone clicks the button, hits enter in a field, etc. And you should not add a thank you message inside the button. It should have a separate div somewhere below/above the form.


function showThankYouMsg() {

}