From d468c4e1b5e6979e24d5d479c916c601c4f57dee Mon Sep 17 00:00:00 2001 From: Mariusz Sygnowski Date: Fri, 14 Sep 2018 10:20:44 +0100 Subject: [PATCH 01/16] first layout --- css/style.css | 5 +++++ index.html | 46 ++++++++++++++++++++++++++++++++++++++++++++++ js/app.js | 0 3 files changed, 51 insertions(+) create mode 100644 css/style.css create mode 100644 index.html create mode 100644 js/app.js diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..ff78a6a --- /dev/null +++ b/css/style.css @@ -0,0 +1,5 @@ +* { + margin: 0; + padding: 0; +} + diff --git a/index.html b/index.html new file mode 100644 index 0000000..a916c13 --- /dev/null +++ b/index.html @@ -0,0 +1,46 @@ + + + + + + + + + News reader by Mariusz Sygnowski + + + +
+
+

FLASH

+

NEWS

+
+ +
+
+ main__title +
+
+ main__description +
+ +
img
+ +
+ main__content +
+
+ main__published +
+
+ main__source +
+
+ + +
+ + + + \ No newline at end of file diff --git a/js/app.js b/js/app.js new file mode 100644 index 0000000..e69de29 From 4597c249a2005da94f1431b81ab02c8789049a9f Mon Sep 17 00:00:00 2001 From: Mariusz Sygnowski Date: Fri, 14 Sep 2018 12:28:50 +0100 Subject: [PATCH 02/16] title, description image, publish, source are displayed on page --- css/reset.css | 129 ++++++++++++++++++++++++++++++++++++++++++++++++++ css/style.css | 56 ++++++++++++++++++++++ index.html | 25 ++-------- js/app.js | 44 +++++++++++++++++ 4 files changed, 233 insertions(+), 21 deletions(-) create mode 100644 css/reset.css diff --git a/css/reset.css b/css/reset.css new file mode 100644 index 0000000..853f7c0 --- /dev/null +++ b/css/reset.css @@ -0,0 +1,129 @@ +/* Let's default this puppy out +-------------------------------------------------------------------------------*/ + +html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font-weight: normal; + vertical-align: baseline; + background: transparent; +} + +main, article, aside, figure, footer, header, nav, section, details, summary {display: block;} + +/* Handle box-sizing while better addressing child elements: + http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */ +html { + box-sizing: border-box; +} + +*, +*:before, +*:after { + box-sizing: inherit; +} + +/* consider resetting the default cursor: https://gist.github.com/murtaugh/5247154 */ + +/* Responsive images and other embedded objects */ +/* if you don't have full control over `img` tags (if you have to overcome attributes), consider adding height: auto */ +img, +object, +embed {max-width: 100%;} + +/* + Note: keeping IMG here will cause problems if you're using foreground images as sprites. + In fact, it *will* cause problems with Google Maps' controls at small size. + If this is the case for you, try uncommenting the following: +#map img { + max-width: none; +} +*/ + +/* force a vertical scrollbar to prevent a jumpy page */ +html {overflow-y: scroll;} + +/* we use a lot of ULs that aren't bulleted. + you'll have to restore the bullets within content, + which is fine because they're probably customized anyway */ +ul {list-style: none;} + +blockquote, q {quotes: none;} + +blockquote:before, +blockquote:after, +q:before, +q:after {content: ''; content: none;} + +a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;} + +del {text-decoration: line-through;} + +abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;} + +/* tables still need cellspacing="0" in the markup */ +table {border-collapse: separate; border-spacing: 0;} +th {font-weight: bold; vertical-align: bottom;} +td {font-weight: normal; vertical-align: top;} + +hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;} + +input, select {vertical-align: middle;} + +pre { + white-space: pre; /* CSS2 */ + white-space: pre-wrap; /* CSS 2.1 */ + white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */ + word-wrap: break-word; /* IE */ +} + +input[type="radio"] {vertical-align: text-bottom;} +input[type="checkbox"] {vertical-align: bottom;} +.ie7 input[type="checkbox"] {vertical-align: baseline;} +.ie6 input {vertical-align: text-bottom;} + +select, input, textarea {font: 99% sans-serif;} + +table {font-size: inherit; font: 100%;} + +small {font-size: 85%;} + +strong {font-weight: bold;} + +td, td img {vertical-align: top;} + +/* Make sure sup and sub don't mess with your line-heights http://gist.github.com/413930 */ +sub, sup {font-size: 75%; line-height: 0; position: relative;} +sup {top: -0.5em;} +sub {bottom: -0.25em;} + +/* standardize any monospaced elements */ +pre, code, kbd, samp {font-family: monospace, sans-serif;} + +/* hand cursor on clickable elements */ +.clickable, +label, +input[type=button], +input[type=submit], +input[type=file], +button {cursor: pointer;} + +/* Webkit browsers add a 2px margin outside the chrome of form elements */ +button, input, select, textarea {margin: 0;} + +/* make buttons play nice in IE */ +button, +input[type=button] {width: auto; overflow: visible;} + +/* scale images in IE7 more attractively */ +.ie7 img {-ms-interpolation-mode: bicubic;} + +/* prevent BG image flicker upon hover + (commented out as usage is rare, and the filter syntax messes with some pre-processors) +.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));} +*/ + +/* let's clear some floats */ +.clearfix:after { content: " "; display: block; clear: both; } \ No newline at end of file diff --git a/css/style.css b/css/style.css index ff78a6a..6dffbe7 100644 --- a/css/style.css +++ b/css/style.css @@ -3,3 +3,59 @@ padding: 0; } +.container { + width: 100vw; +} + +.header { + display: flex; + flex-direction: column; + justify-content: center; + width: 100%; + text-align: center; +} + +.main { + display: flex; + flex-direction: column; + justify-content: center; + width: 100%; + text-align: center; + border: 5px solid red; +} + +.main__title { + display: flex; + width: 100%; + border: 10px solid yellow; +} + +.main__description { + display: flex; + width: 100%; + border: 10px solid black; +} + +.main__image { + max-width: 100%; + height: 400px; + background-size: cover; + background-position: center; + background-repeat: no-repeat; +} + +.main__content { + display: flex; + width: 100%; +} + +.main__published { + display: flex; + width: 100%; +} + +.main__source { + display: flex; + width: 100%; +} + diff --git a/index.html b/index.html index a916c13..d467f30 100644 --- a/index.html +++ b/index.html @@ -5,42 +5,25 @@ + - News reader by Mariusz Sygnowski
-
+

