From b0fd60ee057ece09ff44e08d99e2bb124134c2f4 Mon Sep 17 00:00:00 2001 From: YJohn Date: Thu, 22 Jun 2017 15:28:07 +0100 Subject: [PATCH 01/12] build the page for CYF --- main.css | 84 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ main.html | 78 +++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 162 insertions(+) create mode 100644 main.css create mode 100644 main.html diff --git a/main.css b/main.css new file mode 100644 index 0000000..f46a14c --- /dev/null +++ b/main.css @@ -0,0 +1,84 @@ +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; +} + +h3 { + font-weight: 100; +} + +span { + color: #CB3541; + content: "\203A"; +} + +.ourYellow { + 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; +} + +.quot { + width: 80%; + padding-left: 10%; +} + +.form-control { + border: 2px solid grey; + padding: 5px 35px; +} \ No newline at end of file diff --git a/main.html b/main.html new file mode 100644 index 0000000..d3312fb --- /dev/null +++ b/main.html @@ -0,0 +1,78 @@ + + + + + + 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 From c1b8b0f32f821b8b47473216b556131ef57af1e3 Mon Sep 17 00:00:00 2001 From: YJohn Date: Fri, 23 Jun 2017 14:01:13 +0100 Subject: [PATCH 02/12] create a JS and edit the html and css file --- main.css | 12 ++++-------- main.html | 15 +++++++-------- main.js | 6 ++++++ 3 files changed, 17 insertions(+), 16 deletions(-) create mode 100644 main.js diff --git a/main.css b/main.css index f46a14c..a7eca64 100644 --- a/main.css +++ b/main.css @@ -43,7 +43,9 @@ h2 { color: #CB3541; font-weight: 100; } - +#news{ + font-weight: 100; +} h3 { font-weight: 100; } @@ -53,7 +55,7 @@ span { content: "\203A"; } -.ourYellow { +.focus { color: yellow; } a{ @@ -72,12 +74,6 @@ a{ border: none; color: black; } - -.quot { - width: 80%; - padding-left: 10%; -} - .form-control { border: 2px solid grey; padding: 5px 35px; diff --git a/main.html b/main.html index d3312fb..bbfa3ba 100644 --- a/main.html +++ b/main.html @@ -6,14 +6,12 @@ webDeveloper test - +
- -

CYF

@@ -35,7 +33,7 @@

What We Do

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

+

Our focus

  • Interactive
    • @@ -46,16 +44,16 @@

    Our focus

    click hear to download a PDF of our recent work

     -

    News

    -

    ›Show/Hide news item

    +

    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

    @@ -73,6 +71,7 @@

    More Information

+ \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 0000000..6a90af7 --- /dev/null +++ b/main.js @@ -0,0 +1,6 @@ +var main = document.querySelector('#main'); +main.addEventListener('click', showHideNews); +var hide = document.querySelector('.hideitem'); +function showHideNews(){ +showHide +} \ No newline at end of file From 687f794d426eedd6d7d54df04d8b924bc6cc8626 Mon Sep 17 00:00:00 2001 From: YJohn Date: Sat, 24 Jun 2017 01:55:53 +0100 Subject: [PATCH 03/12] create a DOM for hide and show paragraph --- main.css | 5 +++++ main.html | 13 +++++++------ main.js | 15 ++++++++++----- 3 files changed, 22 insertions(+), 11 deletions(-) diff --git a/main.css b/main.css index a7eca64..2e6dc93 100644 --- a/main.css +++ b/main.css @@ -46,6 +46,11 @@ h2 { #news{ font-weight: 100; } +#hideitem{ +font-style: italic; +border: none; +cursor: pointer; +} h3 { font-weight: 100; } diff --git a/main.html b/main.html index bbfa3ba..2da9d55 100644 --- a/main.html +++ b/main.html @@ -6,7 +6,7 @@ webDeveloper test - + @@ -42,11 +42,12 @@

Our focus

-

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 +

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.

diff --git a/main.js b/main.js index 6a90af7..95fa29b 100644 --- a/main.js +++ b/main.js @@ -1,6 +1,11 @@ -var main = document.querySelector('#main'); -main.addEventListener('click', showHideNews); -var hide = document.querySelector('.hideitem'); -function showHideNews(){ -showHide +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 = ''; + } } \ No newline at end of file From 5ccbc5661c5bb70cf11b05f1acced74052a4183e Mon Sep 17 00:00:00 2001 From: YJohn Date: Sat, 24 Jun 2017 21:57:01 +0100 Subject: [PATCH 04/12] created a valid form restriction --- main.html | 8 ++++---- main.js | 33 +++++++++++++++++++++++++++++++++ 2 files changed, 37 insertions(+), 4 deletions(-) diff --git a/main.html b/main.html index 2da9d55..075a7c7 100644 --- a/main.html +++ b/main.html @@ -61,14 +61,14 @@

More Information

items marked * are required fields


-
+

-
+

-

+

- +
diff --git a/main.js b/main.js index 95fa29b..48f31a3 100644 --- a/main.js +++ b/main.js @@ -8,4 +8,37 @@ function showHideNews(event) { } 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 = ''; + } + } \ No newline at end of file From 420ae989812b5984470d18bba9703a1ba5e00c4a Mon Sep 17 00:00:00 2001 From: YJohn Date: Sat, 24 Jun 2017 21:59:59 +0100 Subject: [PATCH 05/12] arrange the position of the style and html files --- creative.png => assets/creative.png | Bin main.js => js/main.js | 0 main.css => style/main.css | 0 3 files changed, 0 insertions(+), 0 deletions(-) rename creative.png => assets/creative.png (100%) rename main.js => js/main.js (100%) rename main.css => style/main.css (100%) diff --git a/creative.png b/assets/creative.png similarity index 100% rename from creative.png rename to assets/creative.png diff --git a/main.js b/js/main.js similarity index 100% rename from main.js rename to js/main.js diff --git a/main.css b/style/main.css similarity index 100% rename from main.css rename to style/main.css From 6b3ab681220bdb966928e754b2db71eae4e963ed Mon Sep 17 00:00:00 2001 From: YJohn Date: Sat, 24 Jun 2017 22:09:43 +0100 Subject: [PATCH 06/12] link the css and JS with the main html --- main.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/main.html b/main.html index 075a7c7..dedec60 100644 --- a/main.html +++ b/main.html @@ -5,7 +5,7 @@ webDeveloper test - + @@ -72,7 +72,7 @@

