From a0c94de6f36f5f70c74d91ce783e3259bd8869ce Mon Sep 17 00:00:00 2001 From: Kate Date: Sun, 16 Sep 2018 20:41:33 +0100 Subject: [PATCH 1/9] basic exercise --- news reader.css | 32 ++++++++++++++++++++++++++++++++ news reader.html | 28 ++++++++++++++++++++++++++++ newsReader.js | 37 +++++++++++++++++++++++++++++++++++++ 3 files changed, 97 insertions(+) create mode 100644 news reader.css create mode 100644 news reader.html create mode 100644 newsReader.js diff --git a/news reader.css b/news reader.css new file mode 100644 index 0000000..40b778b --- /dev/null +++ b/news reader.css @@ -0,0 +1,32 @@ +* { + box-sizing: inherit; +} + +body { + display: flex; + box-sizing: border-box; + margin: 20px; + font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; + flex-direction: column; + justify-content: space-around; + padding: 10%; +} + +.articleList{ + + flex-direction: column; + justify-content: center; + height: 100vh; + display: flex; + flex-flow: row wrap; + +} + +ul{ + list-style-type: none; + margin: 0; + padding: 0; +} +.title{ + font-size: 2.5vh; +} diff --git a/news reader.html b/news reader.html new file mode 100644 index 0000000..5b68d6b --- /dev/null +++ b/news reader.html @@ -0,0 +1,28 @@ + + + + + + + News Reader + + +
+

News Reader

+

This is your daily news feed

+
+
+

Top headlines

+

This is your daily news feed

