Merge pull request #1 from sergeyzharko/1-ES6

1 es6
sergeyzharko · Jan 9, 2018 · ed32ab6 · ed32ab6
2 parents 1eddca7 + 626c409
commit ed32ab6
Show file tree

Hide file tree

Showing 5 changed files with 163 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,42 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+
+# dependencies
+/node_modules
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+testem.log
+/typings
+
+# e2e
+/e2e/*.js
+/e2e/*.map
+
+# System Files
+.DS_Store
+Thumbs.db
diff --git a/index.html b/index.html
@@ -0,0 +1,11 @@
+<html>
+    <head>
+        <title>News API</title>
+        <link rel="stylesheet" type="text/css" href="style.css">
+    </head>
+    <body>
+        <script type="text/javascript" src="script.js"></script>
+        <div class="buttons"></div>
+        <div class="news"></div>
+    </body>
+</html>
diff --git a/key.txt b/key.txt
@@ -0,0 +1 @@
+f53b56a81c57478689c3058487c41269
diff --git a/script.js b/script.js
@@ -0,0 +1,82 @@
+const sources = [
+    {
+        name: 'Google News',
+        logo: 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/8e/Google_News_Logo.svg/1200px-Google_News_Logo.svg.png',
+        link: 'google-news-ru'
+    },
+    {
+        name: 'BBC News',
+        logo: 'http://m.files.bbci.co.uk/modules/bbc-morph-news-waf-page-meta/1.2.0/bbc_news_logo.png',
+        link: 'bbc-news'
+    },
+    {
+        name: 'РБК',
+        logo: 'http://www.raketa.com/wp-content/uploads/RBC.jpg',
+        link: 'rbc'
+    }
+];
+
+
+var url = 'https://newsapi.org/v2/sources?' +
+'apiKey=f53b56a81c57478689c3058487c41269';
+
+var req = new Request(url);
+
+fetch(req)
+.then(function(response) {
+    console.log(response.json());
+})
+
+
+
+function loadSources() {
+    let buttons = document.querySelector('.buttons');
+
+    for (let source of sources) {
+        let button = document.createElement('div');
+        button.classList.add('source');
+        button.classList.add(source.link);
+        button.innerHTML = `
+            <img class="source-image" src="${source.logo}" alt="${source.name}">
+            <a href="#"><div class="picture lion"></div></a>`;
+        button.addEventListener('click', function(){ loadNews(source.link) });
+        buttons.appendChild(button);
+    }
+}
+
+document.addEventListener("DOMContentLoaded", loadSources);
+
+
+function loadNews(link) {
+    document.querySelectorAll('.source').forEach(function(element, index){
+        element.classList.remove('selected');
+    });
+
+    document.querySelector(`.${link}`).classList.add('selected');
+
+    var url = `https://newsapi.org/v2/top-headlines?sourceS=${link}&apiKey=f53b56a81c57478689c3058487c41269`;
+
+    var req = new Request(url);
+
+    fetch(req)
+    .then( response => response.json() )
+    .then( response => renderNews(response.articles) )
+}
+
+function renderNews(articles) {
+    let items = document.querySelector('.news');
+    items.innerHTML = '';
+    for (let article of articles) {
+        let dateTime = new Date(article.publishedAt);
+        let dateTimeRow = `${dateTime.getFullYear()}.${dateTime.getMonth()}.${dateTime.getDay()} ${dateTime.getHours()}:${dateTime.getMinutes()}`;
+        let item = document.createElement('div');
+
+        item.setAttribute('class', 'article');
+        item.innerHTML = `
+            <a href="${article.url}"><h4>${article.title}</h4></a>
+            <img class="news-image" src="${article.urlToImage}">
+            <p>${article.description}</p>
+            <p>Published: ${dateTimeRow}</p>`;
+        items.appendChild(item);  
+    }
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,27 @@
+.source {
+    cursor: pointer;
+    width: 150px;
+    display: inline-block;
+    margin: 10px;
+    padding: 10px;
+}
+
+.source-image {
+    height: 140px;
+    width: 150px;
+}
+
+.news-image {
+    height: 200px;
+}
+
+.article {
+    width: 50%;
+    margin-top: 20px;
+    padding: 5px;
+    border: solid gray 3px;
+}
+
+.selected {
+    border: solid green 3px;
+}