diff --git a/README.md b/README.md index e062a87..85087d5 100644 --- a/README.md +++ b/README.md @@ -39,3 +39,8 @@ Let's create a responsive news reader website. To get the latest news the app wi ## README.md When finished, update this README.md file in your repo. This should explain what the project is, how to run it and how to use it. Someone who is not familiar with the project should be able to look at it and understand what it is and what to do with it. This is quite important as you want to put projects in your portfolio and the information provided here will help a reviewer understand what it is they are looking at. + +This project is a responsive news reader which gathers date from the news API. +Once the page loads the top news content will only show on article at a time using a slideshow function. Below the breaking news section is the trending news section, which shows three articles at a time. +Users can use the search bar to find related news to their search, this will still only show three latest articles related to the search. The search functionality does not effect the breaking news content + diff --git a/index.html b/index.html new file mode 100644 index 0000000..643dd47 --- /dev/null +++ b/index.html @@ -0,0 +1,54 @@ + + + + + + + + + + + + + + + +
+

Today's Top Stories

+ + +
+
+ +

Trending News

+
+ + + + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..c8a0c3c --- /dev/null +++ b/script.js @@ -0,0 +1,123 @@ +// functions +//function for creating a element +function createNode(element) { + return document.createElement(element) +} + +// appendchild function +function append(parent, element) { + return parent.appendChild(element) +} + +//function for topstory, only one page at a time +function getTopStory(pageNumber) { + const topStoryUrl = `https://newsapi.org/v2/top-headlines?country=gb&pageSize=1&apiKey=287554a05efe4127bd911a0a216a7b64&page=${pageNumber}`; + fetch(topStoryUrl) + .then(response => { + return response.json() + }) + .then(body => { + const topUsaNewsArticles = body.articles + return topUsaNewsArticles.map(article => { + topStoryDiv.innerHTML = ""; + const mainImg = createNode("img") + const header = createNode("h1") + const span = createNode("span") + const link = createNode("a") + const swiper = createNode("p") + const published = createNode("p") + header.innerHTML = `

${article.title}

` + mainImg.setAttribute("src", article.urlToImage || 'http://placekitten.com/200/300') + span.innerHTML = `

${article.description || `Nothing to display`}

` + link.innerHTML = `

Read More

` + published.innerHTML = `

${article.published || `Posted Today`}

` + // swiper.innerHTML = `

swipe for latest News

` + append(topStoryDiv, header) + append(topStoryDiv, mainImg) + append(topStoryDiv, published) + append(topStoryDiv, swiper) + append(topStoryDiv, span) + append(topStoryDiv, link) + }) + }) +} + +//for slideshow of articles on topstory content +function nextSlide() { + pageNumber++; + getTopStory(pageNumber); +} +//function for creating trending news +function content(url) { + fetch(url) + .then(response => { + return response.json() + }) + .then(body => { + console.log(body) + const techNews = body.articles + return techNews.map(article => { + // techNewsDiv.innerHTML=""; + const mainImg = createNode("img") + const header = createNode("h1") + const span = createNode("span") + const link = createNode("a") + const swiper = createNode("p") + const published = createNode("p") + header.textContent = article.title + mainImg.setAttribute("src", article.urlToImage || 'http://placekitten.com/200/300') + span.innerHTML = `

${article.description || `Nothing to display`}

` + link.innerHTML = `

Read More

` + published.innerHTML = `

${article.published || `Posted Today`}

