From 7c74e7dd802799cc0403c5eb75e891bae42694fe Mon Sep 17 00:00:00 2001 From: Anthonythuo Date: Thu, 22 Jun 2017 18:34:14 +0100 Subject: [PATCH 1/5] My current changes to my WebDevelopertest --- WebDeveloperExam.html | 62 +++++++++++++++++++++++++++++++++++++++++++ assets/exam css | 3 +++ event.js | 8 ++++++ styles/style.css | 14 ++++++++++ 4 files changed, 87 insertions(+) create mode 100644 WebDeveloperExam.html create mode 100644 assets/exam css create mode 100644 event.js create mode 100644 styles/style.css diff --git a/WebDeveloperExam.html b/WebDeveloperExam.html new file mode 100644 index 0000000..21c5cf4 --- /dev/null +++ b/WebDeveloperExam.html @@ -0,0 +1,62 @@ + + + + + + + + + CYF + + + + + +
CYF
+ + + +

About CYF

+ +

What We Do

+

Lorem Ipsum é um texto modelo da indústria tipográfica e de impressão. O Lorem Ipsum tem vindo a ser o texto padrão usado por estas indústrias desde o ano de 1500, quando uma misturou os caracteres de um texto para criar um espécime de livro. Este texto não só sobreviveu 5 séculos, mas também o salto para a tipografia electrónica, mantendo-se essencialmente inalterada

+

Our Focus

+ + Click here to download a pdf of our recent work. +

News

+ +
show/hide news item
+

Ao contrário da crença popular, o Lorem Ipsum não é simplesmente texto aleatório. Tem raízes numa peça de literatura clássica em Latim, de 45 AC, tornando-o com mais de 2000 anos. Richard McClintock, um professor de Latim no Colégio Hampden-Sydney, na Virgínia, procurou uma das palavras em Latim mais obscuras (consectetur) numa passagem Lorem Ipsum, e atravessando as cidades do mundo na literatura clássica, descobriu a sua origem.

+ +
More Information
+

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

