diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..f0fb71a Binary files /dev/null and b/.DS_Store differ diff --git a/DaveNewslogo.png b/DaveNewslogo.png new file mode 100644 index 0000000..9d0a00e Binary files /dev/null and b/DaveNewslogo.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..9b80701 --- /dev/null +++ b/index.html @@ -0,0 +1,38 @@ + + + + + + + + DaveNews + + + +
+
+

DaveNews

+ +
+
+
+ + +
+
+
+
+
+
+
+
+
+ +
+
+

DaveNews

+
+
+ + + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 0000000..a62b29f --- /dev/null +++ b/index.js @@ -0,0 +1,157 @@ +//cd79c8caed5c47f4ae25ec30f7cca674 is API key + + +//Defaults search term to UK news, page 1 +let pageNumberGlobal = 1; +let searchResult = "uk"; +upDateUrl(pageNumberGlobal, searchResult); +updateSideBarUrl(pageNumberGlobal); + +//Increases page number by 1 everytime the load more button is pressed +const loadMoreButton = document.querySelector(".load_more_button"); +loadMoreButton.addEventListener("click", function (event){ + pageNumberGlobal ++; + upDateUrl(pageNumberGlobal, searchResult); + updateSideBarUrl(pageNumberGlobal); + }); + + +//Creates and updates search term, defaults page number to 1 + let searchInput = document.querySelector(".search_form"); +searchInput.addEventListener("submit", function(event){ + let searchContent = document.querySelector(".search_box").value; + let previousArticles = document.querySelectorAll(".article_box"); + event.preventDefault(); + searchResult = searchContent; + previousArticles.forEach(node => { + node.parentNode.removeChild(node); + }); + upDateUrl(1, searchResult); +}); + + + +//Updates search URL with search terms and page numbers +function upDateUrl(number, term) { + let defaultUrlFirst = "https://newsapi.org/v2/everything?q="; + let defaultUrlSecond = "&language=en&sortBy=publishedAt&apiKey=cd79c8caed5c47f4ae25ec30f7cca674&page=" + newsUrl = defaultUrlFirst + term + defaultUrlSecond + number; + generateNews(newsUrl); +}; + + +//Fetches news API +function generateNews(url) { + fetch(url) + .then(response => { + // console.log("promise has been resolved") + return response.json(); + }) + .then(body => { + // pullNewsObject(body); + createNewsContent(body); + }); + } + + +// Exploratory function to examin keys in news JSON object. + +function pullNewsObject(news) { + console.log(news); + news.articles.forEach(article => { + console.log(article); + }) +}; + + +//Create .innerHTML of each news article div. + +function articleTemplate (article) { + let authorVar = ""; + let sourceVar = ""; + let imgVar = ""; + let textVar = ""; + (article.author === null) ? authorVar = "" : authorVar = article.author; + (article.source.name === null) ? sourceVar = "" : sourceVar = article.source.name; + (article.urlToImage === null) ? imgVar = "jc-gellidon-714673-unsplash.jpg" : imgVar = article.urlToImage; + (article.description === null) ? textVar = article.content : textVar = article.description; + return ` +

${article.title}

+
+

${textVar}

+ + Full article available here + ` +} + +//Appends each div to the content container. + +function createNewsContent(news) { + news.articles.forEach(item => { + if (item.content !== null && item.source.name !== "Bloomberg") { + const contentBody = document.querySelector(".news_content"); + const articleBox = document.createElement("div"); + articleBox.className = "article_box"; + articleBox.innerHTML = articleTemplate(item) + contentBody.append(articleBox); + } + }) +} + +//Fetches items for the sidebar + +function generateSideBar(url) { + fetch(url) + .then(response => { + // console.log("promise has been resolved") + return response.json(); + }) + .then(body => { + // pullNewsObject(body); + createSideBarContent(body); + }); + } + + + + +//Adds more items to the sidebar as the page number for main article increases +function updateSideBarUrl(number) { + let sidebarUrl = "https://newsapi.org/v2/everything?q=celebrity&q=hollywood&q=showbix&popculture&language=en&totalResults=10&sortBy=publishedAt&apiKey=cd79c8caed5c47f4ae25ec30f7cca674&page="; + sidebarUrl = sidebarUrl + number; + generateSideBar(sidebarUrl); +}; + + +//Creates template for sidebar articles +function sideBarTemplate (article) { + let authorVar = ""; + let sourceVar = ""; + (article.author === null) ? authorVar = "" : authorVar = article.author; + (article.source.name === null) ? sourceVar = "" : sourceVar = article.source.name; + return ` +

${article.title}

