diff --git a/index.html b/index.html new file mode 100644 index 0000000..e3a4c64 --- /dev/null +++ b/index.html @@ -0,0 +1,72 @@ + + + + + + News App + + + + + +
+
+

📰 Good or Bad News First? 📰

+
+ + +
+
+
+ +
+
+
+ +
+ + + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 0000000..524e563 --- /dev/null +++ b/index.js @@ -0,0 +1,84 @@ +const form = document.querySelector("#newsform"); +const input = document.querySelector("#input"); +const results = document.querySelector("#news__results__container"); +const country = document.querySelector("#countries"); +const category = document.querySelector("#categories"); +const goodBad = document.querySelector("#good__bad"); +const storedSearch = document.querySelector("#stored__search"); + +function fetchNews(search) { + fetch( + `https://newsapi.org/v2/everything?q=${search}&from=2018-06-15&sortBy=popularity&apiKey=4150b2f03a834ff68cffe0f3a011f41e` + ) + .then(function(response) { + return response.json(); + }) + .then(function(json) { + display(json); + console.log(json); + }) + .catch(function(error) { + console.log(error); + }); +} +function fetchNation(nation) { + fetch( + `https://newsapi.org/v2/sources?country=${nation}&apiKey=4150b2f03a834ff68cffe0f3a011f41e` + ) + .then(function(response) { + return response.json(); + }) + .then(function(nationJson) { + console.log(nationJson); + display(nationJson); + }) + .catch(function(error) { + console.log("No news is good news!"); + }); +} +function display(myJson) { + let newsResults = myJson.articles + .map(function(news) { + return ` +
+ +
+

${news.title}

 +

Date Published: ${news.publishedAt}

+

${news.author}

+

${news.source.name}

+

${news.description}

+
+ +
+
+ +
+ `; + }) + .join(""); + + results.innerHTML = newsResults; +} + +form.addEventListener("submit", function(event) { + event.preventDefault(); + fetchNews(input.value); +}); + +goodBad.addEventListener("change", function(event) { + event.preventDefault(); + fetchNews(goodBad.value); +}); + +category.addEventListener("change", function(event) { + event.preventDefault(); + fetchNews(category.value); +}); + +country.addEventListener("change", function(event) { + event.preventDefault(); + fetchNews(country.value); +}); diff --git a/stylesheet.css b/stylesheet.css new file mode 100644 index 0000000..477605e --- /dev/null +++ b/stylesheet.css @@ -0,0 +1,145 @@ +* { + box-sizing: border-box; +} + +body { + margin: 0; + padding: 0; + font-family: Karla; + min-height: 100vh; +} + +.wrapper { + display: flex; + flex-direction: column; + + height: 100vh; + background: hotpink; +} + +.mainhead { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + + background: lightgreen; +} + +.mainhead__links li { + float: left; + list-style: none; + margin-right: 10px; +} + +.maincontent { + flex: 1; + + display: flex; + flex-direction: column; + + text-align: center; + background: lemonchiffon; +} + +.maincontent__body { + background: whitesmoke; + overflow: auto; +} + +.results__body { + flex: 1; + + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; +} + +.maincontent__nav { + list-style: none; + justify-content: space-between; +} + +.li__nav { + margin: 10px 0; +} + +.mainfooter { + display: flex; + justify-content: space-around; +} + +.mainfooter__item { + flex: 1; + + padding: 10px; + text-align: center; +} + +.mainfooter__item--link { + background: yellow; +} + +.news__image { + max-width: auto; + display: none; +} + +@media (min-width: 768px) { + .maincontent { + flex-direction: row; + } + .maincontent__nav { + flex: 2; + } + .maincontent__body { + flex: 4; + } + + .mainfooter__item { + padding: 20px; + } + + .results__body { + flex: 2; + + display: flex; + flex-direction: column; + justify-content: space-between; + text-align: center; + } + + .news__image { + max-width: 400px; + display: block; + text-align: center; + } +} + +@media (min-width: 960px) { + .maincontent { + flex-direction: row; + } + .maincontent__nav { + flex: 2; + } + .maincontent__body { + flex: 4; + } + + .mainfooter__item { + padding: 30px; + } + + .imageparent { + display: block; + align-content: center; + text-align: center; + } + + .news__image { + max-width: 500px; + display: block; + } +}