diff --git a/JS/main.js b/JS/main.js new file mode 100644 index 0000000..1fa6a71 --- /dev/null +++ b/JS/main.js @@ -0,0 +1,128 @@ + +// Show/Hide news control +var controlElement = document.querySelector('#controlElement'); +controlElement.addEventListener('click', showHide); +var news = document.querySelector('#news'); + +//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" ).hide( "slow" ); + } + else if (news.style.display === "none") { + $( "#news" ).show( "slow" ); + } + else { + $( "#news" ).hide( "slow" ); + } +} + +// Form Validation +//input Text +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(); + var checkValideEmail = checkEmail(); + var checkValideName = checkName(); + var checkValideNumber = checkNumber(); + if (checkValideEmail && checkValideName) { + 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))) { + inputEmail.appendChild(alertEmailField); + } + else { + 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)) { + inputName.appendChild(alertNameField); + } + else { + 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)) { + if ($('p.contactAlert').length === 1) { + inputNumber.removeChild(alertContactField); + } + return true; + } + else { + inputNumber.appendChild(alertContactField); + return false; + } +} + + + diff --git a/assets/arrow.png b/assets/arrow.png new file mode 100644 index 0000000..cd994c6 Binary files /dev/null and b/assets/arrow.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..fb61c99 --- /dev/null +++ b/index.html @@ -0,0 +1,107 @@ + + + + + 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.

+
+ +
+
+ Our focus +
+ +

+ + + Click here to download a pdf for our recent work + +

+
+ +
+
+ News +
+ + +
+ +
+ +
+ +
+
+ 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..f7e03b3 --- /dev/null +++ b/styles/style.css @@ -0,0 +1,85 @@ + +/* 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 .article-body-control{ + color:#E51955; + font-size:1.5em; +} +article.third ul{ + list-style-image: url('../assets/arrow.png'); +} +#news .title{ + text-decoration: underline; +} +/* Form style */ +form{ + color: white; +} +#InputEmail , #text-input-phone{ + width: 300px; +} +p.nameAlert, .emailAlert,.contactAlert{ + font-size: 1em; + color: red; + margin: 1px; +}