Skip to content
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

Jump to bottom

week3 responsive-news-reader #7

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

week3 responsive-news-reader #7

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
04ccf0d
project started. Basic design implemented
Ahmed-username Jun 15, 2018
9889d48
fetched news is now being displayed
Ahmed-username Jun 16, 2018
87a9f34
website is now responsive for mobile, 720,960 and 1280+
Ahmed-username Jun 17, 2018
f9b733c
search history implemented
Ahmed-username Jun 17, 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
Prev Previous commit
Next Next commit
website is now responsive for mobile, 720,960 and 1280+
  • Loading branch information
@Ahmed-username
Ahmed-username committed Jun 17, 2018
commit 87a9f344be69ef5afe01895208f4826148cc9916
101 changes: 97 additions & 4 deletions code.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,19 @@
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");
let page=1;
let search="";
let txt="";

//functions


function submitHandler(event) {
event.preventDefault();
let search= searchBox.value;
search= searchBox.value;
fetch(
`https://newsapi.org/v2/everything?q=${search}&from=2018-06-01&sortBy=popularity&apiKey=cacb9f078d714b02b4baa44f3eea29f8`
)
Expand All @@ -15,7 +23,9 @@ function submitHandler(event) {
})
.then(function(jsonData) {
showResults(jsonData);
console.log(jsonData);
prev.style.display="block";
next.style.display="block";

})
.catch(function(error) {
alert("error");
Expand All @@ -25,14 +35,13 @@ function submitHandler(event) {
function showResults(data){
let style="";
let counter=1;
console.log(data)
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>Title: ${article.title}</h2></a><br>
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>
Expand All @@ -41,5 +50,89 @@ function showResults(data){
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);
Copy link
Contributor

Choose a reason for hiding this comment

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

nice

showResults(jsonData);
})
.catch(function(error) {
alert("error");
});
}

function prevHandler(event){
if(page<=1){
Copy link
Contributor

Choose a reason for hiding this comment

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

Good handling of edge case. Rather than using if/else I would return on the if to remove the need for an else.

if(page<=1){
  alert("This is the first page");
  return;
}

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);
Copy link
Contributor

Choose a reason for hiding this comment

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

nice

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");
});
}

//body
myForm.addEventListener("submit", submitHandler);
prev.addEventListener("click",prevHandler);
next.addEventListener("click",nextHandler);
headlines();
/////////
/*var client = new XMLHttpRequest();
client.open('GET', 'mytxt.txt');
client.onreadystatechange = function() {
//alert(client.responseText);
txt=this.responseText;
console.log(txt);

}
client.send();


var text = "hello world",
blob = new Blob([text], { type: 'text/plain' }), anchor = document.createElement('a');
*/
var obj = {
name: 'Ram',
score: 100
};

localStorage.setItem('gameStorage', JSON.stringify(obj));

var obj2 = JSON.parse(localStorage.getItem('gameStorage'));
console.log(obj2);
18 changes: 8 additions & 10 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,10 @@
<link rel="stylesheet" href="style.css">
</head>
<body>
<img src="pic.png" class="no1200">
<div class="app">
<header class="masterhead">
<h1 class="masterheader__logo">LOGO</h1>
<div class="buttons_container">
<button class="masterhead__button">button1</button>
<button class="masterhead__button">button2</button>
</div>
<h1 class="masterheader__logo">NewZZ</h1>
</header>
<div class="content">
<nav class="content__nav">
Expand All @@ -23,18 +20,19 @@ <h1 class="masterheader__logo">LOGO</h1>
</form>
</nav>
<main class="content__body">

</main>
<aside class="content__sidebar">
<p>sidebar</p>
<h3>Top 5 Headlines</h3>
</aside>
</div>

<footer class="footer">
<div class="footer__notes">notes</div>
<div class="footer__map">map</div>
<div class="footer__prev">Previous Page</div>
<div class="footer__next">Next Page</div>
</footer>
</div>
<script src="code.js"> </script>
</img>
</body>
</html>
3 changes: 3 additions & 0 deletions mytxt.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
ab
Copy link
Contributor

Choose a reason for hiding this comment

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

maybe add this to .gitignore

cd
ef
Binary file added pic.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added pic.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added squealerembossed-webfont.woff
View file
Open in desktop
Binary file not shown.
Binary file added squealerembossed-webfont.woff2
View file
Open in desktop
Binary file not shown.
64 changes: 41 additions & 23 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,22 +3,23 @@
}

body{
background: #cccccc;
margin:0;

}

.app {
text-align: center;
display:flex;
flex-direction: column;
background: salmon;

}

.masterhead{
background: blueviolet;
display:flex;
flex-direction: column;
justify-content: space-between;
justify-content: center;

}

@font-face {
Expand All @@ -31,12 +32,9 @@ body{

.masterheader__logo{
font-family: 'squealerembossed';

}

.buttons_container{
display:flex;

text-align: center;
justify-content: center;
font-size: 70px;
}


Expand All @@ -48,20 +46,19 @@ body{
}

.content__nav{
background: lime;
flex:1

}

.content__body{
background:darkkhaki;
flex:4
}
.article1{
background: #cce6ff;

background: #e6e6e6;
}
.article2{
background: #e6ffb3;
background: #cccccc
}

.article__img{
Expand All @@ -70,32 +67,41 @@ background: #e6ffb3;

.content__sidebar{
display: none;
background: teal;
flex:1
}
.no1200{
display: none;
}

.footer{
margin-top: 5px;
margin-bottom: 5px;
display: flex;
flex-direction: row;
}

.footer__notes{
background: red;
.footer__prev{
display: none;
background: #cccccc;
flex:2;
cursor: pointer;

}

.footer__map{
background: Magenta;
flex:2
.footer__next{
display: none;
background: #a6a6a6;
flex:2;
cursor: pointer;
}

@media(min-width: 768px){
.masterhead {
display:flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.no1200{
display: none;
}

.footer,
Expand All @@ -116,12 +122,13 @@ flex-direction: row;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 5px;
height: 300px;
width: 300px;
}

.footer__notes,
.footer__map {
.footer__prev,
.footer__next {
flex: 1;
}

Expand All @@ -142,6 +149,9 @@ flex-direction: row;
.article__img{
display: block;
}
.no1200{
display: none;
}
}

@media(min-width: 1200px) {
Expand All @@ -159,4 +169,12 @@ flex-direction: row;
.article__img{
display: block;
}
.no1200{
display: block;
width: 100%;
height: 100%;
}
.app{
display: none;
}
}