From 89ce3d058f7bab1d62c6cf87a33383c591881a26 Mon Sep 17 00:00:00 2001 From: MHDRateb Date: Wed, 21 Jun 2017 15:57:31 +0100 Subject: [PATCH 1/5] Web Developer test first revision --- JS/main.js | 76 +++++++++++++++++++++++++++++++ assets/arrow.png | Bin 0 -> 485 bytes index.html | 113 +++++++++++++++++++++++++++++++++++++++++++++++ styles/style.css | 79 +++++++++++++++++++++++++++++++++ 4 files changed, 268 insertions(+) create mode 100644 JS/main.js create mode 100644 assets/arrow.png create mode 100644 index.html create mode 100644 styles/style.css diff --git a/JS/main.js b/JS/main.js new file mode 100644 index 0000000..6d7f291 --- /dev/null +++ b/JS/main.js @@ -0,0 +1,76 @@ + +// Show/Hide news control +var controlElement = document.querySelector('#controlElement'); +controlElement.addEventListener('click', showHide); +var news = document.querySelector('#news'); +var subNews = document.querySelector('#subNews'); +// Show/Hide Function +function showHide(event) { + event.preventDefault(); + if (news.style.display === "") { + news.style.display = "none"; + subNews.style.display = "none"; + } + else if (news.style.display === "none") { + news.style.display = "block"; + subNews.style.display = "block"; + } + else { + news.style.display = "none"; + subNews.style.display = "none"; + } +} +// Form Validation +//input Text +var textEmail = document.querySelector('#InputEmail'); +var textName = document.querySelector('#text-input-name'); +var textPhone = document.querySelector('#text-input-phone'); +//submit button +var sbumitButton = document.querySelector('form .btn-primary'); +sbumitButton.addEventListener('click', submitForm); +//submit function +function submitForm(event) { + event.preventDefault(); + checkEmail(); + checkName(); + checkNumber(); + if (checkEmail() && checkName()) { + textEmail.value = ""; + textName.value = ""; + textPhone.value = ""; + setTimeout(function () { + alert('Thank you for filling out the form'); + }, 200); + } +} +//check text in email field +function checkEmail() { + if (textEmail.value.length <= 0 || textEmail.value.indexOf('@') < 0 || !(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(textEmail.value))) { + textEmail.style.backgroundColor = "red"; + } + else { + textEmail.style.backgroundColor = "white"; + return true; + } +} +//check text in name field +function checkName() { + if (textName.value.length <= 0 || /\d/.test(textName.value) || /[~`!#$%\^&*+=\-\[\]\\';,/{}.|\\":<>\?]/.test(textName.value)) { + textName.style.backgroundColor = "red"; + } + else { + textName.style.backgroundColor = "white"; + return true; + } +} +//check text in number field +function checkNumber() { + if (!(/[~`!#$%\^&*+=\-\[\]\\';,/{}.|\\":<>\?]/g.test(textPhone.value)) && textPhone.value.length < 11 && (!(/[A-Za-z]/.test(textPhone.value)) || textPhone.value.length === 0)) { + textPhone.style.backgroundColor = "white"; + return true; + } + else { + textPhone.style.backgroundColor = "red"; + return false; + } +} \ No newline at end of file diff --git a/assets/arrow.png b/assets/arrow.png new file mode 100644 index 0000000000000000000000000000000000000000..cd994c6a8db45dca82826fcd961058a24c44e94a GIT binary patch literal 485 zcmVU&u#-&t(8goss-D|Vtz=2BS*4m) z%96gHTB+)}A5G4axt^6R1Vg6=neZmS^5`M&F^{``Aky@dpy7S?Up0gxrV9ylYU1Bj0I znZC8h$T%2Yz3q0Ug|# + + + + Code Your Future | CYF + + + + + +
+

CYF

+ +
+ + + +
+
+ +
+
+ About CYF +
+ +
+
+ What We Do +
+

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's + standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it + to make a type specimen book. It has survived not only five centuries, but also the leap into electronic + typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset + sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus + PageMaker including versions of Lorem Ipsum.

