From 04ccf0d043a701ad1c9cc021069c12d3f722cdc6 Mon Sep 17 00:00:00 2001 From: Ahmed Date: Fri, 15 Jun 2018 14:39:01 +0100 Subject: [PATCH 1/4] project started. Basic design implemented --- code.js | 0 index.html | 38 +++++++++++++++ style.css | 134 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 172 insertions(+) create mode 100644 code.js create mode 100644 index.html create mode 100644 style.css diff --git a/code.js b/code.js new file mode 100644 index 0000000..e69de29 diff --git a/index.html b/index.html new file mode 100644 index 0000000..223ba6d --- /dev/null +++ b/index.html @@ -0,0 +1,38 @@ + + + + + + + Practice document + + +
+
+

LOGO

+
+ + +
+
+
+ +
+

main content

+
+ +
+ +
+
notes
+
map
+
+
+ + + diff --git a/style.css b/style.css new file mode 100644 index 0000000..1d972d1 --- /dev/null +++ b/style.css @@ -0,0 +1,134 @@ +*{ + box-sizing: border-box; +} + +body{ + margin:0; +} + +.app { + text-align: center; + display:flex; + flex-direction: column; + height: 100vh; + background: salmon; + +} + +.masterhead{ + background: blueviolet; + display:flex; + height: 15vh; + flex-direction: column; + justify-content: space-between; +} + +.masterheader__logo{ + +} + +.buttons_container{ + diplay:flex; + +} + +.masterhead__button{ + +} + +.content{ + + display: flex; + flex-direction: column; + height: 75vh; + +} + +.content__nav{ + background: lime; + flex:1 + +} + +.content__body{ + background:darkkhaki; + flex:4 +} + +.content__sidebar{ + display: none; + background: teal; + flex:1 +} + +.footer{ +display: flex; +flex-direction: row; +height: 10vh; +} + +.footer__notes{ + background: red; + flex:2; + +} + +.footer__map{ + background: Magenta; + flex:2 +} + +@media(min-width: 768px){ + .masterhead { + display:flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + } + + .footer, + .content { + display:flex; + flex-direction: row; + } + + .content__nav { + flex:2; + } + + .content__body{ + flex:4; + } + + .footer__notes, + .footer__map { + flex: 1; + } + +} + +@media (min-width: 960px) { + .content__sidebar{ + flex: 1; + display: block; + } + .content__nav{ + flex:1; + } + .content__body{ + flex:5; + } +} + +@media(min-width: 1200px) { + .content__sidebar{ + flex: 2; + display: block; + } + .content__nav{ + flex:1; + } + .content__body{ + flex:4; + } +} From 9889d4889f3d53ad4c27963dc066f86e84485172 Mon Sep 17 00:00:00 2001 From: Ahmed Date: Sat, 16 Jun 2018 18:14:02 +0100 Subject: [PATCH 2/4] fetched news is now being displayed --- code.js | 45 +++++++++++++++++++++++++++++++++++++++++++++ index.html | 10 ++++++---- style.css | 46 +++++++++++++++++++++++++++++++++++++--------- 3 files changed, 88 insertions(+), 13 deletions(-) diff --git a/code.js b/code.js index e69de29..c702fe9 100644 --- a/code.js +++ b/code.js @@ -0,0 +1,45 @@ +// varibles +const myMain = document.querySelector(".content__body"); +const searchBox = document.querySelector(".searchform__textbar"); +const myForm = document.querySelector(".searchform"); + +//functions +function submitHandler(event) { + event.preventDefault(); + let search= searchBox.value; + fetch( + `https://newsapi.org/v2/everything?q=${search}&from=2018-06-01&sortBy=popularity&apiKey=cacb9f078d714b02b4baa44f3eea29f8` + ) + .then(function(response) { + return response.json(); + }) + .then(function(jsonData) { + showResults(jsonData); + console.log(jsonData); + }) + .catch(function(error) { + alert("error"); + }); +} + +function showResults(data){ + let style=""; + let counter=1; + console.log(data) + const news= data.articles.map(article => { + if(counter ==1) + style="article1" + else + style="article2" + counter=counter*-1 + return `

Title: ${article.title}


+ + Description: ${article.description}.
+ Publication Date: ${article.publishedAt}.
+
` + }); + myMain.innerHTML=news; +} + +//body +myForm.addEventListener("submit", submitHandler); diff --git a/index.html b/index.html index 223ba6d..dcaa56d 100644 --- a/index.html +++ b/index.html @@ -4,8 +4,7 @@ - Practice document +
@@ -18,10 +17,13 @@

LOGO

-

main content

+