FLASH

NEWS

-
-
- main__title -
-
- main__description -
+
-
img
- -
- main__content -
-
- main__published -
-
- main__source -
- + \ No newline at end of file diff --git a/js/app.js b/js/app.js index e69de29..c0a9c22 100644 --- a/js/app.js +++ b/js/app.js @@ -0,0 +1,44 @@ +const main = document.querySelector('.main'); + +fetch('https://newsapi.org/v2/top-headlines?sources=bbc-news&apiKey=454852947b2747dabc52cf3ebcf4807c') + .then(function (response) { + // console.log(response); + return response.json(); + }) + .then(function (body) { + const articles = body.articles; + articles.forEach((article) => { + + const sectionMainTitle = document.createElement('section'); + console.log(article); + sectionMainTitle.className = 'main__title'; + sectionMainTitle.textContent = article.title; + main.append(sectionMainTitle); + + const sectionMainDescription = document.createElement('section'); + sectionMainDescription.className = 'main__description'; + sectionMainDescription.textContent = article.description; + main.append(sectionMainDescription); + + const sectionMainImage = document.createElement('figure'); + sectionMainImage.className = 'main__image'; + sectionMainImage.style.backgroundImage = `url("${article.urlToImage}")`; + main.append(sectionMainImage); + + const sectionMainPublished = document.createElement('section'); + sectionMainPublished.className = 'main__published'; + sectionMainPublished.textContent = article.publishedAt; + main.append(sectionMainPublished); + + const sectionMainSource = document.createElement('section'); + sectionMainSource.className = 'main__source'; + sectionMainSource.textContent = article.source.name; + main.append(sectionMainSource); + + }) + + + }) + .catch(function (error) { + console.log('Server failed to return data: ' + error); + }); \ No newline at end of file From 2eb0736434df44863f23de5402f1c92fc69f3d94 Mon Sep 17 00:00:00 2001 From: Mariusz Sygnowski Date: Fri, 14 Sep 2018 17:21:26 +0100 Subject: [PATCH 03/16] finished @media (min-width: 768px) --- css/style.css | 114 +++++++++++++++++++++++++++++++++++++------------- js/app.js | 31 +++++++++----- 2 files changed, 106 insertions(+), 39 deletions(-) diff --git a/css/style.css b/css/style.css index 6dffbe7..68517d2 100644 --- a/css/style.css +++ b/css/style.css @@ -1,61 +1,117 @@ -* { - margin: 0; - padding: 0; -} - .container { - width: 100vw; + min-width: 100vw; + margin: 0 auto; } .header { display: flex; flex-direction: column; justify-content: center; - width: 100%; text-align: center; + font-size: 2em; + background-color: red; + color: #0026F7; } .main { display: flex; flex-direction: column; justify-content: center; - width: 100%; + margin: 0 auto; text-align: center; border: 5px solid red; + padding: 0 15px; } -.main__title { - display: flex; - width: 100%; - border: 10px solid yellow; +.main__articleNews { + padding: 10px; + background-color: lightyellow; } -.main__description { +.main__articleNews__imageBox__image { + display: none; +} + +.main__articleNews__textBox { display: flex; - width: 100%; - border: 10px solid black; + flex-direction: column; + height: 10em; } -.main__image { - max-width: 100%; - height: 400px; - background-size: cover; - background-position: center; - background-repeat: no-repeat; +.main__articleNews__textBox__title { + border: 5px solid yellow; } -.main__content { +.main__articleNews__textBox__description { display: flex; - width: 100%; + justify-content: center; + align-items: center; + border: 5px solid black; + flex-grow: 3; } -.main__published { - display: flex; - width: 100%; +.main__articleNews__textBox__published { + border: 5px solid blueviolet; } -.main__source { - display: flex; - width: 100%; +.main__articleNews__textBox__source { + border: 5px solid lightslategray; +} + +@media (min-width: 768px) { + .container { + } + + .main { + } + + .main__articleNews { + display: flex; + flex-direction: row; + height: 300px; + border: 5px solid lightskyblue; + } + + .main__articleNews__imageBox { + flex: 4; + } + + .main__articleNews__textBox { + display: flex; + flex-direction: column; + flex: 8; + height: 100%; + } + + .main__articleNews__textBox__title { + max-height: min-content; + } + + .main__articleNews__textBox__description { + display: flex; + justify-content: center; + align-items: center; + font-size: 1.5em; + flex: 4; + } + + .main__articleNews__imageBox__image { + display: block; + width: auto; + height: 300px; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + } + + .main__articleNews__textBox__published { + max-height: min-content; + } + + .main__articleNews__textBox__source { + max-height: min-content; + } + } + diff --git a/js/app.js b/js/app.js index c0a9c22..9ca118d 100644 --- a/js/app.js +++ b/js/app.js @@ -1,4 +1,5 @@ const main = document.querySelector('.main'); +// fetch('https://newsapi.org/v2/top-headlines?apiKey=454852947b2747dabc52cf3ebcf4807c&country=au') fetch('https://newsapi.org/v2/top-headlines?sources=bbc-news&apiKey=454852947b2747dabc52cf3ebcf4807c') .then(function (response) { @@ -8,33 +9,43 @@ fetch('https://newsapi.org/v2/top-headlines?sources=bbc-news&apiKey=454852947b27 .then(function (body) { const articles = body.articles; articles.forEach((article) => { + const articleNews = document.createElement('div'); + articleNews.className = 'main__articleNews'; + const imageBox = document.createElement('div'); + imageBox.className = 'main__articleNews__imageBox'; + const textBox = document.createElement('div'); + textBox.className = 'main__articleNews__textBox'; const sectionMainTitle = document.createElement('section'); console.log(article); - sectionMainTitle.className = 'main__title'; + sectionMainTitle.className = 'main__articleNews__textBox__title'; sectionMainTitle.textContent = article.title; - main.append(sectionMainTitle); + textBox.append(sectionMainTitle); const sectionMainDescription = document.createElement('section'); - sectionMainDescription.className = 'main__description'; + sectionMainDescription.className = 'main__articleNews__textBox__description'; sectionMainDescription.textContent = article.description; - main.append(sectionMainDescription); + textBox.append(sectionMainDescription); const sectionMainImage = document.createElement('figure'); - sectionMainImage.className = 'main__image'; + sectionMainImage.className = 'main__articleNews__imageBox__image'; sectionMainImage.style.backgroundImage = `url("${article.urlToImage}")`; - main.append(sectionMainImage); + imageBox.append(sectionMainImage); const sectionMainPublished = document.createElement('section'); - sectionMainPublished.className = 'main__published'; + sectionMainPublished.className = 'main__articleNews__textBox__published'; sectionMainPublished.textContent = article.publishedAt; - main.append(sectionMainPublished); + textBox.append(sectionMainPublished); const sectionMainSource = document.createElement('section'); - sectionMainSource.className = 'main__source'; + sectionMainSource.className = 'main__articleNews__textBox__source'; sectionMainSource.textContent = article.source.name; - main.append(sectionMainSource); + textBox.append(sectionMainSource); + articleNews.append(imageBox); + articleNews.append(textBox); + + main.append(articleNews); }) From c680bb983605c018ab372fc5c4d827b8ba47854d Mon Sep 17 00:00:00 2001 From: Mariusz Sygnowski Date: Sat, 15 Sep 2018 21:55:53 +0100 Subject: [PATCH 04/16] changed from flex to css grid and few other small changes --- css/style.css | 109 +++++++++++++++++++++++++++++++------------------- index.html | 11 ++++- js/app.js | 44 +++++++++++--------- 3 files changed, 101 insertions(+), 63 deletions(-) diff --git a/css/style.css b/css/style.css index 68517d2..7588bd6 100644 --- a/css/style.css +++ b/css/style.css @@ -1,3 +1,15 @@ +@import url('https://fonts.googleapis.com/css?family=Dancing+Script:400,700'); +@import url('https://fonts.googleapis.com/css?family=Libre+Barcode+128+Text'); +@import url('https://fonts.googleapis.com/css?family=Black+And+White+Picture'); +@import url('https://fonts.googleapis.com/css?family=Caveat'); + + +body { + font-family: "Dancing Script", sans-serif; + font-family: 'Caveat', cursive; + font-size: 2em; +} + .container { min-width: 100vw; margin: 0 auto; @@ -13,48 +25,75 @@ color: #0026F7; } -.main { - display: flex; - flex-direction: column; +.mainNavigation { + display: grid; + grid-template-columns: 2fr 1fr 1fr; + font-size: 2rem; + grid-gap: 55px; + padding-left: 5px; + padding-right: 5px; +} + +.mainNavigation li:first-child { + /*background-color: #00FF00;*/ +} + +.mainNavigation a { + text-decoration: none; +} + +.mainNavigation li { + display: grid; + align-items: center; justify-content: center; +} + +.mainNavigation li:hover { + background: rgba(242, 199, 7, 0.9); +} + +.main { margin: 0 auto; text-align: center; border: 5px solid red; - padding: 0 15px; } .main__articleNews { - padding: 10px; + display: grid; + min-height: 100vh; + grid-template-areas: 'title' 'description' 'content' 'image' 'published' 'source'; + grid-template-rows: auto auto 1fr 0 auto auto; background-color: lightyellow; } -.main__articleNews__imageBox__image { - display: none; +.main__articleNews__title { + grid-area: title; + font-size: 2em; + font-weight: bolder; + border: 5px solid yellow; } -.main__articleNews__textBox { - display: flex; - flex-direction: column; - height: 10em; +.main__articleNews__description { + grid-area: description; + border: 5px solid black; } -.main__articleNews__textBox__title { - border: 5px solid yellow; +.main__articleNews__content { + grid-area: content; + border: 5px solid firebrick; } -.main__articleNews__textBox__description { - display: flex; - justify-content: center; - align-items: center; - border: 5px solid black; - flex-grow: 3; +.main__articleNews__image { + grid-area: image; } -.main__articleNews__textBox__published { +.main__articleNews__published { + grid-area: published; border: 5px solid blueviolet; } -.main__articleNews__textBox__source { +.main__articleNews__source { + grid-area: source; border: 5px solid lightslategray; } @@ -66,28 +105,14 @@ } .main__articleNews { - display: flex; - flex-direction: row; - height: 300px; - border: 5px solid lightskyblue; - } - - .main__articleNews__imageBox { - flex: 4; - } - - .main__articleNews__textBox { - display: flex; - flex-direction: column; - flex: 8; height: 100%; } - .main__articleNews__textBox__title { + .main__articleNews__title { max-height: min-content; } - .main__articleNews__textBox__description { + .main__articleNews__description { display: flex; justify-content: center; align-items: center; @@ -95,20 +120,20 @@ flex: 4; } - .main__articleNews__imageBox__image { + .main__articleNews__image { display: block; width: auto; - height: 300px; - background-size: contain; + height: 270px; + background-size: cover; background-position: center; background-repeat: no-repeat; } - .main__articleNews__textBox__published { + .main__articleNews__published { max-height: min-content; } - .main__articleNews__textBox__source { + .main__articleNews__source { max-height: min-content; } diff --git a/index.html b/index.html index d467f30..853f000 100644 --- a/index.html +++ b/index.html @@ -13,8 +13,15 @@
-

FLASH

-

NEWS

+ +

+

FLASH NEWS

diff --git a/js/app.js b/js/app.js index 9ca118d..2dd8552 100644 --- a/js/app.js +++ b/js/app.js @@ -9,41 +9,47 @@ fetch('https://newsapi.org/v2/top-headlines?sources=bbc-news&apiKey=454852947b27 .then(function (body) { const articles = body.articles; articles.forEach((article) => { + console.log(article); + const articleNews = document.createElement('div'); articleNews.className = 'main__articleNews'; - const imageBox = document.createElement('div'); - imageBox.className = 'main__articleNews__imageBox'; - const textBox = document.createElement('div'); - textBox.className = 'main__articleNews__textBox'; - const sectionMainTitle = document.createElement('section'); - console.log(article); - sectionMainTitle.className = 'main__articleNews__textBox__title'; + const sectionMainTitle = document.createElement('h2'); + sectionMainTitle.className = 'main__articleNews__title'; sectionMainTitle.textContent = article.title; - textBox.append(sectionMainTitle); + articleNews.append(sectionMainTitle); const sectionMainDescription = document.createElement('section'); - sectionMainDescription.className = 'main__articleNews__textBox__description'; + sectionMainDescription.className = 'main__articleNews__description'; sectionMainDescription.textContent = article.description; - textBox.append(sectionMainDescription); + articleNews.append(sectionMainDescription); + + const sectionMainContent = document.createElement('section'); + sectionMainContent.className = 'main__articleNews__content'; + let articleContent = article.content; + let newar = ''; + if (articleContent !== null) { //checking if there something in article.content + newar = articleContent.replace(/ *\[[^)]*] */g, ""); + } else { + console.log('no ok'); + } + sectionMainContent.textContent = newar; + articleNews.append(sectionMainContent); const sectionMainImage = document.createElement('figure'); - sectionMainImage.className = 'main__articleNews__imageBox__image'; + sectionMainImage.className = 'main__articleNews__image'; sectionMainImage.style.backgroundImage = `url("${article.urlToImage}")`; - imageBox.append(sectionMainImage); + articleNews.append(sectionMainImage); const sectionMainPublished = document.createElement('section'); - sectionMainPublished.className = 'main__articleNews__textBox__published'; + sectionMainPublished.className = 'main__articleNews__published'; sectionMainPublished.textContent = article.publishedAt; - textBox.append(sectionMainPublished); + articleNews.append(sectionMainPublished); const sectionMainSource = document.createElement('section'); - sectionMainSource.className = 'main__articleNews__textBox__source'; + sectionMainSource.className = 'main__articleNews__source'; sectionMainSource.textContent = article.source.name; - textBox.append(sectionMainSource); - - articleNews.append(imageBox); - articleNews.append(textBox); + articleNews.append(sectionMainSource); main.append(articleNews); }) From a38fb40e226d8fb3d1c4b14676181c4ff42ee245 Mon Sep 17 00:00:00 2001 From: Mariusz Sygnowski Date: Sun, 16 Sep 2018 08:57:28 +0100 Subject: [PATCH 05/16] removed section .main__articleNews__content so main description will be .main__articleNews__description --- css/style.css | 10 +++++++--- js/app.js | 32 +++++++++++++++++++++----------- 2 files changed, 28 insertions(+), 14 deletions(-) diff --git a/css/style.css b/css/style.css index 7588bd6..50d6db8 100644 --- a/css/style.css +++ b/css/style.css @@ -61,14 +61,14 @@ body { .main__articleNews { display: grid; min-height: 100vh; - grid-template-areas: 'title' 'description' 'content' 'image' 'published' 'source'; - grid-template-rows: auto auto 1fr 0 auto auto; + grid-template-areas: 'title' 'description' 'image' 'published' 'source'; + grid-template-rows: auto 1fr 0 auto auto; background-color: lightyellow; } .main__articleNews__title { grid-area: title; - font-size: 2em; + font-size: 1.5em; font-weight: bolder; border: 5px solid yellow; } @@ -76,6 +76,10 @@ body { .main__articleNews__description { grid-area: description; border: 5px solid black; + font-size: 1.5em; + display: flex; + flex-direction: column; + justify-content: center; } .main__articleNews__content { diff --git a/js/app.js b/js/app.js index 2dd8552..7f9ab2d 100644 --- a/js/app.js +++ b/js/app.js @@ -22,19 +22,29 @@ fetch('https://newsapi.org/v2/top-headlines?sources=bbc-news&apiKey=454852947b27 const sectionMainDescription = document.createElement('section'); sectionMainDescription.className = 'main__articleNews__description'; sectionMainDescription.textContent = article.description; + const urlContent = article.url; + const urlContentElement = document.createElement('a'); + urlContentElement.className = 'main__articleNews__content__url'; + urlContentElement.setAttribute('href', urlContent); + urlContentElement.setAttribute('target', '_blank'); + urlContentElement.textContent = 'click here for full article'; + sectionMainDescription.append(document.createElement('br')); + sectionMainDescription.append(urlContentElement); + articleNews.append(sectionMainDescription); - const sectionMainContent = document.createElement('section'); - sectionMainContent.className = 'main__articleNews__content'; - let articleContent = article.content; - let newar = ''; - if (articleContent !== null) { //checking if there something in article.content - newar = articleContent.replace(/ *\[[^)]*] */g, ""); - } else { - console.log('no ok'); - } - sectionMainContent.textContent = newar; - articleNews.append(sectionMainContent); + // const sectionMainContent = document.createElement('section'); + // sectionMainContent.className = 'main__articleNews__content'; + + // urlContentElement.className = 'main__articleNews__content__url'; + // urlContentElement.setAttribute('href', urlContent); + // urlContentElement.setAttribute('target', '_blank'); + // urlContentElement.textContent = 'click here for full article'; + // sectionMainContent.textContent = `${articleContent}`; + // sectionMainContent.append(document.createElement('br')); + // sectionMainContent.append(urlContentElement); + + // articleNews.append(sectionMainContent); const sectionMainImage = document.createElement('figure'); sectionMainImage.className = 'main__articleNews__image'; From 21b51bd2d614561e8320384f21731a423bc2218c Mon Sep 17 00:00:00 2001 From: Mariusz Sygnowski Date: Sun, 16 Sep 2018 09:34:21 +0100 Subject: [PATCH 06/16] first layout for tablets --- css/style.css | 34 +++++++++++++++++----------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/css/style.css b/css/style.css index 50d6db8..e0868c9 100644 --- a/css/style.css +++ b/css/style.css @@ -1,11 +1,6 @@ -@import url('https://fonts.googleapis.com/css?family=Dancing+Script:400,700'); -@import url('https://fonts.googleapis.com/css?family=Libre+Barcode+128+Text'); -@import url('https://fonts.googleapis.com/css?family=Black+And+White+Picture'); @import url('https://fonts.googleapis.com/css?family=Caveat'); - body { - font-family: "Dancing Script", sans-serif; font-family: 'Caveat', cursive; font-size: 2em; } @@ -109,36 +104,41 @@ body { } .main__articleNews { - height: 100%; + display: grid; + min-height: min-content; + grid-template-areas: + 'image title' + 'image description' + 'image published' + 'image source'; + grid-template-rows: auto auto auto auto; + grid-template-columns: 40% auto ; + background-color: lightyellow; } .main__articleNews__title { - max-height: min-content; + grid-area: title; } .main__articleNews__description { - display: flex; - justify-content: center; - align-items: center; - font-size: 1.5em; - flex: 4; + grid-area: description; } .main__articleNews__image { - display: block; + grid-area: image; width: auto; - height: 270px; - background-size: cover; + height: 370px; + background-size: contain; background-position: center; background-repeat: no-repeat; } .main__articleNews__published { - max-height: min-content; + grid-area: published; } .main__articleNews__source { - max-height: min-content; + grid-area: source; } } From 428d52bc61d4f0e8ddd3c7d510648c06d9a7ce5c Mon Sep 17 00:00:00 2001 From: Mariusz Sygnowski Date: Sun, 16 Sep 2018 09:44:21 +0100 Subject: [PATCH 07/16] changes in font size --- css/style.css | 1 - 1 file changed, 1 deletion(-) diff --git a/css/style.css b/css/style.css index e0868c9..ec7fd20 100644 --- a/css/style.css +++ b/css/style.css @@ -2,7 +2,6 @@ body { font-family: 'Caveat', cursive; - font-size: 2em; } .container { From 6fa75bcbd69a173ab842f099824ad1f934e2ef9f Mon Sep 17 00:00:00 2001 From: Mariusz Sygnowski Date: Sun, 16 Sep 2018 09:49:11 +0100 Subject: [PATCH 08/16] changes in font size v2 --- css/style.css | 1 + 1 file changed, 1 insertion(+) diff --git a/css/style.css b/css/style.css index ec7fd20..560e306 100644 --- a/css/style.css +++ b/css/style.css @@ -50,6 +50,7 @@ body { margin: 0 auto; text-align: center; border: 5px solid red; + font-size: 1.5em; } .main__articleNews { From 2d0c466e930dcd51ea5bc8b562cfb6ae358cee70 Mon Sep 17 00:00:00 2001 From: Mariusz Sygnowski Date: Sun, 16 Sep 2018 10:04:55 +0100 Subject: [PATCH 09/16] adjust desktop version in height of each section --- css/style.css | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/css/style.css b/css/style.css index 560e306..98d311a 100644 --- a/css/style.css +++ b/css/style.css @@ -55,9 +55,8 @@ body { .main__articleNews { display: grid; - min-height: 100vh; grid-template-areas: 'title' 'description' 'image' 'published' 'source'; - grid-template-rows: auto 1fr 0 auto auto; + grid-template-rows: auto auto 0 auto auto; background-color: lightyellow; } @@ -66,6 +65,9 @@ body { font-size: 1.5em; font-weight: bolder; border: 5px solid yellow; + display: flex; + flex-direction: column; + justify-content: center; } .main__articleNews__description { @@ -111,7 +113,7 @@ body { 'image description' 'image published' 'image source'; - grid-template-rows: auto auto auto auto; + grid-template-rows: auto 1fr auto auto; grid-template-columns: 40% auto ; background-color: lightyellow; } From 2479119fed4d0a610c271f614da2e3d6b0259c79 Mon Sep 17 00:00:00 2001 From: Mariusz Sygnowski Date: Sun, 16 Sep 2018 19:41:30 +0100 Subject: [PATCH 10/16] added @media (min-width: 1024px) and adjustment in other resolutions --- css/style.css | 46 ++++++++++++++++++++++++++++++++++------------ js/app.js | 13 +++++++++---- 2 files changed, 43 insertions(+), 16 deletions(-) diff --git a/css/style.css b/css/style.css index 98d311a..9276e21 100644 --- a/css/style.css +++ b/css/style.css @@ -5,7 +5,6 @@ body { } .container { - min-width: 100vw; margin: 0 auto; } @@ -46,7 +45,7 @@ body { background: rgba(242, 199, 7, 0.9); } -.main { +.main {; margin: 0 auto; text-align: center; border: 5px solid red; @@ -56,7 +55,7 @@ body { .main__articleNews { display: grid; grid-template-areas: 'title' 'description' 'image' 'published' 'source'; - grid-template-rows: auto auto 0 auto auto; + grid-template-rows: min-content 1fr 0 min-content min-content; background-color: lightyellow; } @@ -108,14 +107,11 @@ body { .main__articleNews { display: grid; min-height: min-content; - grid-template-areas: - 'image title' - 'image description' - 'image published' - 'image source'; - grid-template-rows: auto 1fr auto auto; - grid-template-columns: 40% auto ; + grid-template-areas: 'title' 'description' 'image' 'published' 'source'; + grid-template-rows: auto auto auto auto auto; + grid-template-columns: auto; background-color: lightyellow; + padding: 1em; } .main__articleNews__title { @@ -129,8 +125,9 @@ body { .main__articleNews__image { grid-area: image; width: auto; - height: 370px; - background-size: contain; + min-height: 430px; + border: 5px solid red; + background-size: cover; background-position: center; background-repeat: no-repeat; } @@ -145,4 +142,29 @@ body { } +@media (min-width: 1024px) { + body { + font-size: 1.2rem; + } + .main { + display: grid; + grid-gap: 2em; + background: linear-gradient(0deg, rgba(157,255,0,1) 0%, rgba(129,168,12,1) 50%, rgba(218,255,10,1) 100%); /* w3c */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#DAFF0A', endColorstr='#9DFF00',GradientType=0 ); /* ie6-9 */ + } + .main__articleNews { + display: grid; + min-height: min-content; + grid-template-areas: 'image title' 'image description' 'image published' 'image source'; + grid-template-rows: auto 1fr auto auto; + grid-template-columns: 60% auto; + grid-column-gap: 1em; + padding: 1em; + } + + .main__articleNews__image { + background-size: cover; + } +} + diff --git a/js/app.js b/js/app.js index 7f9ab2d..12e95ec 100644 --- a/js/app.js +++ b/js/app.js @@ -13,22 +13,27 @@ fetch('https://newsapi.org/v2/top-headlines?sources=bbc-news&apiKey=454852947b27 const articleNews = document.createElement('div'); articleNews.className = 'main__articleNews'; - + console.dir(articleNews); + const heightBrowser = articleNews.clientHeight; + articleNews.style.height = `${heightBrowser}: px`; + console.log(articleNews.style); const sectionMainTitle = document.createElement('h2'); sectionMainTitle.className = 'main__articleNews__title'; sectionMainTitle.textContent = article.title; articleNews.append(sectionMainTitle); const sectionMainDescription = document.createElement('section'); + const pElement = document.createElement('p'); sectionMainDescription.className = 'main__articleNews__description'; - sectionMainDescription.textContent = article.description; + + pElement.append(article.description); + sectionMainDescription.append(pElement); const urlContent = article.url; const urlContentElement = document.createElement('a'); urlContentElement.className = 'main__articleNews__content__url'; urlContentElement.setAttribute('href', urlContent); urlContentElement.setAttribute('target', '_blank'); - urlContentElement.textContent = 'click here for full article'; - sectionMainDescription.append(document.createElement('br')); + urlContentElement.textContent = 'FULL ARTICLE'; sectionMainDescription.append(urlContentElement); articleNews.append(sectionMainDescription); From c8593e365bf9ca01639abd353fc6497c34dd1132 Mon Sep 17 00:00:00 2001 From: Mariusz Sygnowski Date: Sun, 16 Sep 2018 20:32:33 +0100 Subject: [PATCH 11/16] padding and margin in header --- css/style.css | 40 +++++++++++++++++++++++++++++++++++----- index.html | 1 - 2 files changed, 35 insertions(+), 6 deletions(-) diff --git a/css/style.css b/css/style.css index 9276e21..ed62c3a 100644 --- a/css/style.css +++ b/css/style.css @@ -6,6 +6,22 @@ body { .container { margin: 0 auto; + animation: 4s infinite bgcolorchange; +} + +@keyframes bgcolorchange { + 0% { + /*background: linear-gradient(0deg, rgba(157,255,0,1) 0%, rgba(129,168,12,1) 50%, rgba(157,255,0,1) 100%); !* w3c *!*/ + background-color:yellow; + } + 50% { + /*background: linear-gradient(0deg, rgba(129,168,12,1) 0%, rgba(157,255,0,1) 50%, rgba(129,168,12,1) 100%); !* w3c *!*/ + background-color: greenyellow; + } + 100% { + /*background: linear-gradient(0deg, rgba(157,255,0,1) 0%, rgba(129,168,12,1) 50%, rgba(157,255,0,1) 100%); !* w3c *!*/ + background-color: yellow; + } } .header { @@ -14,10 +30,18 @@ body { justify-content: center; text-align: center; font-size: 2em; - background-color: red; color: #0026F7; } +.header p { + font-size: 4em; + color: red; + padding: 0.3em; + margin: 0.3em; + background-color: yellow; + border-radius: 100px; +} + .mainNavigation { display: grid; grid-template-columns: 2fr 1fr 1fr; @@ -39,6 +63,7 @@ body { display: grid; align-items: center; justify-content: center; + margin-top: 20px; } .mainNavigation li:hover { @@ -48,8 +73,8 @@ body { .main {; margin: 0 auto; text-align: center; - border: 5px solid red; font-size: 1.5em; + padding: 0 1em; } .main__articleNews { @@ -57,7 +82,9 @@ body { grid-template-areas: 'title' 'description' 'image' 'published' 'source'; grid-template-rows: min-content 1fr 0 min-content min-content; background-color: lightyellow; -} + border-radius: 40px; + grid-gap: 5px; +;} .main__articleNews__title { grid-area: title; @@ -78,6 +105,11 @@ body { justify-content: center; } +.main__articleNews__description a { + text-underline-position: under; + padding-bottom: 0.2em; +} + .main__articleNews__content { grid-area: content; border: 5px solid firebrick; @@ -149,8 +181,6 @@ body { .main { display: grid; grid-gap: 2em; - background: linear-gradient(0deg, rgba(157,255,0,1) 0%, rgba(129,168,12,1) 50%, rgba(218,255,10,1) 100%); /* w3c */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#DAFF0A', endColorstr='#9DFF00',GradientType=0 ); /* ie6-9 */ } .main__articleNews { display: grid; diff --git a/index.html b/index.html index 853f000..64279a1 100644 --- a/index.html +++ b/index.html @@ -20,7 +20,6 @@
  • Register
    • -

    FLASH NEWS

    From cc63339fb0122e2bbe32e97dd339645741ea6e2d Mon Sep 17 00:00:00 2001 From: Mariusz Sygnowski Date: Sun, 16 Sep 2018 20:39:38 +0100 Subject: [PATCH 12/16] font size adjustment for all screens --- css/style.css | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/css/style.css b/css/style.css index ed62c3a..e5398e9 100644 --- a/css/style.css +++ b/css/style.css @@ -34,7 +34,7 @@ body { } .header p { - font-size: 4em; + font-size: 1.5em; color: red; padding: 0.3em; margin: 0.3em; @@ -130,10 +130,8 @@ body { } @media (min-width: 768px) { - .container { - } - - .main { + .header p { + font-size: 2em; } .main__articleNews { @@ -178,6 +176,11 @@ body { body { font-size: 1.2rem; } + + .header p { + font-size: 3em; + } + .main { display: grid; grid-gap: 2em; From 80bc2b35c3145544bf34d1283dfe0131114f3913 Mon Sep 17 00:00:00 2001 From: Mariusz Sygnowski Date: Sun, 16 Sep 2018 20:56:13 +0100 Subject: [PATCH 13/16] padding and margin in .main__articleNews and grid-gap in .main --- css/style.css | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/css/style.css b/css/style.css index e5398e9..ad59260 100644 --- a/css/style.css +++ b/css/style.css @@ -70,11 +70,13 @@ body { background: rgba(242, 199, 7, 0.9); } -.main {; +.main { + display: grid; margin: 0 auto; text-align: center; font-size: 1.5em; padding: 0 1em; + grid-gap: 1em; } .main__articleNews { @@ -84,14 +86,15 @@ body { background-color: lightyellow; border-radius: 40px; grid-gap: 5px; + padding: 1em; + /*margin: 1em;*/ ;} .main__articleNews__title { grid-area: title; font-size: 1.5em; font-weight: bolder; - border: 5px solid yellow; - display: flex; + border: 5px solid lightskyblue; flex-direction: column; justify-content: center; } @@ -141,7 +144,6 @@ body { grid-template-rows: auto auto auto auto auto; grid-template-columns: auto; background-color: lightyellow; - padding: 1em; } .main__articleNews__title { @@ -183,7 +185,6 @@ body { .main { display: grid; - grid-gap: 2em; } .main__articleNews { display: grid; @@ -191,8 +192,6 @@ body { grid-template-areas: 'image title' 'image description' 'image published' 'image source'; grid-template-rows: auto 1fr auto auto; grid-template-columns: 60% auto; - grid-column-gap: 1em; - padding: 1em; } .main__articleNews__image { From fcc3c1aca078fb50df87ecf0d13f08f122fd4197 Mon Sep 17 00:00:00 2001 From: Mariusz Sygnowski <38946458+marinelli123@users.noreply.github.com> Date: Mon, 17 Sep 2018 17:52:46 +0100 Subject: [PATCH 14/16] Update README.md --- README.md | 42 +++--------------------------------------- 1 file changed, 3 insertions(+), 39 deletions(-) diff --git a/README.md b/README.md index e062a87..cc40e7b 100644 --- a/README.md +++ b/README.md @@ -1,41 +1,5 @@ # 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 - -- [ ] Create a responsive layout that works well and looks good at mobile, tablet and desktop screen sizes. Please create the mobile version first, then tablet and then desktop. - -- [ ] Fetch news articles from News API and display them including title, image, description, publication, date and link to article. - -- [ ] Display images for tablet and desktop screens only - -- [ ] Implement a feature of your choice - -## Stretch goals - -- [ ] Implement pagination which allows you to get the next 20 results and display them - -- [ ] Add search functionality which allows the user to retrieve news about a particular topic - -## Instructions - -- Fork and clone this repo -- Commit your changes frequently with short and descriptive commit messages -- Create a pull request when complete -- We want to see great looking webpages -- Your code should have consistent indentation and sensible naming -- Use lots of concise functions with a clear purpose -- Add code comments where it is not immediately obvious what your code does - -## Getting started - -- Take a look at the API documentation to see what the response data will look like -- Start with pen and paper to draw what you want your new app to look like -- Create a basic HTML page with your layout -- Create a CSS file and a JS file and import them into the webpage. -- Use `fetch` load some news items from API and insert them into your web page. - -## README.md - -When finished, update this README.md file in your repo. This should explain what the project is, how to run it and how to use it. Someone who is not familiar with the project should be able to look at it and understand what it is and what to do with it. This is quite important as you want to put projects in your portfolio and the information provided here will help a reviewer understand what it is they are looking at. +I tired to do simple news reader where I fetch news from 'https://newsapi.org/v2/top-headlines'. I wanted to be looks very colorful so have many different bright colors on website so news not looks bad (even if they are). +I used mobile first approach and then create 2 versions: for tablets and for desktop users. +On beginning I use flexbox to arrange all boxes with news however, during this project I starting to learning 'CSS grid' so after that I rebuild code with 'CSS grid'. From 3552ab71c03a298a0dbb98f458af677985594512 Mon Sep 17 00:00:00 2001 From: Mariusz Sygnowski Date: Mon, 17 Sep 2018 20:41:24 +0100 Subject: [PATCH 15/16] changed to news from other country - test --- js/app.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/js/app.js b/js/app.js index 12e95ec..ab92d22 100644 --- a/js/app.js +++ b/js/app.js @@ -1,7 +1,8 @@ const main = document.querySelector('.main'); // fetch('https://newsapi.org/v2/top-headlines?apiKey=454852947b2747dabc52cf3ebcf4807c&country=au') -fetch('https://newsapi.org/v2/top-headlines?sources=bbc-news&apiKey=454852947b2747dabc52cf3ebcf4807c') +// fetch('https://newsapi.org/v2/top-headlines?sources=bbc-news&apiKey=454852947b2747dabc52cf3ebcf4807c') +fetch('https://newsapi.org/v2/top-headlines?apiKey=454852947b2747dabc52cf3ebcf4807c&country=pl') .then(function (response) { // console.log(response); return response.json(); From 4a1872dc165ccae39e5908f34d8229f83cee33cf Mon Sep 17 00:00:00 2001 From: Mariusz Sygnowski Date: Mon, 17 Sep 2018 21:09:15 +0100 Subject: [PATCH 16/16] revert to UK news and code polishing --- js/app.js | 21 ++------------------- 1 file changed, 2 insertions(+), 19 deletions(-) diff --git a/js/app.js b/js/app.js index ab92d22..fd38080 100644 --- a/js/app.js +++ b/js/app.js @@ -1,10 +1,8 @@ const main = document.querySelector('.main'); -// fetch('https://newsapi.org/v2/top-headlines?apiKey=454852947b2747dabc52cf3ebcf4807c&country=au') +// fetch('https://newsapi.org/v2/top-headlines?apiKey=454852947b2747dabc52cf3ebcf4807c&country=pl') -// fetch('https://newsapi.org/v2/top-headlines?sources=bbc-news&apiKey=454852947b2747dabc52cf3ebcf4807c') -fetch('https://newsapi.org/v2/top-headlines?apiKey=454852947b2747dabc52cf3ebcf4807c&country=pl') +fetch('https://newsapi.org/v2/top-headlines?sources=bbc-news&apiKey=454852947b2747dabc52cf3ebcf4807c') .then(function (response) { - // console.log(response); return response.json(); }) .then(function (body) { @@ -39,19 +37,6 @@ fetch('https://newsapi.org/v2/top-headlines?apiKey=454852947b2747dabc52cf3ebcf48 articleNews.append(sectionMainDescription); - // const sectionMainContent = document.createElement('section'); - // sectionMainContent.className = 'main__articleNews__content'; - - // urlContentElement.className = 'main__articleNews__content__url'; - // urlContentElement.setAttribute('href', urlContent); - // urlContentElement.setAttribute('target', '_blank'); - // urlContentElement.textContent = 'click here for full article'; - // sectionMainContent.textContent = `${articleContent}`; - // sectionMainContent.append(document.createElement('br')); - // sectionMainContent.append(urlContentElement); - - // articleNews.append(sectionMainContent); - const sectionMainImage = document.createElement('figure'); sectionMainImage.className = 'main__articleNews__image'; sectionMainImage.style.backgroundImage = `url("${article.urlToImage}")`; @@ -69,8 +54,6 @@ fetch('https://newsapi.org/v2/top-headlines?apiKey=454852947b2747dabc52cf3ebcf48 main.append(articleNews); }) - - }) .catch(function (error) { console.log('Server failed to return data: ' + error);