diff --git a/index.html b/index.html new file mode 100644 index 0000000..1919b99 --- /dev/null +++ b/index.html @@ -0,0 +1,47 @@ + + + + + + + + + Document + + + +
+
+

+ News Reader +

+ +
+ +
+
News search +
+ + + +
+
+
News:
+ +
+ + +
+
Footer 1
+
Footer 2
+
Footer 3
+
+
+ + + + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 0000000..2e18e9c --- /dev/null +++ b/index.js @@ -0,0 +1,100 @@ +const newsDisplay = document.querySelector("#newsbody"); +const photodisplat = document.querySelector("#photopbody"); +const form = document.querySelector("#searchfield"); +const input = document.querySelector("input"); +const bbcButton = document.querySelector("#bbc"); +const topHeadlines = document.querySelector("#top"); + +fetch( + "https://newsapi.org/v2/top-headlines?" + + "country=us&" + + "apiKey=1a4b48d17f0e44148656196d121fb9c0" +) + .then(function(response) { + return response.json(); + }) + .then(function(data) { + console.log(data); + displayNews(data); + }) + .catch(function(error) { + console.log(error); + }); + +function displayNews(data) { + const html = data.articles + .map(function(news) { + return ` +
+
+

${news.title} + (${news.source.name}) +

+ ${news.description} +
+
+
+ `; + }) + .join(""); + + newsDisplay.innerHTML = html; +} + +form.addEventListener("submit", function(event) { + event.preventDefault(); + let searchContent = input.value; + fetch( + `https://newsapi.org/v2/everything?` + + `q=${searchContent}&` + + `from=2018-06-15&` + + `sortBy=popularity&apiKey=1a4b48d17f0e44148656196d121fb9c0` + ) + .then(function(response) { + return response.json(); + }) + .then(function(data) { + displayNews(data); + }) + .catch(function(error) { + console.log(error); + }); +}); + +bbcButton.addEventListener("click", function(event) { + event.preventDefault(); + fetch( + `https://newsapi.org/v2/top-headlines?` + + `sources=bbc-news&` + + `apiKey=1a4b48d17f0e44148656196d121fb9c0` + ) + .then(function(response) { + return response.json(); + }) + .then(function(data) { + displayNews(data); + }) + .catch(function(error) { + console.log(error); + }); +}); + +topHeadlines.addEventListener("click", function(event) { + event.preventDefault(); + fetch( + "https://newsapi.org/v2/top-headlines?" + + "country=us&" + + "apiKey=1a4b48d17f0e44148656196d121fb9c0" + ) + .then(function(response) { + return response.json(); + }) + .then(function(data) { + console.log(data); + displayNews(data); + }) + .catch(function(error) { + console.log(error); + }); +}); diff --git a/myCSS.css b/myCSS.css new file mode 100644 index 0000000..a099b43 --- /dev/null +++ b/myCSS.css @@ -0,0 +1,177 @@ +* { + box-sizing: border-box; +} + +body { + margin: 0; + font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; +} + +.container { + display: flex; + flex-direction: column; + height: 100vh; +} + +.header { + /* background-color: darksalmon; */ + display: flex; + flex-direction: column; + text-align: center; + /* height: 10vh; */ + padding: 10px; +} + +.header__logo { + margin: 0; + font-weight: 700; + background-color: rgba(45, 45, 45, 0.2); +} + +.header__buttons { + margin: 0; + padding: 0; + display: flex; + list-style: none; + justify-content: center; +} + +.header__buttons__li { + margin-right: 10px; + border: solid 1px; + border-radius: 5px; + text-align: center; + border-radius: 5px; + text-justify: auto; + padding: 2px; +} + +.content { + display: flex; + flex-direction: column; + height: 80vh; + justify-content: space-evenly; + text-align: center; +} + +.content__section1 { + background-color: rgba(210, 235, 181, 0.9); + flex: 1; + background-image: url(https://images.unsplash.com/photo-1484807088772-e156a5761699?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=c3bffb018350a4ea518e56b1be15ac19&auto=format&fit=crop&w=1951&q=80); + background-position: center; + border-radius: 20px; +} +.newsfeed { + float: left; +} +.newscontainer { + display: flex; + flex-direction: row; + font-size: 15px; + float: left; + padding: 10px; + border: solid 0.5px; + border-radius: 30px; + border-color: rgba(88, 85, 85, 1); + text-align: center; + justify-content: center; +} + +.newsimage { + display: none; + height: 200px; + width: 200px; + border-radius: 25px; + justify-content: flex-end; + padding: 4px; +} + +.content__body { + background-color: rgba(228, 235, 150, 0.1); + flex: 5; + overflow: auto; + padding: 10px; +} + +/* .content__section3 { + background-color: mediumslateblue; + display: none; + flex: 2; +} */ + +.footer { + display: flex; + flex-direction: column; + justify-content: space-between; + height: 10vh; + /* text-align: center; */ + margin: 0; +} + +.footer_section1 { + background-color: rgba(84, 81, 81, 0.2); + flex: 1; + text-align: center; +} + +.footer_section2 { + background-color: rgba(84, 81, 81, 0.3); + flex: 1; + text-align: center; +} + +.footer_section3 { + background-color: rgba(84, 81, 81, 0.5); + flex: 1; + text-align: center; +} + +@media (min-width: 768px) { + .content__section1 { + flex: 1; + } + + .content__body { + flex: 3; + } + + .content { + flex-direction: row; + } +} + +@media (min-width: 960px) { + .content__section1 { + flex: 1; + } + + .footer { + display: flex; + flex-direction: row; + flex: 1; + text-align: center; + } + + .newsimage { + display: block; + } +} + +@media (min-width: 1200px) { + .content__body { + flex: 3; + } + .content__section1 { + flex: 1; + } + + .content { + flex-direction: row; + } + + .footer { + display: flex; + flex-direction: row; + flex: 1; + } +}