week3 responsive-news-reader

code.js

@@ -0,0 +1,166 @@
+// varibles
+const myMain = document.querySelector(".content__body");
+const searchBox = document.querySelector(".searchform__textbar");
+const myForm = document.querySelector(".searchform");
+const prev= document.querySelector(".footer__prev");
+const next= document.querySelector(".footer__next");
+const sideBar= document.querySelector(".content__sidebar");
+const myHistory= document.querySelector(".history__items");
+const clearH=document.querySelector(".clear")
+let page=1;
+let search="";
+//localStorage.setItem('history', JSON.stringify([]));
+let history = JSON.parse(localStorage.getItem('history'));
+
+//functions
+
+
+function submitHandler(event) {
+ event.preventDefault();
+ search= searchBox.value;
+ if(! history.find(function(word){
+ return search==word;
+ }))
+ {history.push(search);}
+
+showHistory();
+ localStorage.setItem('history', JSON.stringify(history));
+ fetch(
+ `https://newsapi.org/v2/everything?q=${search}&from=2018-06-01&sortBy=popularity&apiKey=cacb9f078d714b02b4baa44f3eea29f8`
+ )
+ .then(function(response) {
+ return response.json();
+ })
+ .then(function(jsonData) {
+ showResults(jsonData);
+ prev.style.display="block";
+ next.style.display="block";
+
+ })
+ .catch(function(error) {
+ alert("error");
+ });
+}
+
+function showResults(data){
+ let style="";
+ let counter=1;
+ const news= data.articles.map(article => {
+ if(counter ==1)
+ style="article1"
+ else
+ style="article2"
+ counter=counter*-1
+ return `<div class="${style}"><a href="${article.url}"><h2>${article.title}</h2></a><br>
+ <img class="article__img" src="${article.urlToImage}"></img>
+ Description: ${article.description}.<br>
+ Publication Date: ${article.publishedAt}.<br>
+ </div>`
+ });
+ myMain.innerHTML=news;
+}
+
+function nextHandler(event){
+ page++;
+ fetch(
+ `https://newsapi.org/v2/everything?q=${search}&from=2018-06-01&page=${page}&sortBy=popularity&apiKey=cacb9f078d714b02b4baa44f3eea29f8`
+ )
+ .then(function(response) {
+ return response.json();
+ })
+ .then(function(jsonData) {
+ window.scrollTo(0, 0);
+ showResults(jsonData);
+ })
+ .catch(function(error) {
+ alert("error");
+ });
+}
+
+function prevHandler(event){
+ if(page<=1){
+ alert("This is the first page")
+ }
+else{
+ page--;
+ fetch(
+ `https://newsapi.org/v2/everything?q=${search}&from=2018-06-01&page=${page}&sortBy=popularity&apiKey=cacb9f078d714b02b4baa44f3eea29f8`
+ )
+ .then(function(response) {
+ return response.json();
+ })
+ .then(function(jsonData) {
+ window.scrollTo(0, 0);
+ showResults(jsonData);
+ })
+ .catch(function(error) {
+ alert("error");
+ });
+ }
+}
+
+function headlines(){
+
+ fetch(
+ `https://newsapi.org/v2/top-headlines?country=us&apiKey=cacb9f078d714b02b4baa44f3eea29f8`
+ )
+ .then(function(response) {
+ return response.json();
+ })
+ .then(function(jsonData) {
+ for(let i=0;i<5;i++){
+ sideBar.innerHTML+= `<a href="${jsonData.articles[i].url}">${jsonData.articles[i].title}</a><br><br>`
+ }
+ })
+ .catch(function(error) {
+ alert("error");
+ });
+}
+
+function historyHandler(event){
+if(event.target.classList=="searched"){
+ search=event.target.textContent;
+ fetch(
+ `https://newsapi.org/v2/everything?q=${search}&from=2018-06-01&sortBy=popularity&apiKey=cacb9f078d714b02b4baa44f3eea29f8`
+ )
+ .then(function(response) {
+ return response.json();
+ })
+ .then(function(jsonData) {
+ showResults(jsonData);
+ searchBox.value=search;
+ prev.style.display="block";
+ next.style.display="block";
+
+ })
+ .catch(function(error) {
+ alert("error");
+ });
+}
+}
+
+function showHistory (){
+ const historyList= history.map(function(topic){
+ return `<i class="searched"> ${topic} </i>`
+ });
+ myHistory.innerHTML=historyList;
+}
+
+function clearHistory(event){
+history=[];
+localStorage.setItem('history', JSON.stringify(history));
+ showHistory();
+}
+
+
+//body
+myForm.addEventListener("submit", submitHandler);
+prev.addEventListener("click",prevHandler);
+next.addEventListener("click",nextHandler);
+myHistory.addEventListener("click",historyHandler);
+clearH.addEventListener("click", clearHistory)
+headlines();
+showHistory ();
+
+
+

index.html

@@ -0,0 +1,46 @@
+<!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 rel="stylesheet" href="style.css">
+</head>
+<body>
+ <img src="pic.png" class="no1200">
+ <div class="app">
+ <header class="masterhead">
+ <h1 class="masterheader__logo">NewZZ</h1>
+ </header>
+ <div class="content">
+ <nav class="content__nav">
+ <form class="searchform">
+ <input type="text" class="searchform__textbar"></input>
+ <button type="submit" class="searchform__button">Search </button>
+ </form> <br>
+
+ <div class="history">
+
+ <p class="history__items"></p>
+ <p class="clear">!clear history!</p>
+ </div>
+
+ </nav>
+
+ <main class="content__body">
+
+ </main>
+ <aside class="content__sidebar">
+ <h3>Top 5 Headlines</h3>
+ </aside>
+ </div>
+
+ <footer class="footer">
+ <div class="footer__prev">Previous Page</div>
+ <div class="footer__next">Next Page</div>
+ </footer>
+ </div>
+<script src="code.js"> </script>
+</img>
+</body>
+</html>

mytxt.txt

@@ -0,0 +1,3 @@
+ab
+cd
+ef