` + + append(trendNewsDiv, header) + append(trendNewsDiv, mainImg) + append(trendNewsDiv, published) + + append(trendNewsDiv, span) + append(trendNewsDiv, link) + }) + }) +} + +//search function, which is through onclick +function searchNews() { + let keyword = '"' + document.querySelector("#search_input").value.replace(" ", "") + + '"'; + + let apiKey = "287554a05efe4127bd911a0a216a7b64"; + + let sortBy = "publishedAt"; + + let newsUrl = `https://newsapi.org/v2/everything?q=${keyword}&pageSize=3&sortBy=${sortBy}&apiKey=${apiKey}`; + + trendNewsDiv.innerHTML = ""; + + contentH1.innerHTML = `Trending ${keyword} News` + content(newsUrl); +} + + + +//varibles and selectors +const usaNews = `https://newsapi.org/v2/top-headlines?country=us&pageSize=1&apiKey=287554a05efe4127bd911a0a216a7b64&page=${pageNumber}`; +const ukButton = document.querySelector("#ukButton") +const usaButton = document.querySelector("#usaButton") +const topStoryDiv = document.querySelector("#main"); +const trendNewsDiv = document.querySelector(".trendingNews") +const techUrl = `https://newsapi.org/v2/top-headlines?sources=techcrunch&pageSize=3&apiKey=287554a05efe4127bd911a0a216a7b64` +var pageNumber = 1; +const contentH1 = document.querySelector("#trendNews") +getTopStory(1); //reset page back page 1 +content(techUrl) +let slideInterval = setInterval(nextSlide,4000); + + + +//menu toggle +var open_menu = document.querySelector("#main-menu"); +var burger_menu = document.querySelector("#burger_menu"); +burger_menu.addEventListener("click", function () { + burger_menu.classList.toggle("active-burger"); + open_menu.classList.toggle("show-menu-mobile"); +}); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..8b45fb5 --- /dev/null +++ b/style.css @@ -0,0 +1,200 @@ +* { + box-sizing: border-box; +} + +body { + text-align: center; + margin: 0; + font-family: Arial; +} + + +img { + + width: 40vh; + height: 30vh; +} + + +.topButtons { + text-transform: uppercase; + background-color: black; + color: #fff; + margin: 10px 10px; + padding: 5px 15px; + border-radius: 40%; +} + +.topButtons:hover { + transform: scale(1.1); +} + +.btn-more { + display: inline-block; + text-transform: uppercase; + color: #0e2f44; + font-size: 0.8rem; + border: 1px solid #0e2f44; + margin: 10px 0; + padding: 5px 15px; + text-decoration: none; +} + +.btn-more:hover { + background-color: #0e2f44; + color: #fff; + transition: 0.4s; + text-decoration: underline; +} + + +ul { + display: flex; + justify-content: center; + margin-right: 45px; +} + +li { + display: inline-block; + +} + + +.publishedAt { + font-size: 10px; +} + +.top-content { + display: flex; + flex-direction: column; + justify-content: center; + align-content: center; + background-color: red; + +} + + + + + +/* Navbar */ + +nav { + background-color: black; + display: flex; + justify-content: space-between; + align-items: center; + position: relative; +} + +nav .logo-container { + color: white; + margin-left: .5em; + font-size: 1.5em; +} + +nav ul { + display: flex; + padding: 0; + margin: .5em 0 .5em 0; +} + +nav li { + list-style: none; + margin-right: 1em; + padding: .8em; +} + +nav li:hover { + background-color: #8a929a; +} + +nav a { + color: white; + text-decoration: none; +} + +.container-burger { + display: none; + cursor: pointer; + position: absolute; + right: .5em; +} + +.line1, +.line2, +.line3 { + width: 30px; + height: 3px; + background-color: white; + margin: 5px 0; + transition: .2s; +} + +.active-burger .line1 { + transform: rotate(-45deg) translate(-6px, 5px); +} + +.active-burger .line2 { + opacity: 0; +} + +.active-burger .line3 { + transform: rotate(45deg) translate(-6px, -5px); +} + +.show-menu-mobile { + display: flex; + flex-direction: column; + align-items: center; +} + + + + + + +/* media queries */ +@media screen and (max-width: 749px) { + .container-burger { + display: block; + } + + nav { + flex-direction: column; + align-items: flex-start; + padding: .5em 0; + /* max-height: 16vh; */ + } + + nav ul { + display: none; + margin: 0; + width: 100%; + } + + nav .logo-container { + font-size: 1.0em; + padding: 0.8em + } +} + + + +/* ipad screen and desktop */ +@media screen and (min-width: 780px) { + img { + display: flex; + height: 4s0vh; + width: 60vh; + margin-left: 5vh; + + } + + .article-header { + /* font-size: 1.75rem; */ + + display: inline-block; + + } +} \ No newline at end of file