From 884f11f222a3a0fa7954516c8720d468c3895448 Mon Sep 17 00:00:00 2001 From: MayR <55711417+mayramsay@users.noreply.github.com> Date: Fri, 15 Nov 2019 15:38:34 -0500 Subject: [PATCH 1/4] Contact-page Hi team, Sorry for the delay. I finally finished the HTML, CSS, and Javascript files for the contact-page. However, I notice the form validation is not working correctly. I've been trying to troubleshoot, but not much luck there. I figure maybe you can help me here; please feel free to share your comments. Thank you in advance. May --- contact-page.css | 118 ++++++++++++++++++++++++++++++++++++++++++++++ contact-page.html | 75 +++++++++++++++++++++++++++++ contact-page.js | 116 +++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 309 insertions(+) create mode 100644 contact-page.css create mode 100644 contact-page.html create mode 100644 contact-page.js diff --git a/contact-page.css b/contact-page.css new file mode 100644 index 0000000..10a9a78 --- /dev/null +++ b/contact-page.css @@ -0,0 +1,118 @@ +@import url("https://fonts.googleapis.com/css?family=Archivo+Narrow|Cabin+Condensed|Roboto+Condensed|Varela+Round&display=swap"); +* { + font-family: "Varela Round", sans-serif; + margin: 0px; + padding: 0px; + box-sizing: border-box; +} + +body { + font-size: medium; + text-align: center; +} + +.nav-box { + position: relative; + margin: auto; + padding: 30px; + height: 22px; + width: 100%; + justify-content: center; + display: flex; + align-items: center; +} + +.navlist li { + display: inline; + list-style-type: none; + padding-right: 40px; +} + +li a { + text-decoration: none; + text-transform: uppercase; + font-size: large; + color: black; +} + +.banner-box { + position: relative; + text-align: center; + top: 5px; + padding: 200px; + margin-bottom: 30px; +} + +.title-msg { + position: absolute; + padding: 0px; + 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 { + top: 10px; + margin: 50px 200px; + justify-items: center; +} + +.form-box #error-msg { + margin: 10px; + padding: 0; + background: #fe8bef; + text-align: center; + font-size: 14px; + transition: all 0.5s ease; +} + +.contact-info { + display: grid; + grid-template-columns: 150px 300px 150px 300px; + grid-gap: 25px 20px; +} + +.contact-info label { + text-align: left; +} + +.contact-info input { + top: 0; + margin: 0; +} + +.contact-info textarea { + width: 790px; + padding: 30px; + resize: none; +} + +#submit-btn { + background-color: rgb(130, 140, 214); + color: white; + border-radius: 5px; + font-size: 1.2rem; + height: 40px; + width: 150px; + margin: 10px; + position: relative; + border: 0px; + animation-name: btn-animation; + animation-duration: 5s; + animation-iteration-count: infinite; + text-transform: uppercase; + cursor: pointer; + letter-spacing: 3px; +} \ No newline at end of file diff --git a/contact-page.html b/contact-page.html new file mode 100644 index 0000000..d3f9abe --- /dev/null +++ b/contact-page.html @@ -0,0 +1,75 @@ + + + + + + Contact Page: + + + + + +
+
+ +
+ +
+
+ +
+ +
+ +
+ +
+
+

Please leave your information in the form below, your contact information will not be shared to any third parties.


+
+
+
+ + + + + + + + + + + + + + +
+ +
+ + +
+
+
+
+ + + + + \ No newline at end of file diff --git a/contact-page.js b/contact-page.js new file mode 100644 index 0000000..00bad7e --- /dev/null +++ b/contact-page.js @@ -0,0 +1,116 @@ +var firstName = document.getElementById("first-name").value; +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); +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) { + firstName.style.border = "1px solid red"; + text = "Please Enter A Valid First Name"; + errorText.innerHTML = text; + firstName.focus(); + return false; + } else { + return true; + } + + 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; + } + + 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; + } + } + + + 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 + '(\\?[;&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) { + 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); +} + +function showThankYouMsg() { + +} \ No newline at end of file From 699d8fa38edeb765449beed2950b91c4465f2db5 Mon Sep 17 00:00:00 2001 From: Katona Krisztian Date: Sun, 17 Nov 2019 11:53:14 +0100 Subject: [PATCH 2/4] change pagpe to page --- contact-page.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/contact-page.html b/contact-page.html index d3f9abe..9f7a076 100644 --- a/contact-page.html +++ b/contact-page.html @@ -17,7 +17,7 @@
+ + + + - - - + + \ No newline at end of file From 8151b43d49f37386bdf83cb19a1a1ee8afa6f824 Mon Sep 17 00:00:00 2001 From: MayR <55711417+mayramsay@users.noreply.github.com> Date: Mon, 25 Nov 2019 15:41:30 -0500 Subject: [PATCH 4/4] 2nd updated HTML and CSS file for contact page --- contact-page.css | 35 +++-------- contact-page.html | 145 +++++++++++++--------------------------------- 2 files changed, 47 insertions(+), 133 deletions(-) diff --git a/contact-page.css b/contact-page.css index 2cb67f5..17d1fe5 100644 --- a/contact-page.css +++ b/contact-page.css @@ -1,6 +1,6 @@ body { font-family: "Varela", sans-serif; - font-size: 1.6remm; + font-size: 1rem; text-align: center; } @@ -27,8 +27,7 @@ li a { .banner-box { display: flex; - top: 5px; - padding: 15em 30em; + height: 75vh; position: relative; background-image: url(http://cliquetechmedia.com/wp-content/uploads/2017/12/contact-us-background.jpg); background-size: cover; @@ -37,7 +36,6 @@ li a { .title-msg { position: absolute; - padding: 0; top: 50%; left: 50%; transform: translate(-50%, -50%); @@ -48,7 +46,6 @@ h1 { font-size: xx-large; font-weight: bold; text-transform: uppercase; - margin-bottom: 5px; } h2 { @@ -60,12 +57,10 @@ h2 { padding: 1rem 2rem; } -.form-box .error-msg { +.error-msg { margin: 10px; padding: 10px; - background: #fe8bef; - font-size: 1rem; - transition-property: all 0.5s ease; + background: red; } .contact-info { @@ -86,29 +81,15 @@ h2 { .button { background-color: #616ecc; color: white; - padding: 1rem 1rem; + padding: 1rem; border-radius: 5px; font-size: 1.2rem; text-transform: uppercase; cursor: pointer; letter-spacing: 1px; - animation-name: btn-animation; - animation-duration: 5s; - animation-iteration-count: infinite; + transition: background 0.2s ease-in-out; } -button :hover { - animation-name: btn-animation; - animation-duration: 500ms; - @keyframes background-color { - 0% { - background-color: #616ecc; - } - 50% { - background-color: #661166; - } - 100% { - background-color: #fe8bef; - } - } +.button:hover { + background-color: #661166; } \ No newline at end of file diff --git a/contact-page.html b/contact-page.html index a0f5301..636cf1e 100644 --- a/contact-page.html +++ b/contact-page.html @@ -4,15 +4,13 @@ - - Contact Page: - + @@ -38,113 +36,48 @@ -
-
+ -
-
-

- Please leave your information in the form below, your contact information will not be shared to any third parties. -

-
-
- Error messages will show here when validating the form and field +
+

Please leave your information in the form below, your contact information will not be shared to any third parties.

+
+ Error messages will show here when validating the form and field +
+
+ +
+ + + + + + + + + + + + + +
- - -
- - - - - - - - - - - - - - -
- - - +
-
-
+ + @2019, all rights reserved. + - + + \ No newline at end of file