+
+ + Full article available here + ` +} + +//Appends all new content to sidebar + +function createSideBarContent(news) { + news.articles.forEach(item => { + if (item.content !== null && item.source.name !== "Bloomberg") { + const sideBar = document.querySelector(".news_sidebar"); + const featureBox = document.createElement("div"); + featureBox.className = "feature_box"; + featureBox.innerHTML = sideBarTemplate(item) + sideBar.append(featureBox); + } + }) +} \ No newline at end of file diff --git a/jc-gellidon-714673-unsplash.jpg b/jc-gellidon-714673-unsplash.jpg new file mode 100644 index 0000000..4272c1d Binary files /dev/null and b/jc-gellidon-714673-unsplash.jpg differ diff --git a/style.css b/style.css new file mode 100644 index 0000000..ca460ee --- /dev/null +++ b/style.css @@ -0,0 +1,261 @@ +body { + font-family: "PT Sans", sans-serif; + background-color: #F0FFF0; + margin: 0; + width: 100vw; +} + +li { + list-style-type: none; +} + +a { + text-decoration: none; + color: white; + transition: 0.2s; +} + +a:hover { + color: maroon; + text-decoration: underline; +} + +.app{ + display: flex; + flex-direction: column; + min-width: 100vw; + /* margin-left: 10px; */ + /* margin-right: 10px; */ +} + +.header { + border-bottom: 5px solid maroon; + color: maroon; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + font-size: 100%; + min-width: 100vw; +} + +.logo { + height: 30%; + width: 30%; +} + +.content_body { + /* display: flex; */ +} + +.search_form { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + padding-top: 10px; + padding-bottom: 10px; + border-bottom: 5px solid maroon; +} + +.search_box { + margin-right: 10px; + min-height: 30px; + min-width: 40vw; + font-size: 100%; +} + +.search_button { + height: 30px; + width: 20vw; + font-size: 14px; + background-color: #FDFDFD; + color: maroon; + transition: 0.1s; +} + +.search_button:hover { + background-color: maroon; + color: #FDFDFD; +} + +.news_content { + min-width: 90vw; +} + +.article_box { + background-color: #006989; + border: 1px solid black; + margin-top: 10px; +} + +.article_title { + color: white; + padding-left: 10px; + padding-top: 10px; + padding-bottom: 10px; + margin: 0; + border-bottom: solid 2px maroon; + background-color: #01A7C2; + font-size: 2em; + font-weight: 800; +} + +.image_container { + display: block; +} + +.article_image { + display: none; +} + +.article_content { + background-color: #01A7C2; + margin-left: 2px; + margin-right: 2px; + border: 1px solid black; + padding-left: 3px; +} + +.article_author_source_list { + padding-left: 5px; + color: white; +} + +.article_link { + display: flex; + justify-content: center; + margin-bottom: 5px; +} + +.news_sidebar { + display: none; +} + +.button_container { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + margin-top: 20px; + min-width: 100vw; +} + +.load_more_button { + background-color: #006989; + color: white; + font-size: 16px; + height: 40px; + transition: 0.2s; +} + +.load_more_button:hover { + text-decoration: underline; + color: maroon; +} + +.footer { + border-top: 5px solid maroon; + margin-top: 10px; + color: maroon; + display: flex; + justify-content: center; + font-size: 1.5em; +} + + +@media (min-width: 768px) { + + .app { + max-width: 90vw; + } + + .news_content { + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 100vw; + justify-content: space-evenly; + } + + .header { + min-width: 100vw; + font-size: 2em; + } + + .article_box { + margin-left: 5px; + margin-right: 5px; + width: 45%; + height: 100%; + } + + .article_title { + font-size: 2em; + } + + .image_container { + display: flex; + justify-content: center; + padding-top: 10px; + } + + .article_image { + display: flex; + border: 2px solid black; + height: 97%; + width: 97%; + } + + .load_more_button{ + font-size: 26px; + } +} + +@media (min-width: 960px) { + + + .content_body{ + display: flex; + flex-direction: row; + } + + .article_box { + margin-left: 10px; + margin-right: 0px; + width: 44%; + height: 100%; + } + + .news_content { + order: 2; + height: 100%; + min-width: 80vw; + justify-content: space-evenly; + } + + .news_sidebar { + display: flex; + flex-direction: column; + order: 1; + margin-left: 10px; + } + + .feature_box { + background-color: #006989; + border: 1px solid black; + margin-top: 10px; + color: white; + display: flex; + flex-direction: column; + justify-content: flex-start; + } + + .sidebar_source_list { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + } + +} \ No newline at end of file