Skip to content

responsive new reader PR #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
oilyquack wants to merge 6 commits into
base: master
Choose a base branch
from
Open

responsive new reader PR #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e2a9006
initial commit
oilyquack Jun 15, 2018
af72ee8
add sticky footer and img responsiveness
oilyquack Jun 15, 2018
9460f34
add countries dropdown list
oilyquack Jun 15, 2018
ad74d99
add countries searchability, grid layout at med width and sidebar
oilyquack Jun 15, 2018
23af806
add twitter feed
oilyquack Jun 18, 2018
fbcabc3
update search functionality
oilyquack Jun 18, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
114 changes: 114 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="index.css" type="text/css" rel="stylesheet">
<title>Responsive News Reader</title>
</head>

<!--API KEY: 814db06ca1814aeca4562dbafab25378-->
<body>

<div class="app">

<div class="app__header">

<header class="app__header__logo"><h1>RESPONSIVE NEWS READER</h1></header>

</div>

<div class="app__content">

<div class="app__content__body" id="articlesBody">
</div>

</div>

<div class="app__content__sidebar">

<a class="twitter-timeline" data-width="300" data-height="200" data-theme="light" href="https://twitter.com/NewsAPIorg?ref_src=twsrc%5Etfw">Tweets by NewsAPIorg</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

</div>

<footer class="app__footer">

<form class="app__footer__topic" id="searchTopic">
<p>What do you want to search for?</p><input id="topicSearchBar" placeholder="Topic">
<button>SEARCH</button>
</form>

<form class="app__footer__source" id="searchSource">
<p>Where do you want your news from?</p>
<select id="countries">
<option value="ar">Argentina</option>
<option value="at">Austria</option>
<option value="au">Australia</option>
<option value="be">Belgium</option>
<option value="bg">Bulgaria</option>
<option value="br">Brazil</option>
<option value="ca">Canada</option>
<option value="co">Colombia</option>
<option value="cu">Cuba</option>
<option value="cz">Czech Republic</option>
<option value="de">Germany</option>
<option value="eg">Egypt</option>
<option value="fr">France</option>
<option value="gr">Greece</option>
<option value="hk">Hong Kong</option>
<option value="hu">Hungary</option>
<option value="id">Indonesia</option>
<option value="ie">Ireland</option>
<option value="il">Israel</option>
<option value="in">India</option>
<option value="it">Italy</option>
<option value="jp">Japan</option>
<option value="lt">Lithuania</option>
<option value="lv">Latvia</option>
<option value="ma">Morocco</option>
<option value="mx">Mexico</option>
<option value="my">Malaysia</option>
<option value="nl">Netherlands</option>
<option value="nz">New Zealand</option>
<option value="ng">Nigeria</option>
<option value="no">Norway</option>
<option value="cn">People’s Republic of China</option>
<option value="pl">Poland</option>
<option value="pt">Portugal</option>
<option value="kr">Republic of Korea</option>
<option value="ph">Republic of the Phillipines</option>
<option value="ro">Romania</option>
<option value="ru">Russian Federation</option>
<option value="sa">Saudi Arabia</option>
<option value="rs">Serbia</option>
<option value="sg">Singapore</option>
<option value="si">Slovenia</option>
<option value="sk">Slovakia</option>
<option value="se">Sweden</option>
<option value="ch">Switzerland</option>
<option value="th">Thailand</option>
<option value="tr">Turkey</option>
<option value="tw">Taiwan</option>
<option value="ua">Ukraine</option>
<option value="ae">United Arab Emirates</option>
<option value="gb" selected>United Kingdom</option>
<option value="us">United States</option>
<option value="ve">Venezuela</option>
<option value="za">South Africa</option>

</select>
</form>

<div class="app__footer__credit">
<p>API powered by <a href="https://newsapi.org/" target="_blank">News API</a></p>
</div>

</footer>

</div>

<script src="src/index.js"></script>

</body>
</html>
48 changes: 48 additions & 0 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
function submitHandler(event) {
event.preventDefault();

// Capture search term
const getTopic = document.querySelector("#topicSearchBar");
const topicToSearch = getTopic.value;

const country = document.querySelector("#countries");
const countryToSearch = country.value;

// Get news information

const url = `https://newsapi.org/v2/top-headlines?country=${countryToSearch}&q=${topicToSearch}&apiKey=814db06ca1814aeca4562dbafab25378`;

fetch(url)
.then(function(response){
return response.json();
}).then(function(data){
Copy link
Contributor

@dmitrigrabov dmitrigrabov Jul 1, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it would be nice to break out HTML generation code into own function


console.log(data);

const articlesLength = data.articles.length;

if (articlesLength > 0) {

const results = data.articles.map(article =>
`<div class="app__content__body__article"><a href="${article.url}" target="_blank"><h2>${article.title}</h2></a><img class="app__content___body__article--img" src="${article.urlToImage}"><h3>${article.source.name}</h3><p>${article.description}</p><p>Author: ${article.author}</p></div>
`
).join('');
getTopic.value = '';

const resultsEl = document.querySelector('#articlesBody');

resultsEl.innerHTML = results;
}

else {
alert('Hmm, slow news day. Maybe search for something else.');
}

}).catch(function(error){
alert('Sorry, I couldn\'t find anything.');
});
}

const getSubmit = document.querySelector("#searchTopic");

getSubmit.addEventListener("submit", submitHandler);