+
+ contact name:
+
+ contact email address:
+
+ contact Phone Number:
+
+ + +
+ + + + + + + + + + + \ No newline at end of file diff --git a/assets/exam css b/assets/exam css new file mode 100644 index 0000000..46cd440 --- /dev/null +++ b/assets/exam css @@ -0,0 +1,3 @@ +body{ + background; +} \ No newline at end of file diff --git a/event.js b/event.js new file mode 100644 index 0000000..b0fa2de --- /dev/null +++ b/event.js @@ -0,0 +1,8 @@ +var button =document.querySelector('#newsButton'); +button.addEventListener('click',doSomething); + +function doSomething (){ + //if my

is showing hide it,else show it +var news = document.querySelector('#newsInfo'); + +} diff --git a/styles/style.css b/styles/style.css new file mode 100644 index 0000000..33f1746 --- /dev/null +++ b/styles/style.css @@ -0,0 +1,14 @@ +body { + background-image:url(file:///C:/Users/anton/Desktop/project/WebDeveloperTest/assets/background.png); + color: white; +} +header{ + font-size: 40px; + color: white +} +h3{ + color: yellow; +} +a{ + +} \ No newline at end of file From f32bf3c951fd4d7ec1cabc16316a76a8d017bcc7 Mon Sep 17 00:00:00 2001 From: Anthonythuo Date: Tue, 27 Jun 2017 17:40:25 +0100 Subject: [PATCH 2/5] Anthony's renamed index file,changed background image --- index.html | 62 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 62 insertions(+) create mode 100644 index.html diff --git a/index.html b/index.html new file mode 100644 index 0000000..21c5cf4 --- /dev/null +++ b/index.html @@ -0,0 +1,62 @@ + + + + + + + + + CYF + + + + + +

CYF
+ + + +

About CYF

+ +

What We Do

+

Lorem Ipsum é um texto modelo da indústria tipográfica e de impressão. O Lorem Ipsum tem vindo a ser o texto padrão usado por estas indústrias desde o ano de 1500, quando uma misturou os caracteres de um texto para criar um espécime de livro. Este texto não só sobreviveu 5 séculos, mas também o salto para a tipografia electrónica, mantendo-se essencialmente inalterada

+

Our Focus

+ + Click here to download a pdf of our recent work. +

News

+ +
show/hide news item
+

Ao contrário da crença popular, o Lorem Ipsum não é simplesmente texto aleatório. Tem raízes numa peça de literatura clássica em Latim, de 45 AC, tornando-o com mais de 2000 anos. Richard McClintock, um professor de Latim no Colégio Hampden-Sydney, na Virgínia, procurou uma das palavras em Latim mais obscuras (consectetur) numa passagem Lorem Ipsum, e atravessando as cidades do mundo na literatura clássica, descobriu a sua origem.

+ +
More Information
+

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

+
+ contact name:
+
+ contact email address:
+
+ contact Phone Number:
+
+ + +
+ + + + + + + + + + + \ No newline at end of file From b2a7ab3732ef150ba0a825137553538080a6d465 Mon Sep 17 00:00:00 2001 From: Anthonythuo Date: Tue, 27 Jun 2017 17:43:16 +0100 Subject: [PATCH 3/5] Anthony's renamed index file,changed background image --- WebDeveloperExam.html | 62 ------------------------------------------- styles/style.css | 7 +++-- 2 files changed, 3 insertions(+), 66 deletions(-) delete mode 100644 WebDeveloperExam.html diff --git a/WebDeveloperExam.html b/WebDeveloperExam.html deleted file mode 100644 index 21c5cf4..0000000 --- a/WebDeveloperExam.html +++ /dev/null @@ -1,62 +0,0 @@ - - - - - - - - - CYF - - - - - -
CYF
- - - -

About CYF

- -

What We Do

-

Lorem Ipsum é um texto modelo da indústria tipográfica e de impressão. O Lorem Ipsum tem vindo a ser o texto padrão usado por estas indústrias desde o ano de 1500, quando uma misturou os caracteres de um texto para criar um espécime de livro. Este texto não só sobreviveu 5 séculos, mas também o salto para a tipografia electrónica, mantendo-se essencialmente inalterada

-

Our Focus

- - Click here to download a pdf of our recent work. -

News

- -
show/hide news item
-

Ao contrário da crença popular, o Lorem Ipsum não é simplesmente texto aleatório. Tem raízes numa peça de literatura clássica em Latim, de 45 AC, tornando-o com mais de 2000 anos. Richard McClintock, um professor de Latim no Colégio Hampden-Sydney, na Virgínia, procurou uma das palavras em Latim mais obscuras (consectetur) numa passagem Lorem Ipsum, e atravessando as cidades do mundo na literatura clássica, descobriu a sua origem.

- -
More Information
-

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

-
- contact name:
-
- contact email address:
-
- contact Phone Number:
-
- - -
- - - - - - - - - - - \ No newline at end of file diff --git a/styles/style.css b/styles/style.css index 33f1746..c8f0f20 100644 --- a/styles/style.css +++ b/styles/style.css @@ -1,14 +1,13 @@ body { - background-image:url(file:///C:/Users/anton/Desktop/project/WebDeveloperTest/assets/background.png); + background-image:url(../assets/background.png); color: white; } header{ font-size: 40px; - color: white + color: white; } h3{ color: yellow; } -a{ -} \ No newline at end of file + From 5f1876e14dc78a55fa8c7c25fc890d43f68c89eb Mon Sep 17 00:00:00 2001 From: Anthonythuo Date: Sat, 1 Jul 2017 11:15:55 +0100 Subject: [PATCH 4/5] added news Api event to my index html --- event.js | 41 ++++++++++++++++++++--- index.html | 84 ++++++++++++++++++++++++++---------------------- styles/style.css | 25 ++++++++++++++ 3 files changed, 108 insertions(+), 42 deletions(-) diff --git a/event.js b/event.js index b0fa2de..21667ac 100644 --- a/event.js +++ b/event.js @@ -1,8 +1,41 @@ -var button =document.querySelector('#newsButton'); -button.addEventListener('click',doSomething); +var button = document.querySelector('#newsButton'); +button.addEventListener('click', doSomething); -function doSomething (){ +function doSomething() { //if my

is showing hide it,else show it -var news = document.querySelector('#newsInfo'); + var news = document.querySelector('#newsInfo'); + if (news.style.display === 'none') { + news.style.display = 'block'; + } else { + news.style.display = 'none'; + } } + + +var xhr = new XMLHttpRequest(); +xhr.onreadystatechange = function () { + if (xhr.readyState === 4) { + if (xhr.status === 200) { + var data = JSON.parse(xhr.responseText); + var textBox = document.querySelector('#newsInfo'); + var heading = document.createElement('h2'); + var paragraph = document.createElement('p'); + heading.innerText = data[0].title; + paragraph.innerText = data[0].summary; + textBox.appendChild(heading); + textBox.appendChild(paragraph); + // textBox.innerHTML = data[0].title + data[0].summary; + + } else { + //there is an error + } + } +} + + +xhr.open('GET', 'https://private-e99507-kabaros.apiary-mock.com/news'); +xhr.send(); + +console.log(xhr.status); +console.log(xhr.statusText); \ No newline at end of file diff --git a/index.html b/index.html index 21c5cf4..b4fd7d5 100644 --- a/index.html +++ b/index.html @@ -15,48 +15,56 @@

CYF

About CYF

- -

What We Do

-

Lorem Ipsum é um texto modelo da indústria tipográfica e de impressão. O Lorem Ipsum tem vindo a ser o texto padrão usado por estas indústrias desde o ano de 1500, quando uma misturou os caracteres de um texto para criar um espécime de livro. Este texto não só sobreviveu 5 séculos, mas também o salto para a tipografia electrónica, mantendo-se essencialmente inalterada

-

Our Focus

-
    -
  • Interactive
    • -
  • Mobile
    • -
  • Technology
    • -
- Click here to download a pdf of our recent work. -

News

- -
show/hide news item
-

Ao contrário da crença popular, o Lorem Ipsum não é simplesmente texto aleatório. Tem raízes numa peça de literatura clássica em Latim, de 45 AC, tornando-o com mais de 2000 anos. Richard McClintock, um professor de Latim no Colégio Hampden-Sydney, na Virgínia, procurou uma das palavras em Latim mais obscuras (consectetur) numa passagem Lorem Ipsum, e atravessando as cidades do mundo na literatura clássica, descobriu a sua origem.

- -
More Information
-

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

-
- contact name:
-
- contact email address:
-
- contact Phone Number:
-
- - -
- - - - - - - - +
+
+

What We Do

+

CYF is a fictitious company-Lorem Ipsum é um texto modelo da indústria tipográfica e de impressão. O Lorem Ipsum tem + vindo a ser o texto padrão usado por estas indústrias desde o ano de 1500, quando uma misturou os caracteres de um + texto para criar um espécime de livro. Este texto não só sobreviveu 5 séculos, mas também o salto para a tipografia + electrónica, mantendo-se essencialmente inalterada +

+

Our Focus

+
    +
  • Interactive
    • +
  • Mobile
    • +
  • Technology
    • +
+ Click here to download a pdf of our recent work. +

News

+ +
show/hide news item
+

Ao contrário da crença popular, o Lorem Ipsum não é simplesmente texto aleatório. Tem raízes numa peça de literatura + clássica em Latim, de 45 AC, tornando-o com mais de 2000 anos. Richard McClintock, um professor de Latim no Colégio + Hampden-Sydney, na Virgínia, procurou uma das palavras em Latim mais obscuras (consectetur) numa passagem Lorem Ipsum, + e atravessando as cidades do mundo na literatura clássica, descobriu a sua origem.

+
+
More Information
+

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

+ items marked * are required fields +
+ contact name*:
+
contact email address*:
+
contact Phone Number:
+
+ + + +
+
+ + + + + + + \ No newline at end of file diff --git a/styles/style.css b/styles/style.css index c8f0f20..a28c68d 100644 --- a/styles/style.css +++ b/styles/style.css @@ -1,13 +1,38 @@ body { background-image:url(../assets/background.png); color: white; + font-family: serif; + background-size: 100% 100%; + background-repeat: no-repeat; + } header{ font-size: 40px; color: white; } +h1{ +color: #CD5C5C; +} h3{ color: yellow; } +.address{ + font-style: italic; + color: yellow; +} +.navBar{ +background: linear-gradient(white,black); +padding-right: 10px; +border-right: 2px solid ; +border-bottom: 2px solid; +border-left: 2px solid; +border-top: 2px solid; +} +a{ + color: white; +} +h6{ + font-size: 20px; +} From 08fd67a881c36c0374ed3465c0f6ae184e9cac75 Mon Sep 17 00:00:00 2001 From: Anthonythuo Date: Sat, 1 Jul 2017 17:10:03 +0100 Subject: [PATCH 5/5] completed populating news with an ajax call --- event.js | 22 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/event.js b/event.js index 21667ac..c84f08e 100644 --- a/event.js +++ b/event.js @@ -18,17 +18,21 @@ xhr.onreadystatechange = function () { if (xhr.readyState === 4) { if (xhr.status === 200) { var data = JSON.parse(xhr.responseText); + console.log(data) var textBox = document.querySelector('#newsInfo'); - var heading = document.createElement('h2'); - var paragraph = document.createElement('p'); - heading.innerText = data[0].title; - paragraph.innerText = data[0].summary; - textBox.appendChild(heading); - textBox.appendChild(paragraph); - // textBox.innerHTML = data[0].title + data[0].summary; - + + for (var i = 0; i < data.length; i++) { + var heading = document.createElement('h2'); + var paragraph = document.createElement('p'); + heading.innerText = data[i].title; + paragraph.innerText = data[i].summary; + textBox.appendChild(heading); + textBox.appendChild(paragraph); + + } + } else { - //there is an error + } } }