constructorlabs · TonyGriffin · Sep 17, 2018 · Sep 17, 2018 · dmitrigrabov · Sep 18, 2018
diff --git a/.DS_Store b/.DS_Store
diff --git a/facebook.png b/facebook.png
diff --git a/responsivenewsreader.css b/responsivenewsreader.css
@@ -0,0 +1,160 @@
+/* Deafult appearance settings for mobile devices */
+body {
+  /* world image entered here: */
+  background-image: url("worldmap.png");
+  /* background-color: rgb(229, 232, 232); */
+  color: black;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  border: solid;
+  border-color: #2F4F4F;
+  border-radius: 20px;
+  border-width: 30px;
+}
+
+h1 {
+  color: #CD5C5C;
+  font-size: 100px;
+  background: rgba(169,169,169,0.5);
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  text-decoration: underline;
+  text-shadow: #FFFF00 1px 0 50px;
+  flex: 1;
+}
+
+img {
+  display: none;
+  width: 100%;
+}
+
+#searchText{
+  margin-bottom: 10px;
+}
+
+#goButton {
+  margin-top: 10px;
+}
+
+#goButton:hover {
+  text-decoration: overline underline;
+  background: #FAFAD2;
+
+}
+
+#articles {
+  /* display: flex;
+  flex: 2; */
+  /* border: 10px solid blue; */
+  font-size: 40px;
+  border: solid;
+  border-color: #2F4F4F;
+  border-radius: 20px;
+  border-width: 10px;
+  flex-direction: column;
+  align-self: center;
+  margin: 20px;
+  /* background: rgba(169,169,169,0.5); */
+  /* margin: 20 0 20 0px; */
+}
+
+li {
+  display: flex;
+  flex-direction: column;
+  align-content: center;
+  flex: 1;
+  /* background-color: rgba(148, 103, 193,0.6); */
+  background: rgba(175,238,238, 0.5);
+  /* background-color: rgba(169,169,169,0.5); */
+  padding: 50px;
+  margin: 10px;
+  margin-right: 50px;
+  border-radius: 20px;
+  list-style: none;
+}
+
+.ul {
+  background: rgba(169,169,169,0.5);
+  /* border-radius: 20px; */
+  margin-right: 0;
+  text-align: center;
+}
+
+.content{
+  /* background: rgba(169,169,169,0.5); */
+}
+
+.ul:hover {
+  color: #FFD700;
+}
+
+#footer {
+  /* background-color: rgba(255, 255, 0,0.3); */
+  background: rgba(175,238,238, 0.5);
+  height: 40px;
+  border-radius: 20px;
+  margin-bottom: 20px;
+  border: solid;
+  border-color: #2F4F4F;
+  text-align: center;
+
+  /* border-color: #2F4F4F;
+  border-width: 5px; */
+  /* border-color: #2F4F4F; */
+}
+
+#aside {
+  display: none;
+}
+
+
+
+/* Medium devices (tablets, 768px and up) */
+@media (min-width: 768px) {
+
+  img {
+    display: block;
+    width: 100%;
+  }
+
+}
+
+/* Large devices (desktops, 960px and up) */
+@media (min-width: 960px) {
+
+  .content{
+    display: flex;
+    flex-direction: row;
+  }
+
+  #articles {
+    flex: 2;
+  }
+
+  #aside{
+    display: block;
+    flex: 1;
+    background: rgba(175,238,238, 0.5);
+    border: solid;
+    border-color: #2F4F4F;
+    border-radius: 20px;
+    border-width: 10px;
+    margin-bottom: 16px;
+    margin-top: 15px;
+  }
+
+
+
+
+
+
+
+
+}
+
+/* Extra large devices (large desktops, 1200px and up) */
+@media (min-width: 1200px) {
+
+}
diff --git a/responsivenewsreader.html b/responsivenewsreader.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="responsivenewsreader.css">
+    <title>News Reader</title>
+  </head>
+
+  <body>
+    <div class="all">
+
+      <header id="header">
+        <h1>My News!</h1>
+      </header>
+
+  <div class="row">
+      <nav class="navigation">
+         <ul class="ul">
+           <li class="nextTwentyStories"><a href="https://newsapi.org/v2/everything?p=20&apiKey=41a785bcf660443c92ded19ad436a52c">Next 20 Stories:</a></li>
+           <li>
+             <form class="search">
+               <input id="searchText"type="search" name="q" placeholder="Search query">
+               <button id="goButton">GO!</button>
+             </form>
+           </li>
+         </ul>
+       </nav>
+
+    <div class="content">
+       <ul id="articles"></ul>
+       <aside id="aside">
+         <p><a id="facebooksymbol" href="https:www.facebook.com" target="_blank"> <img class="facebook" src="facebook.png"></a></p>
+         <p><a id="twittersymbol" href="https:www.twitter.com" target="_blank"> <img class="twitter" src="twitter.png"></a></p>
+         <p><a id="skynewssymbol" href="https://news.sky.com/uk" target="_blank"> <img class="skynews" src="skynews.png"></a></p>
+       </aside>
+    </div>
+
+    <footer id="footer">Nothing To See Here Yet</footer>
+  </div>
+
+     <script  src="responsivenewsreader.js"></script>
+
+    </div>
+  </body>
+</html>
diff --git a/responsivenewsreader.js b/responsivenewsreader.js
@@ -0,0 +1,76 @@
+let pageNumber = 1;
+
+function displayDataOnPage(newsOutput){
+  // implement display logic here
+  console.log(newsOutput);
+
+  let parent = document.querySelector("#articles");
+
+  newsOutput.forEach( article => {
+    let child = document.createElement("li");
+        child.innerHTML = `<h3 class="title"> ${article.title} </h3>
+        <img class="images"src=${article.urlToImage}>
+        <p class="description"> ${article.description}</p>
+        <p class="publisehed"> ${article.publishedAt}</p>
+        <a class="url" href=${article.url}>CLICK here for story</a>`
+        parent.appendChild(child);
+  })
+}
+
+
+function search( query, pageNumber ){
+  fetch(`https://newsapi.org/v2/everything?q=${query}&apiKey=41a785bcf660443c92ded19ad436a52c&page=${pageNumber}`)
+  // by default fetch makes a GET request
+    .then(function(response) {
+      return response.json();
+    })
+    .then(function(body){
+      displayDataOnPage(body.articles);
+    })
+    .catch(function(error) {
+      displayErrorToUser('Server failed to return data');
+    });
+}
+
+
+
+function searchForm(){
+const form =  document.querySelector("form")
+
+  form.addEventListener("submit", function(event) {
+    event.preventDefault();
+    console.log(event.target["0"].value);
+    // get reference to text input
+    // submit its to search
+   search(event.target["0"].value, pageNumber)
+  })
+}
+
+searchForm();
+
+// let input = "";
+//
+// function textAreaInput(){
+//   let textArea = document.querySelector(".searchText");
+//   textArea.addEventListener("input", function(event) {
+//   input = event.target.value;
+//   return input;
+//   })
+// }
+
+function displayErrorToUser(){
+
+}
+
+
+fetch("https://newsapi.org/v2/top-headlines?country=gb&apiKey=41a785bcf660443c92ded19ad436a52c")
+// by default fetch makes a GET request
+  .then(function(response) {
+    return response.json();
+  })
+  .then(function(body){
+    displayDataOnPage(body.articles);
+  })
+  .catch(function(error) {
+    displayErrorToUser('Server failed to return data');
+  });
diff --git a/skynews.png b/skynews.png
diff --git a/twitter.png b/twitter.png
diff --git a/worldmap.png b/worldmap.png