diff --git a/index.html b/index.html index ad0297d..78c5f77 100644 --- a/index.html +++ b/index.html @@ -2,16 +2,18 @@ - Front-End Developer Test + + Front-End Developer Test once again +

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
+

Nibh Hendrerit Sodales

+ +
+ +
@@ -47,5 +55,7 @@

Nibh Hendrerit Sodales

+ + diff --git a/js/script.js b/js/script.js new file mode 100644 index 0000000..7ae6098 --- /dev/null +++ b/js/script.js @@ -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 += '' + + '' + + '
'; + 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; + } + }); +}); \ No newline at end of file diff --git a/styles/main.css b/styles/main.css index 7bb98ad..379901b 100644 --- a/styles/main.css +++ b/styles/main.css @@ -45,7 +45,7 @@ h2 { label { display: block; margin-bottom: .8em; - color #222; + color: #222; } input { @@ -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; + } +} \ No newline at end of file