Skip to content

John Kay's Pull Request #3

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
stackedactors1 wants to merge 8 commits into
base: master
Choose a base branch
from
Open

John Kay's Pull Request #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
53cb1ce
test to see if connected
Jan 22, 2014
4a876a6
test to see if connected
Jan 22, 2014
da600c1
test to see if connected, once again
Jan 22, 2014
94b46b7
First real commit:
Jan 22, 2014
30cf6a7
index.html - added error_header div for slide down effect when submit…
Jan 22, 2014
6031c3a
index.html - added format description for phone number input field. I…
Jan 22, 2014
84b56b1
Added css for mobile view.
Jan 22, 2014
3ea801b
test from windows intellij - javascript blue border validate
stackedactors1 Apr 29, 2014
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
16 changes: 13 additions & 3 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,18 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Front-End Developer Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Front-End Developer Test once again</title>
<link rel="stylesheet" href="styles/main.css" />
</head>
<body>
<div class="error_header"></div>
<div class="header">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
</div>
<div class="container">
<img class="banner" src="images/banner.jpg" alt="" />
<form method="post" action="index.html">
<form method="post" action="index.html" id="submit_form">
<h2>Nibh Hendrerit Sodales</h2>
<label>
First Name:
Expand All @@ -22,13 +24,19 @@ <h2>Nibh Hendrerit Sodales</h2>
<input type="text" name="last_name" />
</label>
<label>
Phone Number:
Phone Number: <span class="phone_desc">format (XXX) XXX-XXXX</span>
<input type="text" name="phone" />
</label>
<label>
Email Address:
<input type="text" name="email" />
</label>
<label>
<strong>Current Education Level:</strong>
</label>
<div class="education_level">
<!--DYNAMIC HTML GENERATED BY JS-->
</div>
<div class="actions">
<button type="submit">Request Information</button>
</div>
Expand All @@ -47,5 +55,7 @@ <h2>Nibh Hendrerit Sodales</h2>
</p>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
101 changes: 101 additions & 0 deletions js/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
var error_count = 0, error_string = '', proceed = 0;


/* ------ created error handeling object
for form validation functions ------*/
var EH = function(){
this.validateEmail = function(email){
var regexp = /\S+@\S+\.\S+/;
return regexp.test(email);
}
this.validatePhone = function(number){
var regexp = /^(\(\d{3}\))|(\d{3}-)\d{3}-\d{4}$/;
return regexp.test(number);
}
this.errorHander = function(msg){
$('.error_header').show().html(msg).animate({
top: '0px',
}, 100);
setTimeout(function(){
error_count = 0;
proceed = 0;
$('.error_header').animate({
top: '-102px',
},{
complete: function(){
$(this).hide().html('');
}
},300);
},4000);
}
}

$(document).ready(function(){
var errObj = new EH();

var HTML_EDU = '';
$.ajax({
url:'http://fedtest.aws.af.cm',
dataType:'jsonp',
success:function(msg){
var x = 0;
for(var i in msg){
HTML_EDU += '<label class="edu_holder" for="' + x + '">' + msg[i] + '</label>' +
'<input type="radio" name="education_level" value="' + msg[i] + '" class="edu_radio" id="' + x + '" />' +
'<div class="clear"></div>';
x++;
}
$('div.education_level').html(HTML_EDU);
}
});

$('#submit_form').submit(function(){
if(proceed != 0) return false;

error_string = 'The following errors occured: ';
if($('input[name="first_name"]').val() == ''){
$('input[name="first_name"]').css('border','1px solid blue');
error_count++;
error_string += 'First Name, ';
} else {
$('input[name="first_name"]').css('border','1px solid #93a1a1');
}
if($('input[name="last_name"]').val() == ''){
$('input[name="last_name"]').css('border','1px solid blue');
error_count++;
error_string += 'Last Name, ';
} else {
$('input[name="last_name"]').css('border','1px solid #93a1a1');
}
if($('input[name="phone"]').val() == '' || !errObj.validatePhone($('input[name="phone"]').val())){
$('input[name="phone"]').css('border','1px solid red');
error_count++;
error_string += 'Phone Number, ';
} else {
$('input[name="phone"]').css('border','1px solid #93a1a1');
}
if($('input[name="email"]').val() == '' || !errObj.validateEmail($('input[name="email"]').val())){
$('input[name="email"]').css('border','1px solid blue');
error_count++;
error_string += 'Email is invalid, ';
} else {
$('input[name="email"]').css('border','1px solid #93a1a1');
}
if(!$('input[name="education_level"]').is(':checked')){
$('label strong').css('color','red');
error_count++;
error_string += 'Select Education Level, ';
} else {
$('label strong').css('color','#222');
}
error_string = error_string.slice(0, -2);

if(error_count != 0){
proceed = 1;
errObj.errorHander(error_string);
return false;
} else {
return true;
}
});
});
74 changes: 73 additions & 1 deletion styles/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ h2 {
label {
display: block;
margin-bottom: .8em;
color #222;
color: #222;
}

input {
Expand Down Expand Up @@ -75,3 +75,75 @@ input {
padding-left: 20px;
}

/*jkay additions*/
.education_level{
min-height:200px;
}
.error_header {
background-color: #800020;
font-weight: bold;
display:none;
padding-top: 40px;
text-align: center;
color: #fff;
font-size: 18px;
position: fixed;
width: 100%;
height: 62px;
top: -102px;
z-index: 5;
}
.content {
width: 520px;
padding-left: 20px;
}

.education_level{
min-height:200px;
}
input[type=radio]{
float:left;
width:7%;
margin-top: 5px;
}
.edu_holder{
float:left;
width: 50%;
}
span.phone_desc{
font-size:10px;
font-style:italic;
}
.clear{
clear: both;
}
@media screen and (max-width: 640px) {
h1{
line-height: 28px;
}
img.banner{
width: 100%;
}
.container {
width: 300px;
margin: 0 auto;
}
form{
width: 238px;
margin:0;
float: left;
box-shadow:none;
}
.edu_holder {
width: 88%;
}
.error_header {
padding: 20px 0 40px 0;
}
.content {
width: 100%;
padding: 10px 0px;
float: left;
text-align: justify;
}
}