diff --git a/webTest/background.png b/webTest/background.png new file mode 100644 index 0000000..58c6531 Binary files /dev/null and b/webTest/background.png differ diff --git a/webTest/css/style.css b/webTest/css/style.css new file mode 100644 index 0000000..3d55e0b --- /dev/null +++ b/webTest/css/style.css @@ -0,0 +1,109 @@ +* { + margin: 0; + padding: 0; + color: red; +} +.showOne{ +margin-left:100px; + +} +body { + background-image: url(../background.png); + background-repeat: no-repeat; + background-size: cover; +} + +header h1 { + font-size: 3em; + margin-top: 20px; + font-family: ; + margin-left: 40px; +} + +header nav { + margin-left: 40px; + margin-top: 30px; + margin-bottom: 30px; +} + +header nav ul { + display: flex; +} + +header nav ul li { + /*background-color: #3a3436;*/ + border: solid 1px white; + background: linear-gradient(white, black 30%); + padding: 5px; + padding-left: 20px; + padding-right: 20px; + list-style: none; +} + +header nav ul li a {} + +.firstContainer h1 { + margin-left: 40px; + margin-bottom: 20px; +} + +.firstContainer h1:first-child { + color: #ad2d51; +} + +.firstContainer h1:last-of-type { + color: rgb(199, 204, 200); +} + +.firstContainer p { + margin-left: 40px; + margin-bottom: 20px; +} + +.firstContainer ul { + margin-left: 65px; + margin-bottom: 20px; +} + +.firstContainer h3 { + color: gold; + margin-left: 40px; + margin-bottom: 20px; +} + +.firstContainer h3 a { + text-decoration: none; + color: yellow; +} + +.secandContainer h2 { + color: rgb(242, 35, 79); + margin-left: 40px; +} + +.secandContainer p:first-of-type { + margin-left: 45px; +} + +.secandContainer p:last-child { + margin-top: 30px; + margin-left: 75px; + margin-bottom: 20px; +} + +form h2:first-of-type { + color: rgb(154, 154, 154); +} + +form h2, +h4, +h3, +input, +button { + margin-left: 60px; + margin-bottom: 30px; +} + +p { + width: 800px; +} diff --git a/webTest/index.html b/webTest/index.html new file mode 100644 index 0000000..fe6556d --- /dev/null +++ b/webTest/index.html @@ -0,0 +1,87 @@ + + + + + Test + + + + + + + +
+

CYF

+ + +
+
+ +

About CYF

+

What We Do

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt sollicitudin ultrices. Fusce dictum sem et varius porta. Aenean suscipit mauris sit amet pretium laoreet. Aliquam egestas est non nisi pulvinar, ut facilisis justo placerat. Fusce + fermentum lectus eget molestie tempor. Nam lobortis erat eget varius semper. Nullam molestie viverra nulla, eget accumsan augue maximus auctor. Maecenas placerat ante pharetra tellus cursus, fringilla sollicitudin lacus mollis. +

+ +

Our Focus

+ + +

Click here To Download a PDF of our recent work

+

News

+
+ +
+

Show/Hide news item

+
+ + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt sollicitudin ultrices. Fusce dictum sem et varius porta. Aenean suscipit mauris sit amet pretium laoreet. Aliquam egestas est non nisi pulvinar, ut facilisis justo placerat. Fusce + fermentum lectus eget molestie tempor. Nam lobortis erat eget varius semper. Nullam molestie viverra nulla, eget accumsan augue maximus auctor. Maecenas placerat ante pharetra tellus cursus, fringilla sollicitudin lacus mollis. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt sollicitudin ultrices. +

+
+ +
+ +
+

More Information

+

For more information about our product, please contact us using the form below

+

iteam marked* are required fields

+ +
+

Contact name*:

+ + + +

Contact email address*:

+ + +

Contact Phone number:

+ +
+ + +
+ + +
+
+ + + + + diff --git a/webTest/js/script.js b/webTest/js/script.js new file mode 100644 index 0000000..fec47e8 --- /dev/null +++ b/webTest/js/script.js @@ -0,0 +1,108 @@ +// function hideShow(){ +// +// if(cheker%2=0){ +// var hider=document.querySelector("#hide"); +// hider.style.display="none"; +// } +// } +var cheker = 2; +var clikeShowHide = document.querySelector("#showHide"); +var hider = document.querySelector(".showOne"); +clikeShowHide.addEventListener('click', function() { + if (cheker % 2 === 0) { + hider.style.display = hider.style.display + " none"; + cheker++; + } else { + hider.style.display = hider.style.display.replace("none", ""); + cheker++; + } +}); + +var prBtn = document.querySelector('button'); +var contactName = document.querySelector('#contName'); +var contactEmail = document.querySelector('#conEmail'); +var contactPhone = document.querySelector('#conPhone'); + +prBtn.addEventListener('click', function() { + + if (contactName.value.length === 0) { + contactName.style.backgroundColor = "gold"; + alert('please Add Your Name'); + + + } else { + contactName.style.backgroundColor = "silver"; + + } + + if (contactEmail.value.length === 0) { + contactEmail.style.backgroundColor = "gold"; + + alert('please Add Your Email Address'); + } + // if (contactEmail.value.indexOf("@") > -1) { + + // } else { + // alert('add @'); + // } + if (contactName.value.length > 0 && contactEmail.value.length > 0) { + if (contactEmail.value.indexOf("@") > -1) { + contactEmail.style.backgroundColor = "gold"; + alert("Well done"); + contactName.value = ""; + contactEmail.value = ""; + contactPhone.value = ""; + contactName.style.backgroundColor = "white"; + + contactEmail.style.backgroundColor = "white"; + + + } else { + alert("add @"); + } + } else { + alert("Plz Add The iteam marked * "); + } + + + event.preventDefault(); + +}); + + + +var request = new XMLHttpRequest(); //creating a request object + +request.onreadystatechange = function() { + var pargraph = document.querySelector(".showOne"); + if (request.readyState === 4) { // check if a response was sent back + if (request.status === 200) { // check if request was successful + var sendMsg = JSON.parse(request.responseText); + + console.log(sendMsg[0]); + for (var i = 0; i < sendMsg.length; i++) { + var sendInformationTitle = sendMsg[i].title; + var sendInformationParg = sendMsg[i].summary; + + var newsTitle = document.createElement('h1') + var newsPargraph = document.createElement('p') + + newsTitle.innerHTML = sendInformationTitle; + newsPargraph.innerHTML = sendInformationParg; + + pargraph.appendChild(newsTitle); + pargraph.appendChild(newsPargraph); + } + + + + } else { + consloe.log('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(); \ No newline at end of file