More Information

- + \ No newline at end of file From 43486aefa220d63770b520622898ded79d129c9d Mon Sep 17 00:00:00 2001 From: YJohn Date: Mon, 26 Jun 2017 23:23:04 +0100 Subject: [PATCH 07/12] add the assets folder and commited it --- .DS_Store | Bin 0 -> 6148 bytes assets/.DS_Store | Bin 0 -> 6148 bytes 2 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 .DS_Store create mode 100644 assets/.DS_Store diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..ba67cd7c2642ca0099f3e0d9f07ce9e0537afa21 GIT binary patch literal 6148 zcmeHK-HOvd6h71K?k0%X3!z@ljo?LDT6A?~5n}CL?1dm!^g?AfF~LUC%+jQmwN~;H z!uklliErTJ=r=zuNvpRaa!xt(&77Ps>3lPp$qR&^->{a8 z>;i?kM@hwTrrt!EiZ-%2@GmN$$8Lv0D)39FIevOl9Kvt?FlPRKBR5(UXKt*&MQ2%B zl>Pp9(b{Tn@9cWM@A+4~*W-y=jLWc`7sGJ&(zMbziCq1eQrTrajGm{-;-qu^k;=<3 z&68Oz{nd*!kJVzR=6PJ0`#cHD3ApA#C!OwcIk*H;fy2rouE2z) z0xeazBZjba#HGs%999-BorF7l2=`>+PAI}W9ru?eokU=fOICmtXezK}n;pIXAN~3K z-z0I16<`JaD+NS*G#(AnCAYV3bWZQJ5`GHTrt>O`mlRaYR*YP|72kjxLtN?#FmPB| RL;yimk;=XkMnNOjDZ3Zw#k1rEJC(fWTy|Ka`LCuJ`cNCp0s z0y3K2%%=RMsI7ya(^^~TxAaeAuB9{dE&=RlDL&oFE81pW4eT6^&T*p?^CF Date: Sat, 1 Jul 2017 11:01:46 +0100 Subject: [PATCH 08/12] change the main html to index --- main.html => index.html | 0 js/main.js | 22 +++++++++++++++++++++- 2 files changed, 21 insertions(+), 1 deletion(-) rename main.html => index.html (100%) diff --git a/main.html b/index.html similarity index 100% rename from main.html rename to index.html diff --git a/js/main.js b/js/main.js index 48f31a3..0b6d690 100644 --- a/js/main.js +++ b/js/main.js @@ -41,4 +41,24 @@ function validatFormFild() { contactPhone.value = ''; } -} \ No newline at end of file +} + +var xmlRequest = new XMLHttpRequest(); +xmlRequest.onreadystatechange = function(){ + if (xmlRequest.readystate === 4){ + if(xmlRequest.status === 200){ + var data = JSON.parse(xmlRequest.responseText); + var textBox = document.querySelector('#newsInfo'); + textBox.innerHTML = data[0].title + data[0].summary; + console.log(data[0].title); + console.log(data[0].summary); + }else{ + alert('there is an error'); + } + } +} +xmlRequest.open('Get', 'https://private-e99507-kabaros.apiary-mock.com/news'); +xmlRequest.send(); + +console.log(xmlRequest.status); +console.log(xmlRequest.statusText); \ No newline at end of file From ee096f40d5bacfb75e8befd0310b7b2064d2ccc6 Mon Sep 17 00:00:00 2001 From: YJohn Date: Sat, 1 Jul 2017 11:13:49 +0100 Subject: [PATCH 09/12] getInformation from requested button --- js/main.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/js/main.js b/js/main.js index 0b6d690..e295501 100644 --- a/js/main.js +++ b/js/main.js @@ -42,7 +42,8 @@ function validatFormFild() { } } - +var addNews = document.querySelector("#hideitem"); // Element that is going to call the action +addNews.addEventListener("click", xmlRequest); var xmlRequest = new XMLHttpRequest(); xmlRequest.onreadystatechange = function(){ if (xmlRequest.readystate === 4){ From 5c8afdf962a939b41c4c53c7254e55ae7dd7b5a0 Mon Sep 17 00:00:00 2001 From: YJohn Date: Wed, 5 Jul 2017 00:07:52 +0100 Subject: [PATCH 10/12] create AJAX on the web but doesn't work --- index.html | 5 +++-- js/main.js | 45 ++++++++++++++++++++++++++------------------- 2 files changed, 29 insertions(+), 21 deletions(-) diff --git a/index.html b/index.html index dedec60..68a7897 100644 --- a/index.html +++ b/index.html @@ -47,10 +47,11 @@

Our focus

News

›Show/Hide news item

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. vestibulum risus tellus, molesite et lorem quis, ultricies +

+

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."

diff --git a/js/main.js b/js/main.js index e295501..225eaa2 100644 --- a/js/main.js +++ b/js/main.js @@ -40,26 +40,33 @@ function validatFormFild() { emailAddress.value = ''; contactPhone.value = ''; } - } -var addNews = document.querySelector("#hideitem"); // Element that is going to call the action -addNews.addEventListener("click", xmlRequest); -var xmlRequest = new XMLHttpRequest(); -xmlRequest.onreadystatechange = function(){ - if (xmlRequest.readystate === 4){ - if(xmlRequest.status === 200){ - var data = JSON.parse(xmlRequest.responseText); - var textBox = document.querySelector('#newsInfo'); - textBox.innerHTML = data[0].title + data[0].summary; - console.log(data[0].title); - console.log(data[0].summary); - }else{ - alert('there is an error'); + + +var btn = document.getElementById('hideitem'); +btn.addEventListener('click', ourRequest); +var ourRequest = new XMLHttpRequest(); +var addContainer = document.getElementById('news'); + +ourRequest.onreadystatechange = function () { + var ourData = JSON.parse(ourRequest.responseText); + if (ourRequest.readyState === 4) { + if (ourRequest.status === 200) { + renderHTML(ourData).innerHTML = ourRequest.responseText; + } else { + renderHTML(ourData).innerHTML = 'An error occurred during your request: ' + ourRequest.status + ' ' + ourRequest.statusText; } + } -} -xmlRequest.open('Get', 'https://private-e99507-kabaros.apiary-mock.com/news'); -xmlRequest.send(); + ourRequest.open('GET', 'https://private-e99507-kabaros.apiary-mock.com/news'); + ourRequest.setRequestHeader('content-type', 'application/x-www-form-urlencoded'); + ourRequest.send(); +}; +function renderHTML(ourData) { + var htmlString = ""; + for (i = 0; i < ourData.length; i++) { + htmlString += "
" + ourData[i].title + "
" + "

" + data[i].summary + "

"; + } + displayInfo.insertAdjacentHTML("beforeend", htmlString); -console.log(xmlRequest.status); -console.log(xmlRequest.statusText); \ No newline at end of file +} \ No newline at end of file From 0aa708fab9ab11ae48dc0cd675437c6dd68a2307 Mon Sep 17 00:00:00 2001 From: YJohn Date: Thu, 6 Jul 2017 17:42:07 +0100 Subject: [PATCH 11/12] put setRequestHeader out side the function --- js/main.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/main.js b/js/main.js index 225eaa2..fbc1753 100644 --- a/js/main.js +++ b/js/main.js @@ -58,15 +58,15 @@ ourRequest.onreadystatechange = function () { } } +}; ourRequest.open('GET', 'https://private-e99507-kabaros.apiary-mock.com/news'); ourRequest.setRequestHeader('content-type', 'application/x-www-form-urlencoded'); ourRequest.send(); -}; function renderHTML(ourData) { var htmlString = ""; for (i = 0; i < ourData.length; i++) { htmlString += "
" + ourData[i].title + "
" + "

" + data[i].summary + "

"; } - displayInfo.insertAdjacentHTML("beforeend", htmlString); + addContainer.insertAdjacentHTML("beforeend", htmlString); } \ No newline at end of file From 06988538448ef757093f3ed9de3b628733ec3987 Mon Sep 17 00:00:00 2001 From: YJohn Date: Thu, 6 Jul 2017 18:33:18 +0100 Subject: [PATCH 12/12] put the URL in a new variable --- js/main.js | 36 +++++++++++++++++++----------------- 1 file changed, 19 insertions(+), 17 deletions(-) diff --git a/js/main.js b/js/main.js index fbc1753..7b171c7 100644 --- a/js/main.js +++ b/js/main.js @@ -42,31 +42,33 @@ function validatFormFild() { } } +var addNews = document.querySelector("#hideitem"); +addNews.addEventListener("click", ourRequest); -var btn = document.getElementById('hideitem'); -btn.addEventListener('click', ourRequest); -var ourRequest = new XMLHttpRequest(); -var addContainer = document.getElementById('news'); +var ourRequest = new XMLHttpRequest(); +var url = "https://private-e99507-kabaros.apiary-mock.com/news"; +var addContainer = document.getElementById("news"); ourRequest.onreadystatechange = function () { - var ourData = JSON.parse(ourRequest.responseText); - if (ourRequest.readyState === 4) { - if (ourRequest.status === 200) { - renderHTML(ourData).innerHTML = ourRequest.responseText; + var data = JSON.parse(ourRequest.responseText); + if (ourRequest.readyState === 4) { + if (ourRequest.status === 200) { + renderHTML(data).innerHTML = ourRequest.responseText; } else { - renderHTML(ourData).innerHTML = 'An error occurred during your request: ' + ourRequest.status + ' ' + ourRequest.statusText; + renderHTML(data).innerHTML = 'An error occurred during your request: ' + + ourRequest.status + ' ' + ourRequest.statusText; } - } }; - ourRequest.open('GET', 'https://private-e99507-kabaros.apiary-mock.com/news'); - ourRequest.setRequestHeader('content-type', 'application/x-www-form-urlencoded'); - ourRequest.send(); -function renderHTML(ourData) { + +ourRequest.open("GET", url); +ourRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); +ourRequest.send(); + +function renderHTML(data) { var htmlString = ""; - for (i = 0; i < ourData.length; i++) { - htmlString += "
" + ourData[i].title + "
" + "

" + data[i].summary + "

"; + for (i = 0; i < data.length; i++) { + htmlString += "
" + data[i].title + "
" + "

" + data[i].summary + "

"; } addContainer.insertAdjacentHTML("beforeend", htmlString); - } \ No newline at end of file