+
+ + + +
+
+ News +
+ +

+ It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. + The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to + using 'Content here, content here', making it look like readable English. Many desktop publishing packages + and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will + uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by + accident, sometimes on purpose (injected humour and the like). +

+

+ "There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, + by injected humour, or randomised words which don't look even slightly believable. If you are going to use + a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text." +

+
+ +
+
+ More information +
+

+ For more information about our product and services, Please contact us the form below. +

+

Items marked * are required fields

+
+
+
+ +
+
+
+ +
+
+
+ +

+ +
+ +
+
+ + + + + \ No newline at end of file diff --git a/styles/style.css b/styles/style.css new file mode 100644 index 0000000..3a13b4c --- /dev/null +++ b/styles/style.css @@ -0,0 +1,79 @@ + +/* body style */ +body{ + margin: 3%; + background-image: url("../assets/background.png"); + background-repeat: no-repeat; + background-size:cover; +} +/* header style */ +h1{ + font-family: sans-serif; + font-size: 6em; + color: white; +} +/* navigate bar style */ +.navbar button{ + display:block; + float:left; + background:-webkit-linear-gradient(white 5%, gray 10%, #141414 80%, black 10%); + background-color:black; + color: white; + width: 150px; + height: 30px; + margin: 1px; + border-bottom: none; + border-right: none; + border-top: none; + border-left-width: 1px; + font-size: 20px; + margin-bottom: 20px; +} +/* Articles style */ +article { + width:75%; +} +.articles .articles-title{ + clear: left; + font-family: sans-serif; + font-size:3em; + color:#E51955; + margin-bottom: 20px; +} +.article .article-title{ + color: white; + font-size: 2em; + font-family: sans-serif; +} +article.second .article-title{ + color: yellow; + font-size: 2em; + font-family: sans-serif; +} +article .article-body{ + font-family: sans-serif; + color: white; + font-size: 1em; +} +article.second a{ + color: yellow; + font-style: italic; + text-decoration: none; +} +article.third p:last-of-type{ + padding-left: 7em; +} +article.third .article-body-control{ + color:#E51955; + font-size:1.5em; +} +article.third ul{ + list-style-image: url('../assets/arrow.png'); +} +/* Form style */ +form{ + color: white; +} +#InputEmail , #text-input-phone{ + width: 300px; +} From 3d2cdb48538cc2efeee0a682e1bba8f9054e2476 Mon Sep 17 00:00:00 2001 From: MHDRateb Date: Sat, 24 Jun 2017 04:07:27 +0100 Subject: [PATCH 2/5] news section populated dynamically from an API using an AJAX call --- JS/main.js | 35 ++++++++++++++++++++++++++++++----- index.html | 16 +++------------- styles/style.css | 7 ++++--- 3 files changed, 37 insertions(+), 21 deletions(-) diff --git a/JS/main.js b/JS/main.js index 6d7f291..285c77b 100644 --- a/JS/main.js +++ b/JS/main.js @@ -3,23 +3,47 @@ var controlElement = document.querySelector('#controlElement'); controlElement.addEventListener('click', showHide); var news = document.querySelector('#news'); -var subNews = document.querySelector('#subNews'); + +//receive news section from AJAX +var request = new XMLHttpRequest(); //creating a request object +request.onreadystatechange = function () { + if (request.readyState === 4) { // check if a response was sent back + if (request.status === 200) { // check if request was successful + var array = JSON.parse(request.responseText); + for (var i = 0; i < array.length; i++) { + var titlePara = document.createElement("p"); + titlePara.innerText = array[i].title; + titlePara.className += ' title'; + var summarypara = document.createElement("p"); + summarypara.innerText += array[i].summary; + summarypara.className += ' summary'; + news.appendChild(titlePara); + news.appendChild(summarypara); + } + } else { + alert('An error occurred during your request: ' + request.status + ' ' + request.statusText); + } + } +} +var url = "https://private-e99507-kabaros.apiary-mock.com/news"; //server location +request.open("GET", url); // adding it to the request +request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //header info +request.send(); + // Show/Hide Function function showHide(event) { event.preventDefault(); if (news.style.display === "") { news.style.display = "none"; - subNews.style.display = "none"; } else if (news.style.display === "none") { news.style.display = "block"; - subNews.style.display = "block"; } else { news.style.display = "none"; - subNews.style.display = "none"; } } + // Form Validation //input Text var textEmail = document.querySelector('#InputEmail'); @@ -73,4 +97,5 @@ function checkNumber() { textPhone.style.backgroundColor = "red"; return false; } -} \ No newline at end of file +} + diff --git a/index.html b/index.html index 060bb81..2729495 100644 --- a/index.html +++ b/index.html @@ -65,19 +65,9 @@

CYF

-

- It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. - The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to - using 'Content here, content here', making it look like readable English. Many desktop publishing packages - and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will - uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by - accident, sometimes on purpose (injected humour and the like). -

-

- "There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, - by injected humour, or randomised words which don't look even slightly believable. If you are going to use - a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text." -

+
+ +
diff --git a/styles/style.css b/styles/style.css index 3a13b4c..ec40d6e 100644 --- a/styles/style.css +++ b/styles/style.css @@ -60,9 +60,7 @@ article.second a{ font-style: italic; text-decoration: none; } -article.third p:last-of-type{ - padding-left: 7em; -} + article.third .article-body-control{ color:#E51955; font-size:1.5em; @@ -70,6 +68,9 @@ article.third .article-body-control{ article.third ul{ list-style-image: url('../assets/arrow.png'); } +#news .title{ + text-decoration: underline; +} /* Form style */ form{ color: white; From be12b95725317926b4b003762e512f0b2e423b9a Mon Sep 17 00:00:00 2001 From: MHDRateb Date: Mon, 26 Jun 2017 17:58:44 +0100 Subject: [PATCH 3/5] correct declarttion of doctype and remove + from js file as I don't need it --- JS/main.js | 6 +++--- index.html | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/JS/main.js b/JS/main.js index 285c77b..d4234bc 100644 --- a/JS/main.js +++ b/JS/main.js @@ -13,10 +13,10 @@ request.onreadystatechange = function () { for (var i = 0; i < array.length; i++) { var titlePara = document.createElement("p"); titlePara.innerText = array[i].title; - titlePara.className += ' title'; + titlePara.className += 'title'; var summarypara = document.createElement("p"); - summarypara.innerText += array[i].summary; - summarypara.className += ' summary'; + summarypara.innerText = array[i].summary; + summarypara.className += 'summary'; news.appendChild(titlePara); news.appendChild(summarypara); } diff --git a/index.html b/index.html index 2729495..8f22b86 100644 --- a/index.html +++ b/index.html @@ -1,4 +1,4 @@ - + From 58ed59b02fee3a3a29b9d1be52e9d6e5a07b895c Mon Sep 17 00:00:00 2001 From: MHDRateb Date: Mon, 26 Jun 2017 18:01:15 +0100 Subject: [PATCH 4/5] remove space in class name to make it one class instead of two --- index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 8f22b86..288eeea 100644 --- a/index.html +++ b/index.html @@ -12,9 +12,9 @@

CYF

- - - + + +
From 0d61f4bfcb8500d5e18b5536daed44d35310200c Mon Sep 17 00:00:00 2001 From: MHDRateb Date: Sat, 8 Jul 2017 03:31:16 +0100 Subject: [PATCH 5/5] update the website accoriding to the clients requirments --- JS/main.js | 55 ++++++++++++++++++++++++++++++++++++------------ index.html | 14 +++++++----- styles/style.css | 5 +++++ 3 files changed, 55 insertions(+), 19 deletions(-) diff --git a/JS/main.js b/JS/main.js index d4234bc..1fa6a71 100644 --- a/JS/main.js +++ b/JS/main.js @@ -32,15 +32,15 @@ request.send(); // Show/Hide Function function showHide(event) { - event.preventDefault(); + event.preventDefault(); if (news.style.display === "") { - news.style.display = "none"; + $( "#news" ).hide( "slow" ); } else if (news.style.display === "none") { - news.style.display = "block"; + $( "#news" ).show( "slow" ); } else { - news.style.display = "none"; + $( "#news" ).hide( "slow" ); } } @@ -49,16 +49,33 @@ function showHide(event) { var textEmail = document.querySelector('#InputEmail'); var textName = document.querySelector('#text-input-name'); var textPhone = document.querySelector('#text-input-phone'); +var inputName = document.querySelector('#inputName'); +var inputEmail = document.querySelector('#inputEmail'); +var inputNumber = document.querySelector('#inputNumber'); + + + +//alarms messages +var alertNameField = document.createElement("p"); +alertNameField.innerText = "This filed is required,Please type letters only"; +alertNameField.className = 'nameAlert'; +var alertEmailField = document.createElement("p"); +alertEmailField.innerText = "This filed is required,Please enter email like:- Example@XX.XX"; +alertEmailField.className = 'emailAlert'; +var alertContactField = document.createElement("p"); +alertContactField.innerText = "Please enter maxsimum 11 numbers"; +alertContactField.className = 'contactAlert'; + //submit button var sbumitButton = document.querySelector('form .btn-primary'); sbumitButton.addEventListener('click', submitForm); //submit function function submitForm(event) { event.preventDefault(); - checkEmail(); - checkName(); - checkNumber(); - if (checkEmail() && checkName()) { + var checkValideEmail = checkEmail(); + var checkValideName = checkName(); + var checkValideNumber = checkNumber(); + if (checkValideEmail && checkValideName) { textEmail.value = ""; textName.value = ""; textPhone.value = ""; @@ -70,32 +87,42 @@ function submitForm(event) { //check text in email field function checkEmail() { if (textEmail.value.length <= 0 || textEmail.value.indexOf('@') < 0 || !(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(textEmail.value))) { - textEmail.style.backgroundColor = "red"; + inputEmail.appendChild(alertEmailField); } else { - textEmail.style.backgroundColor = "white"; + if ($('p.emailAlert').length === 1) { + inputEmail.removeChild(alertEmailField); + } return true; } } + //check text in name field function checkName() { if (textName.value.length <= 0 || /\d/.test(textName.value) || /[~`!#$%\^&*+=\-\[\]\\';,/{}.|\\":<>\?]/.test(textName.value)) { - textName.style.backgroundColor = "red"; + inputName.appendChild(alertNameField); } else { - textName.style.backgroundColor = "white"; + if ($('p.nameAlert').length === 1) { + inputName.removeChild(alertNameField); + } return true; } } + //check text in number field function checkNumber() { if (!(/[~`!#$%\^&*+=\-\[\]\\';,/{}.|\\":<>\?]/g.test(textPhone.value)) && textPhone.value.length < 11 && (!(/[A-Za-z]/.test(textPhone.value)) || textPhone.value.length === 0)) { - textPhone.style.backgroundColor = "white"; + if ($('p.contactAlert').length === 1) { + inputNumber.removeChild(alertContactField); + } return true; } else { - textPhone.style.backgroundColor = "red"; + inputNumber.appendChild(alertContactField); return false; } } + + diff --git a/index.html b/index.html index 288eeea..fb61c99 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,7 @@

CYF

-
+
@@ -65,12 +65,14 @@

CYF

+
+
-
+
More information
@@ -79,15 +81,15 @@

CYF

Items marked * are required fields

-
+

-
+

-
+


@@ -96,6 +98,8 @@

CYF

+ + diff --git a/styles/style.css b/styles/style.css index ec40d6e..f7e03b3 100644 --- a/styles/style.css +++ b/styles/style.css @@ -78,3 +78,8 @@ form{ #InputEmail , #text-input-phone{ width: 300px; } +p.nameAlert, .emailAlert,.contactAlert{ + font-size: 1em; + color: red; + margin: 1px; +}