diff --git a/code.js b/code.js new file mode 100644 index 0000000..caba0d1 --- /dev/null +++ b/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 `

${article.title}


+ + Description: ${article.description}.
+ Publication Date: ${article.publishedAt}.
+
` + }); + 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+= `${jsonData.articles[i].title}

` + } + }) + .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 ` ${topic} ` + }); + 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 (); + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..d111090 --- /dev/null +++ b/index.html @@ -0,0 +1,46 @@ + + + + + + + + + + +
+
+

NewZZ

+
+
+ + +
+ +
+ +
+ + +
+ + + + diff --git a/mytxt.txt b/mytxt.txt new file mode 100644 index 0000000..1788552 --- /dev/null +++ b/mytxt.txt @@ -0,0 +1,3 @@ +ab +cd +ef \ No newline at end of file diff --git a/pic.jpg b/pic.jpg new file mode 100644 index 0000000..56a18aa Binary files /dev/null and b/pic.jpg differ diff --git a/pic.png b/pic.png new file mode 100644 index 0000000..ee15e55 Binary files /dev/null and b/pic.png differ diff --git a/squealerembossed-webfont.woff b/squealerembossed-webfont.woff new file mode 100755 index 0000000..3f23737 Binary files /dev/null and b/squealerembossed-webfont.woff differ diff --git a/squealerembossed-webfont.woff2 b/squealerembossed-webfont.woff2 new file mode 100755 index 0000000..dd2b2af Binary files /dev/null and b/squealerembossed-webfont.woff2 differ diff --git a/style.css b/style.css new file mode 100644 index 0000000..357959a --- /dev/null +++ b/style.css @@ -0,0 +1,205 @@ +*{ + box-sizing: border-box; +} + +body{ + background: #cccccc; + margin:0; + +} + +.app { + text-align: center; + display:flex; + flex-direction: column; + +} + +.masterhead{ + display:flex; + flex-direction: column; + justify-content: center; + +} + +@font-face { + font-family: 'squealerembossed'; + src: url('squealerembossed-webfont.woff2') format('woff2'), + url('squealerembossed-webfont.woff') format('woff'); + font-weight: normal; + font-style: normal; +} + +.masterheader__logo{ + font-family: 'squealerembossed'; + text-align: center; + justify-content: center; + font-size: 70px; +} + + +.content{ + + display: flex; + flex-direction: column; + +} + +.content__nav{ + flex:1; + + +} +.history{ + + display: flex; + flex-direction: row; + +} + +.history__items{ + +color: blue; +} +.clear{ +cursor: pointer; +color: red; +margin-left: 10px; +} +.searched{ + cursor: pointer; +} + +.content__body{ + flex:4 +} +.article1{ + +background: #e6e6e6; +} +.article2{ +background: #cccccc +} + +.article__img{ + display: none; +} + +.content__sidebar{ + display: none; + flex:1 +} +.no1200{ + display: none; +} + +.footer{ +margin-top: 5px; +margin-bottom: 5px; +display: flex; +flex-direction: row; +} + +.footer__prev{ + display: none; + background: #cccccc; + flex:2; + cursor: pointer; + +} + +.footer__next{ + display: none; + background: #a6a6a6; + flex:2; + cursor: pointer; +} + +@media(min-width: 768px){ + .masterhead { + display:flex; + flex-direction: row; + } + .no1200{ + display: none; + } + .history{ + + display: flex; + flex-direction: column; + } + + .footer, + .content { + display:flex; + flex-direction: row; + } + + .content__nav { + flex:2; + } + + .content__body{ + flex:4; + } + + .article__img{ + display: block; + margin-left: auto; + margin-right: auto; + margin-bottom: 5px; + height: 300px; + width: 300px; + } + + .footer__prev, + .footer__next { + flex: 1; + } + +} + +@media (min-width: 960px) { + .content__sidebar{ + flex: 1; + display: block; + } + .content__nav{ + flex:1; + } + .content__body{ + flex:5; + } + + .article__img{ + display: block; + } + .no1200{ + display: none; + } +} + +@media(min-width: 1200px) { + .content__sidebar{ + flex: 2; + display: block; + } + .content__nav{ + flex:1; + } + .content__body{ + flex:4; + } + + .article__img{ + display: block; + } + .no1200{ + display: block; + width: 100%; + height: 100%; + } + .app{ + display: none; + } +}