diff --git a/assets/arrow.PNG b/assets/arrow.PNG new file mode 100644 index 0000000..45981e8 Binary files /dev/null and b/assets/arrow.PNG differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..210b6de --- /dev/null +++ b/index.html @@ -0,0 +1,92 @@ + + + + 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 specimetially 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 IpsumIpsumIt 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 +
+

Show/Hide news items

+
+

specimetially 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

+

specimetially 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

+
+
+ +
+

+ 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/main.js b/main.js new file mode 100644 index 0000000..1231ef8 --- /dev/null +++ b/main.js @@ -0,0 +1,97 @@ + +//Show and Hide The news Sections +var controlElement = document.querySelector('#show'); +controlElement.addEventListener('click', showHide); +var content = document.querySelector('#ajaxContent'); +function showHide(event) { + event.preventDefault(); + if (content.className === "hide") { + content.className = ""; + } + else { + content.className = "hide"; + } +} + +//Form Selectors // + +var userEmail = document.querySelector('#useremail'); +var userName = document.querySelector('#username'); +var userPhone = document.querySelector('#userphone'); + +var sbumitButton = document.querySelector('#submit-input'); +sbumitButton.addEventListener('click', submitForm); + +function submitForm(event) { + event.preventDefault(); + var isEmailVaild = verifyUserEmail(); + var isUserVaild = verifyUserName(); + var isPhoneVaild = verifyUserPhone(); + if (isEmailVaild && isUserVaild && isPhoneVaild) { + userEmail.value = ""; + userName.value = ""; + userPhone.value = ""; + alert('Thanks'); + } +} + +function verifyUserName() { + if (!userName.value) { + userName.style.backgroundColor = "red"; + } + else { + userName.style.backgroundColor = "white"; + return true; + } +} + +function verifyUserPhone() { + if (userPhone.value.length < 11 && userPhone.value.length > 0) { + userPhone.style.backgroundColor = "white"; + return true; + } + else { + userPhone.style.backgroundColor = "red"; + return false; + } +} + +function verifyUserEmail() { + if (userEmail.value.length <= 0 || userEmail.value.indexOf('@') < 0) { + userEmail.style.backgroundColor = "red"; + return false + } + else { + userEmail.style.backgroundColor = "white"; + return true; + } +} + + +// AJAX REQUEST + +var xhrcontent = document.getElementsByClassName(content); +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 ajaxNewsTitle = document.createElement("p"); + ajaxNewsTitle.innerText = array[i].title; // the ajax request title name + ajaxNewsTitle.className += 'ajaxTitle'; + content.appendChild(ajaxNewsTitle); + var ajaxNewsSummary = document.createElement("p"); + ajaxNewsSummary.innerText = array[i].summary; + ajaxNewsSummary.className += 'ajaxSummary'; + content.appendChild(ajaxNewsSummary); + } + } 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(); // sending the request \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..699e1c0 --- /dev/null +++ b/style.css @@ -0,0 +1,172 @@ +body{ + margin: 3%; + background-image: url("assets/background.png"); + background-repeat: no-repeat; + background-size:cover; +} +.website-title{ + color:white; + font-size: 57px; + font-family:Monotype Corsiva, Times, serif; +} +ul { + list-style-type: none; + margin: 0; + padding: 0; + } +nav .links li{ + display: inline-block; +} +ul.links a{ + color:white; + text-decoration: none; + display:inline-block; + text-align: center; + 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; +} +a { + text-decoration: none; +} +/* header style */ + +.articles .title{ + clear: left; + font-family: sans-serif; + font-size:3em; + color:#E51955; + margin-bottom: 20px; +} + +.news .title{ + clear: left; + font-family: sans-serif; + font-size:3em; + color:grey; + margin-bottom: 20px; +} + +.Information .title{ + clear: left; + font-family: sans-serif; + font-size:3em; + color:grey; + margin-bottom: 20px; +} + +.article1 .article-title{ + color: white; + font-size: 2em; + font-family: sans-serif; +} + +.article2 .article-title{ + color: yellow; + font-size: 2em; + font-family: sans-serif; +} + +.article1-body{ + font-family: sans-serif; + color: white; + font-size: 1em; +} + +.article-body-item{ + color: white; + font-size: 20px; +} + +.dropdown-menu{ + color:#E51955; + font-size:1.5em; +} + +.new .title{ + color: white; + font-size: 26px; +} + +.information .title{ + color: white; + font-size: 26px; +} + +.body{ + color: white; + font-size: 16px; +} +.form-body{ + color: white; + font-size: 16px;} + + +/* Articles style */ +div#main.articles { + display: block; + width:75%; +} + +.hide{ + display: none; +} + +a{ + color:#E51955; + font-size:1.2em; + background-position: left no-repeat; +} + +a#show:before { + display: inline-block; + position: relative; + top: 15px; + content: url('assets/arrow.png'); +} +#drop1{ + color:white; + font-size: 18px; + font-family: sans-serif; +} +#drop2{ + color: whitesmoke; + font-size: 16px; + font-family: sans-serif; + margin-left: 120px; +} +.ajaxTitle{ + color: grey; + font-size: 22px; + font-family: sans-serif; + margin-bottom: -11px; +} +.ajaxSummary{ + color: whitesmoke; + font-size: 16px; + font-family: sans-serif; + margin-left: 44px; +} +/* Form style */ +form{ + color: white; +} +#useremail , #userphone{ + width: 300px; +} +.content{ + display: none; +} +.content.active, +.no-js .showhide { + display: block; +} \ No newline at end of file