From 1d2c8699da4389391dbd38fc52154a676ca9a536 Mon Sep 17 00:00:00 2001 From: Rafal Date: Mon, 18 Jun 2018 09:32:34 +0100 Subject: [PATCH] Responsive news reader complete --- index.html | 41 +++++++++ main.css | 240 +++++++++++++++++++++++++++++++++++++++++++++++++++++ main.js | 63 ++++++++++++++ 3 files changed, 344 insertions(+) create mode 100644 index.html create mode 100644 main.css create mode 100644 main.js diff --git a/index.html b/index.html new file mode 100644 index 0000000..5a2e2fc --- /dev/null +++ b/index.html @@ -0,0 +1,41 @@ + + + + + + + + + news reader + + + +
+ +
+

news reader

+
+ +
+
+ +
+
+

main content

+
+
+ +
+
Coded for Constructor Labs
+
Address:1-3 Rivington St, London EC2A 3DT
+
+
+ +
+ + + diff --git a/main.css b/main.css new file mode 100644 index 0000000..d940dcf --- /dev/null +++ b/main.css @@ -0,0 +1,240 @@ +*{ + box-sizing: border-box; +} + +body{ + margin:0; + font-family: Helvetica; +} + +.app{ + text-align: center; + color: black; + display:flex; + flex-direction: column; + height: 100vh; + background-image: url(https://images.unsplash.com/photo-1509624776920-0fac24a9dfda?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=42ec196ddd2f51e9dbb7bfe0adcbaa3b&auto=format&fit=crop&w=800&q=60); + +} + +.masterhead{ + font-style: italic; + text-transform: capitalize; + display:flex; + flex-direction: column; + justify-content: space-between; + +} + + +.search_container{ + display:flex; +} + +.search, +.search__input, +.btn { + transition: 0.5s background-color, 0.5s color; + padding: 5px 10px; + border: none; + border-radius: 9999px; + font: inherit; + background: #fff; +} + +.btn { + text-align: center; +} + +.btn:hover { + background: #333; + color: #ccc; +} + +.search { + display: flex; + margin: auto; + padding: 2px 2px 2px 10px; + font-size: 16px; + background: #333; + color: #ccc; +} + +.search__label { + align-self: center; + + margin-right: 5px; +} + +.search__input { + flex: 1; + + border-top-right-radius: 0; + border-bottom-right-radius: 0; + background: #fff; +} + +.search__btn { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + text-transform: uppercase; + background: #666; + color: #fff; +} + + +.content{ + display: flex; + flex-direction: column; + flex:1; +} + + +.content__body{ + flex:4; + overflow-y: auto; +} + +.article__list{ + display: flex; + flex-direction: column; + list-style-type: none; + text-align: left; + font-size: 12px; + line-height: small +} + +.article{ + display:flex; + flex-direction:column; + +} + +.article__image{ + position:relative; + float:left; + width: 40%; + height:20%; + background-position: 50% 50%; + background-repeat:no-repeat; + background-size:cover; + +} + +.article__image:hover{ + outline: 1px solid white; + filter: grayscale(100%); +} + +.article__image:link { color: #000000; text-decoration: none} +.article__image:visited { color: #000000; text-decoration: none} +.article__image:hover { color: #3366CC; text-decoration: underline} +.article__image:active { color: #000000; text-decoration: none} + + +.article__title{ + display:flex; + flex-direction: column; + font-style: italic; + font-weight: bold; + font-size: 18px; + margin-top:5px; + margin-bottom: 5px; + width: 40%; +} + +.article__title:link { color: black; text-decoration: none} +.article__title:visited { color: navy; text-decoration: none} +.article__title:hover { color: black; text-decoration: underline} +.article__title:active { color: navy; text-decoration: none} + +.article_summary{ + display: flex; + float: left; + font-style: normal; + font-size: 16px; + margin: 0; + text-align: left; + width: 40%; +} + +.article_source{ + font-style: italic; + color: black; +} + +.footer { + display: flex; + flex-wrap: wrap; + justify-content: center; + font-weight: bold; +} + +.footer__notes, +.footer__address, +.footer__map { + padding: 10px; +} + +@media(max-width: 445px){ + .article__image{ + display: none; + } +} + +@media (min-width: 768px) { + .masterhead { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + } + + .footer, + .content { + display: flex; + + } + + .content__body { + flex: 5; + } + + .footer__notes, + .footer__address, + .footer__map { + flex: 0.5; + justify-content: center; + } +} + +@media (min-width: 960px) { + .content__body { + flex: 5; + } + + .footer__notes, + .footer__address, + .footer__map { + padding: 30px; + flex: 0.5; + } +} + +@media (min-width: 1200px) { + + .content__body { + flex: 5; + } + + .footer__notes, + .footer__address, + .footer__map { + flex: 0.5; + } + + .article_summary{ + display:inline-block; + } + +} diff --git a/main.js b/main.js new file mode 100644 index 0000000..6d8af72 --- /dev/null +++ b/main.js @@ -0,0 +1,63 @@ +const mainBody = document.querySelector(".content__body"); +const search = document.querySelector("#search"); +const keyword = document.querySelector("#search-tf"); + +function getTopStories(){ + const url ='https://newsapi.org/v2/top-headlines?country=gb&apiKey=1f83068c0e0b46eb8146486c82998a9f'; + return fetch(url) + .then(function(response){ + return response.json() + }).then(function(data){ + // console.log(data); + const topStories = data.articles.filter(imagesOnly => imagesOnly.urlToImage).map(function(article){ + return ` +
  • + + ${article.title} +

    ${article.description}

    +

    + ${article.source['name']}, ${article.publishedAt} +

    +
    • + ` + }).join(''); + mainBody.innerHTML = ``; + }) + .catch(function(error){ + console.log('error'); + }) +}; +getTopStories(); + +function getArticle(keyword){ + const urlKeyword =`https://newsapi.org/v2/everything?q=${keyword}&apiKey=1f83068c0e0b46eb8146486c82998a9f`; + return fetch(urlKeyword) + .then(function(response){ + return response.json() + }).then(function(data){ + console.log(data); + const keywordResults = data.articles.filter(imagesOnly => imagesOnly.urlToImage).map(function(article){ + return ` +
  • + + ${article.title} +

    ${article.description}

    +

    + ${article.source['name']}, ${article.publishedAt} +

    +
    • + ` + }).join(''); + mainBody.innerHTML = ``; + }) + .catch(function(error){ + console.log('getArticle',error); + }) +}; + +//Event handlers +search.addEventListener('submit', function(event){ + event.preventDefault(); + const keyword = document.querySelector("#search-tf"); + getArticle(keyword.value); +})