+
+
+ + + + + + + + + + diff --git a/newsReader.js b/newsReader.js new file mode 100644 index 0000000..c0b6089 --- /dev/null +++ b/newsReader.js @@ -0,0 +1,37 @@ +// const news=document.createElement("p"); +const topHeadlines=document.querySelector(".topHeadlines"); +const articleList=document.querySelector(".articleList"); + + +const url = 'https://newsapi.org/v2/top-headlines?' + + 'country=us&' + + 'apiKey=84e1f3efc2a148dca439f1b5ad3cd201'; +let req = new Request(url); +fetch(req) + .then(response => { + // console.log(response.json()); + return response.json() + }) + .then(response => { + console.log(response); + response.articles.forEach(function(item){ + const newsDetail=document.createElement("ul"); + newsDetail.classList.add("onePieceofNews"); + if(item.description!==null){ + newsDetail.innerHTML=`
  • ${item.title}
    • + image +
  • ${item.description}
    • +
  • ${item.source.name}
    • +
  • ${item.publishedAt}
    • + Read more + `; + + console.log(newsDetail.innerHTML); + + articleList.appendChild(newsDetail); + } + return; + }) + + }) + .catch(error => console.log(error)); From 4494669d90f6b0ef7fb986679d97172260f10865 Mon Sep 17 00:00:00 2001 From: Kate Date: Sun, 16 Sep 2018 21:03:17 +0100 Subject: [PATCH 2/9] styling --- news reader.css | 32 +++++++++++++++++++++++++++++++- news reader.html | 4 ++-- 2 files changed, 33 insertions(+), 3 deletions(-) diff --git a/news reader.css b/news reader.css index 40b778b..8e10a9d 100644 --- a/news reader.css +++ b/news reader.css @@ -10,8 +10,15 @@ body { flex-direction: column; justify-content: space-around; padding: 10%; + padding-top: 5%; } +.header{ + font-size: 2.5vh; +} +h2{ + font-size: 2.5vh; +} .articleList{ flex-direction: column; @@ -19,14 +26,37 @@ body { height: 100vh; display: flex; flex-flow: row wrap; - } ul{ list-style-type: none; margin: 0; padding: 0; + padding-bottom:40px; + +} + +li{ + padding: 0; + padding-bottom: 8px; } .title{ font-size: 2.5vh; } +.description{ + font-size: 2.3vh; +} + +@media(max-width:768px){ + img{ + display: none; + } +} + +@media(max-width:960px){ + +} + +@media (max-width: 1200px) { + +} diff --git a/news reader.html b/news reader.html index 5b68d6b..053f097 100644 --- a/news reader.html +++ b/news reader.html @@ -9,11 +9,11 @@

    News Reader

    -

    This is your daily news feed

    +

    Here is your daily news feed

    Top headlines

    -

    This is your daily news feed

    +
    From 546895294feba787e14e9b9f4fbe04692a837fac Mon Sep 17 00:00:00 2001 From: Kate Date: Mon, 17 Sep 2018 00:19:59 +0100 Subject: [PATCH 3/9] strech exercise --- news reader.css | 19 ++++++++++-------- news reader.html | 5 ++++- newsReader.js | 51 ++++++++++++++++++++++++++++++++++++++++++++---- 3 files changed, 62 insertions(+), 13 deletions(-) diff --git a/news reader.css b/news reader.css index 8e10a9d..02fe7b0 100644 --- a/news reader.css +++ b/news reader.css @@ -47,16 +47,19 @@ li{ font-size: 2.3vh; } +button{ + background-color: #4CAF50; + border: none; + color: white; + padding: 15px 32px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 25px; +} + @media(max-width:768px){ img{ display: none; } } - -@media(max-width:960px){ - -} - -@media (max-width: 1200px) { - -} diff --git a/news reader.html b/news reader.html index 053f097..66275e3 100644 --- a/news reader.html +++ b/news reader.html @@ -14,7 +14,9 @@

    News Reader

    Top headlines

    -
    + +
    +
    @@ -23,6 +25,7 @@

    Top headlines

    + diff --git a/newsReader.js b/newsReader.js index c0b6089..3c7acd8 100644 --- a/newsReader.js +++ b/newsReader.js @@ -1,10 +1,13 @@ // const news=document.createElement("p"); const topHeadlines=document.querySelector(".topHeadlines"); const articleList=document.querySelector(".articleList"); +const nextPageButton=document.querySelector(".nextPage"); -const url = 'https://newsapi.org/v2/top-headlines?' + - 'country=us&' + +let url = 'https://newsapi.org/v2/top-headlines?' + + 'country=gb&' + + 'pageSize=5&'+ + 'page=1&'+ 'apiKey=84e1f3efc2a148dca439f1b5ad3cd201'; let req = new Request(url); fetch(req) @@ -13,11 +16,50 @@ fetch(req) return response.json() }) .then(response => { - console.log(response); + let i=1 response.articles.forEach(function(item){ const newsDetail=document.createElement("ul"); newsDetail.classList.add("onePieceofNews"); + newsDetail.setAttribute("id",i) + if(item.description!==null){ + newsDetail.innerHTML=`
  • ${item.title}
    • + image +
  • ${item.description}
    • +
  • ${item.source.name}
    • +
  • ${item.publishedAt}
    • + Read more + `; + + + + articleList.appendChild(newsDetail); + i++; + } + return; + }) + + }) + .catch(error => console.log(error)); + +let p=1 +nextPageButton.onclick=function(event) { + p++; + url = `https://newsapi.org/v2/top-headlines?country=gb&pageSize=5&page=${p}&apiKey=84e1f3efc2a148dca439f1b5ad3cd201`; + +req = new Request(url); +fetch(req) + .then(response => { + // console.log(response.json()); + return response.json() + }) + .then(response => { + console.log(response); + + let i=1; + response.articles.forEach(function(item){ + if(item.description!==null){ + newsDetail=document.getElementById(`${i}`) newsDetail.innerHTML=`
  • ${item.title}
    • image
  • ${item.description}
    • @@ -26,12 +68,13 @@ fetch(req) Read more `; - console.log(newsDetail.innerHTML); articleList.appendChild(newsDetail); + i++; } return; }) }) .catch(error => console.log(error)); + } From 84869503069ec47a52879abd65cb75f0080dbcb9 Mon Sep 17 00:00:00 2001 From: Kate Date: Mon, 17 Sep 2018 00:30:13 +0100 Subject: [PATCH 4/9] scroll to top --- news reader.css | 3 +++ news reader.html | 2 +- newsReader.js | 3 ++- 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/news reader.css b/news reader.css index 02fe7b0..199bbe8 100644 --- a/news reader.css +++ b/news reader.css @@ -56,6 +56,9 @@ button{ text-decoration: none; display: inline-block; font-size: 25px; + position: fixed; + bottom: 0px; + right: 0px; } @media(max-width:768px){ diff --git a/news reader.html b/news reader.html index 66275e3..493bdf2 100644 --- a/news reader.html +++ b/news reader.html @@ -14,10 +14,10 @@

    News Reader

    Top headlines

    -
    + diff --git a/newsReader.js b/newsReader.js index 3c7acd8..d0ca90e 100644 --- a/newsReader.js +++ b/newsReader.js @@ -69,8 +69,9 @@ fetch(req) `; - articleList.appendChild(newsDetail); + i++; + document.documentElement.scrollTop = 0; } return; }) From 32ba4e1479db32f9aec54839d5056e6e7fddf458 Mon Sep 17 00:00:00 2001 From: Kate Date: Mon, 17 Sep 2018 00:47:35 +0100 Subject: [PATCH 5/9] heroku setup --- news reader.css | 68 ------------------------------------------------ news reader.html | 31 ---------------------- 2 files changed, 99 deletions(-) delete mode 100644 news reader.css delete mode 100644 news reader.html diff --git a/news reader.css b/news reader.css deleted file mode 100644 index 199bbe8..0000000 --- a/news reader.css +++ /dev/null @@ -1,68 +0,0 @@ -* { - box-sizing: inherit; -} - -body { - display: flex; - box-sizing: border-box; - margin: 20px; - font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; - flex-direction: column; - justify-content: space-around; - padding: 10%; - padding-top: 5%; -} - -.header{ - font-size: 2.5vh; -} -h2{ - font-size: 2.5vh; -} -.articleList{ - - flex-direction: column; - justify-content: center; - height: 100vh; - display: flex; - flex-flow: row wrap; -} - -ul{ - list-style-type: none; - margin: 0; - padding: 0; - padding-bottom:40px; - -} - -li{ - padding: 0; - padding-bottom: 8px; -} -.title{ - font-size: 2.5vh; -} -.description{ - font-size: 2.3vh; -} - -button{ - background-color: #4CAF50; - border: none; - color: white; - padding: 15px 32px; - text-align: center; - text-decoration: none; - display: inline-block; - font-size: 25px; - position: fixed; - bottom: 0px; - right: 0px; -} - -@media(max-width:768px){ - img{ - display: none; - } -} diff --git a/news reader.html b/news reader.html deleted file mode 100644 index 493bdf2..0000000 --- a/news reader.html +++ /dev/null @@ -1,31 +0,0 @@ - - - - - - - News Reader - - -
    -

    News Reader

    -

    Here is your daily news feed

    -
    -
    -

    Top headlines

    - -
    -
    -
    - - - - - - - - - - - - From fd7b381b7c7d0b56d6895fe814caeca81e3a9cc6 Mon Sep 17 00:00:00 2001 From: Kate Date: Mon, 17 Sep 2018 00:50:06 +0100 Subject: [PATCH 6/9] bug fix --- composer.json | 1 + index.html | 31 +++++++++++++++++++++++ index.php | 1 + newsReader.css | 68 ++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 101 insertions(+) create mode 100644 composer.json create mode 100644 index.html create mode 100644 index.php create mode 100644 newsReader.css diff --git a/composer.json b/composer.json new file mode 100644 index 0000000..0967ef4 --- /dev/null +++ b/composer.json @@ -0,0 +1 @@ +{} diff --git a/index.html b/index.html new file mode 100644 index 0000000..b95a1d2 --- /dev/null +++ b/index.html @@ -0,0 +1,31 @@ + + + + + + + News Reader + + +
    +

    News Reader

    +

    Here is your daily news feed

    +
    +
    +

    Top headlines

    + +
    +
    +
    + + + + + + + + + + + + diff --git a/index.php b/index.php new file mode 100644 index 0000000..99c96b1 --- /dev/null +++ b/index.php @@ -0,0 +1 @@ + diff --git a/newsReader.css b/newsReader.css new file mode 100644 index 0000000..208d97a --- /dev/null +++ b/newsReader.css @@ -0,0 +1,68 @@ +* { + box-sizing: inherit; +} + +body { + display: flex; + box-sizing: border-box; + margin: 20px; + font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; + flex-direction: column; + justify-content: space-around; + padding: 10%; + padding-top: 5%; +} + +.header{ + font-size: 2.5vh; +} +h2{ + font-size: 2.5vh; +} +.articleList{ + + flex-direction: column; + justify-content: center; + height: 100vh; + display: flex; + flex-flow: row wrap; +} + +ul{ + list-style-type: none; + margin: 0; + padding: 0; + padding-bottom:40px; + +} + +li{ + padding: 0; + padding-bottom: 8px; +} +.title{ + font-size: 2.5vh; +} +.description{ + font-size: 2.3vh; +} + +button{ + background-color: #4CAF50; + border: none; + color: white; + padding: 15px 32px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 25px; + position: fixed; + bottom: 0px; + right: 0px; +} + +@media(max-width:768px){ + img{ + display: none; + } +} From be3b4e66aefaf4afbe98845e47a8d9aa5975fede Mon Sep 17 00:00:00 2001 From: Kate Date: Mon, 17 Sep 2018 00:53:40 +0100 Subject: [PATCH 7/9] update link --- README.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/README.md b/README.md index e062a87..03d0040 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,10 @@ +You can view this app live here: + https://mysterious-journey-19262.herokuapp.com/ + + # Responsive News Reader + Let's create a responsive news reader website. To get the latest news the app will display we are going to use [News API](https://newsapi.org/). You will need to register with the service to obtain an API key. ## Objectives From 190865d5ad9bf93534855e3a71d6d5fd771ff2e1 Mon Sep 17 00:00:00 2001 From: Kate Date: Mon, 17 Sep 2018 12:25:56 +0100 Subject: [PATCH 8/9] search function --- README.md | 1 + index.html | 4 +++ newsReader.css | 25 ++++++++++++++++-- newsReader.js | 72 +++++++++++++++++++++++++++++++++++++++++--------- 4 files changed, 87 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index 03d0040..811e566 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,7 @@ You can view this app live here: https://mysterious-journey-19262.herokuapp.com/ + # Responsive News Reader diff --git a/index.html b/index.html index b95a1d2..64a0060 100644 --- a/index.html +++ b/index.html @@ -12,6 +12,10 @@

    News Reader

    Here is your daily news feed

    +
    + + +

    Top headlines

    diff --git a/newsReader.css b/newsReader.css index 208d97a..f8bbfee 100644 --- a/newsReader.css +++ b/newsReader.css @@ -13,14 +13,35 @@ body { padding-top: 5%; } + .header{ font-size: 2.5vh; } + + +input[type=text]{ + font-size: 16px; + border-color: #e7e7e7; + border-radius: 22px; + border-style: solid; + padding: 12px; + width: 70%; +} + +input[type=submit]{ + font-size: 16px; + background-color: #e7e7e7; + color: black; + border-radius: 20px; + padding: 12px; + border-color: #e7e7e7; + width: 25%; +} + h2{ font-size: 2.5vh; } .articleList{ - flex-direction: column; justify-content: center; height: 100vh; @@ -48,7 +69,7 @@ li{ } button{ - background-color: #4CAF50; + background-color: #4CAF50; border: none; color: white; padding: 15px 32px; diff --git a/newsReader.js b/newsReader.js index d0ca90e..0d1a3cb 100644 --- a/newsReader.js +++ b/newsReader.js @@ -2,20 +2,26 @@ const topHeadlines=document.querySelector(".topHeadlines"); const articleList=document.querySelector(".articleList"); const nextPageButton=document.querySelector(".nextPage"); +const searchForm=document.querySelector(".searchForm"); +const keyword=document.querySelector(".keyword"); +let p=1; +let urlBase = 'https://newsapi.org/v2/' +let queries = 'top-headlines?' + + 'country=gb&' +let page = `page=${p}&`; +let pageSize = 'pageSize=5&'; +let apiKey = 'apiKey=84e1f3efc2a148dca439f1b5ad3cd201'; +let url = urlBase + queries + pageSize + page + apiKey; -let url = 'https://newsapi.org/v2/top-headlines?' + - 'country=gb&' + - 'pageSize=5&'+ - 'page=1&'+ - 'apiKey=84e1f3efc2a148dca439f1b5ad3cd201'; let req = new Request(url); fetch(req) .then(response => { - // console.log(response.json()); + return response.json() }) .then(response => { + console.log(response); let i=1 response.articles.forEach(function(item){ const newsDetail=document.createElement("ul"); @@ -30,8 +36,6 @@ fetch(req) Read more `; - - articleList.appendChild(newsDetail); i++; } @@ -41,21 +45,22 @@ fetch(req) }) .catch(error => console.log(error)); -let p=1 + nextPageButton.onclick=function(event) { p++; - url = `https://newsapi.org/v2/top-headlines?country=gb&pageSize=5&page=${p}&apiKey=84e1f3efc2a148dca439f1b5ad3cd201`; + page = `page=${p}&` + url = urlBase + queries + pageSize + page + apiKey; + console.log("url: ", url); req = new Request(url); fetch(req) .then(response => { - // console.log(response.json()); return response.json() }) .then(response => { console.log(response); - let i=1; + i=1; response.articles.forEach(function(item){ if(item.description!==null){ @@ -69,7 +74,7 @@ fetch(req) `; - + i++; document.documentElement.scrollTop = 0; } @@ -79,3 +84,44 @@ fetch(req) }) .catch(error => console.log(error)); } + +searchForm.addEventListener('submit', function(event){ + event.preventDefault(); + p=1; + page = `page=${p}&` + queries = `everything?q=${keyword.value}&from=2018-09-16&to=2018-09-16&sortBy=popularity&`; + url = urlBase + queries + pageSize + page + apiKey; + console.log("url: ", url); + + req = new Request(url); + fetch(req) + .then(response => { + // console.log(response.json()); + return response.json() + }) + .then(response => { + console.log(response); + + i=1; + response.articles.forEach(function(item){ + + if(item.description!==null){ + newsDetail=document.getElementById(`${i}`) + newsDetail.innerHTML=`
  • ${item.title}
    • + image +
  • ${item.description}
    • +
  • ${item.source.name}
    • +
  • ${item.publishedAt}
    • + Read more + `; + + i++; + document.documentElement.scrollTop = 0; + } + return; + }) + + }) + .catch(error => console.log(error)); + +}) From fd38c9d0bb79268619f5cee834389d7ff9adf81c Mon Sep 17 00:00:00 2001 From: Kate Date: Tue, 18 Sep 2018 17:50:17 +0100 Subject: [PATCH 9/9] fetch fixed; code tidied up --- newsReader.js | 169 +++++++++++++++++++++++++++++--------------------- 1 file changed, 97 insertions(+), 72 deletions(-) diff --git a/newsReader.js b/newsReader.js index 0d1a3cb..279a195 100644 --- a/newsReader.js +++ b/newsReader.js @@ -4,86 +4,111 @@ const articleList=document.querySelector(".articleList"); const nextPageButton=document.querySelector(".nextPage"); const searchForm=document.querySelector(".searchForm"); const keyword=document.querySelector(".keyword"); +const body=document.querySelector("body"); let p=1; -let urlBase = 'https://newsapi.org/v2/' +const urlBase = 'https://newsapi.org/v2/' let queries = 'top-headlines?' + - 'country=gb&' +'country=gb&' let page = `page=${p}&`; -let pageSize = 'pageSize=5&'; -let apiKey = 'apiKey=84e1f3efc2a148dca439f1b5ad3cd201'; +const pageSize = 'pageSize=5&'; +const apiKey = 'apiKey=84e1f3efc2a148dca439f1b5ad3cd201'; let url = urlBase + queries + pageSize + page + apiKey; +const newsDetail=document.createElement("ul"); +newsDetail.classList.add("onePieceofNews"); +articleList.appendChild(newsDetail); + + +function getNews(piece){ + const newsContent=document.createElement("li") + if(piece.description!==null){ + newsContent.innerHTML=` +

    ${piece.title}

    + image +

    ${piece.description}

    +

    ${piece.source.name}

    +

    ${piece.publishedAt}

    + Read more + `; + newsDetail.appendChild(newsContent); + + + } +} -let req = new Request(url); -fetch(req) - .then(response => { - - return response.json() - }) - .then(response => { - console.log(response); - let i=1 - response.articles.forEach(function(item){ - const newsDetail=document.createElement("ul"); - newsDetail.classList.add("onePieceofNews"); - newsDetail.setAttribute("id",i) - if(item.description!==null){ - newsDetail.innerHTML=`
  • ${item.title}
    • - image -
  • ${item.description}
    • -
  • ${item.source.name}
    • -
  • ${item.publishedAt}
    • - Read more - `; - - articleList.appendChild(newsDetail); - i++; - } - return; - }) - - }) - .catch(error => console.log(error)); - - -nextPageButton.onclick=function(event) { - p++; - page = `page=${p}&` - url = urlBase + queries + pageSize + page + apiKey; - console.log("url: ", url); -req = new Request(url); -fetch(req) - .then(response => { - return response.json() - }) - .then(response => { - console.log(response); - - i=1; - response.articles.forEach(function(item){ - - if(item.description!==null){ - newsDetail=document.getElementById(`${i}`) - newsDetail.innerHTML=`
  • ${item.title}
    • - image -
  • ${item.description}
    • -
  • ${item.source.name}
    • -
  • ${item.publishedAt}
    • - Read more - `; - - - - i++; - document.documentElement.scrollTop = 0; - } - return; - }) - - }) - .catch(error => console.log(error)); + +function fetchNews(){ + + return fetch(url) + .then(response => response.json()) + .then(response => { + newsDetail.innerHTML=""; + response.articles.forEach(piece => getNews(piece)) + }) + .catch(error => console.log(error)); + +} + +fetchNews(); + +function fetchNewsNextPage(pageNumber){ + page = `page=${pageNumber}&` + url = urlBase + queries + pageSize + page + apiKey; + return fetch(url) + .then(response => response.json()) + .then(response => { + newsDetail.innerHTML=""; + return response.articles.forEach(piece => getNews(piece)) + }) + .catch(error => console.log(error)); +} + +body.addEventListener("click", event => { + + if(event.target.matches(".nextPage")){ + p++; + fetchNewsNextPage(p) } +}) +// nextPageButton.onclick=function(event) { +// p++; +// page = `page=${p}&` +// url = urlBase + queries + pageSize + page + apiKey; +// console.log("url: ", url); +// +// req = new Request(url); +// fetch(req) +// .then(response => { +// return response.json() +// }) + // .then(response => { + // console.log(response); + // + // i=1; + // response.articles.forEach(function(item){ + // + // if(item.description!==null){ + // newsDetail=document.getElementById(`${i}`) + // newsDetail.innerHTML=`
  • ${item.title}
    • + // image + //
  • ${item.description}
    • + //
  • ${item.source.name}
    • + //
  • ${item.publishedAt}
    • + // Read more + // `; + // + // + // + // i++; + // document.documentElement.scrollTop = 0; + // } + // return; + // }) + // + // }) + // .catch(error => console.log(error)); + // } searchForm.addEventListener('submit', function(event){ event.preventDefault();