diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..ba67cd7 Binary files /dev/null and b/.DS_Store differ diff --git a/assets/.DS_Store b/assets/.DS_Store new file mode 100644 index 0000000..74c94af Binary files /dev/null and b/assets/.DS_Store differ diff --git a/creative.png b/assets/creative.png similarity index 100% rename from creative.png rename to assets/creative.png diff --git a/index.html b/index.html new file mode 100644 index 0000000..68a7897 --- /dev/null +++ b/index.html @@ -0,0 +1,79 @@ + + + + + + webDeveloper test + + + + + + + +
+
+

CYF

+
+ +
+

About CYF

+

What We Do

+

CYF is fictitious company-Lorem ipsum dolor sit amet, consecteture addipiscing elit.vestibulum + risus tellus, molestile et lorem quis, ultricies placerat enim. in hac habitasse platea dictumst. In dicturm + orci nulla, sed congue ligula tempus eget. Suspendisse eleifend elementum efficitur. CYF maximus metus nec maximus blandit. morbi ultrices sem id nisl facilisis volutpat. Quisque eu lectus fringilla, + egestas dolor vel, consequant nunc. Fusce vitae lacus mauris. +

+

Our focus

+
+
    +
  • Interactive
    • +
  • Mobile
    • +
  • Technology
    • +
+
+ +

click hear to download a PDF of our recent work

+ + +

News

+

›Show/Hide news item

+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. vestibulum risus tellus, molesite et lorem quis, ultricies + placeratenim. In hac habitasse platea dictumst. In dictum orci nulla, see congue ligula tempus eget. Suspendisse + eleifend elementum efficitur. Curabitur maximus metus nec maximus blandit. +

+
+

"I wanted to do something new and different. sprite came to me with the idea. i thought it was cool. without + the fans, there's no players."

+
+ +

More Information

+

For more information about our products and services, please contact us using the form below

+

items marked * are required fields

+
+
+
+ +
+
+
+

+ + +
+
+
+ + + + \ No newline at end of file diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..7b171c7 --- /dev/null +++ b/js/main.js @@ -0,0 +1,74 @@ +var hideShow = document.querySelector('#hideitem'); +hideShow.addEventListener('click', showHideNews); +var news = document.querySelector('#news'); +function showHideNews(event) { + event.preventDefault(); + if (news.style.display === '') { + news.style.display = 'none'; + } else { + news.style.display = ''; + } +} + + +var register = document.querySelector('#summitValid'); +register.addEventListener('click', validatFormFild); + + +function validatFormFild() { + event.preventDefault(); + var contactName = document.querySelector('#exampleContactName'); + var emailAddress = document.querySelector('#exampleInputEmail1'); + var contactPhone = document.querySelector('#examplePhone'); + var isEmail = false; + for (i = 0; i < emailAddress.value.length; i++) { + if (emailAddress.value[i] === '@') { + isEmail = true; + } + } if (!isEmail) { + alert('please Enter a valid Email Address'); + } + else if (!contactName.value) { + alert('please Enter your contact name?'); + } + else if (!contactPhone.value) { + alert('please insert your phone number'); + } else { + //clear all the input + alert('thank you for summit the form'); + contactName.value = ''; + emailAddress.value = ''; + contactPhone.value = ''; + } +} + +var addNews = document.querySelector("#hideitem"); +addNews.addEventListener("click", ourRequest); + +var ourRequest = new XMLHttpRequest(); +var url = "https://private-e99507-kabaros.apiary-mock.com/news"; +var addContainer = document.getElementById("news"); + +ourRequest.onreadystatechange = function () { + var data = JSON.parse(ourRequest.responseText); + if (ourRequest.readyState === 4) { + if (ourRequest.status === 200) { + renderHTML(data).innerHTML = ourRequest.responseText; + } else { + renderHTML(data).innerHTML = 'An error occurred during your request: ' + + ourRequest.status + ' ' + ourRequest.statusText; + } + } +}; + +ourRequest.open("GET", url); +ourRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); +ourRequest.send(); + +function renderHTML(data) { + var htmlString = ""; + for (i = 0; i < data.length; i++) { + htmlString += "
" + data[i].title + "
" + "

" + data[i].summary + "

"; + } + addContainer.insertAdjacentHTML("beforeend", htmlString); +} \ No newline at end of file diff --git a/style/main.css b/style/main.css new file mode 100644 index 0000000..2e6dc93 --- /dev/null +++ b/style/main.css @@ -0,0 +1,85 @@ +body { + background-image: url("https://raw.githubusercontent.com/Yjohn/WebDeveloperTest/master/assets/background.png"); + background-repeat: no-repeat; + background-size: 100%; + text-decoration: none; +} + +#wrap { + width: 100%; + color: white; + font-family: sans-serif; + font-weight: 100; +} + +.main { + width: 75%; + padding: 2px 30px; + font-weight: 100; +} + +.nav-item { + display: inline; +} + +.nav-item a { + text-decoration: none; + color: white; + padding: 0.1em 2em; + border: 0.1px solid; + border-right: white; + border-bottom: black; + background-image: linear-gradient( white, black 20%); +} + +h1 { + font-family: 'Apple-Chancery', cursive; + font-weight: 100; + font-style: italic; + font-size: 60px; +} + +h2 { + color: #CB3541; + font-weight: 100; +} +#news{ + font-weight: 100; +} +#hideitem{ +font-style: italic; +border: none; +cursor: pointer; +} +h3 { + font-weight: 100; +} + +span { + color: #CB3541; + content: "\203A"; +} + +.focus { + color: yellow; +} +a{ + text-decoration: none; +} +.ourlink { + color: yellow; + font-style: italic; + +} + +.btn { + border-radius: 0.15em; + background: light grey; + padding: 5px 10px; + border: none; + color: black; +} +.form-control { + border: 2px solid grey; + padding: 5px 35px; +} \ No newline at end of file