From ae6c577431486ceb03fab292ca2be80e75f0a07b Mon Sep 17 00:00:00 2001 From: jamal westfield Date: Fri, 14 Sep 2018 14:41:44 +0100 Subject: [PATCH 1/9] top images arrows not functional --- index.html | 28 ++++++++++++++++++++++++++++ script.js | 49 +++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 51 +++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 128 insertions(+) create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..3263ec4 --- /dev/null +++ b/index.html @@ -0,0 +1,28 @@ + + + + + + + + + + + + +
+

Top Stories

+ + + + +
+ + + + + + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..69c2ecf --- /dev/null +++ b/script.js @@ -0,0 +1,49 @@ + +// Contains all the urls needed throughout the project +const urls = { + apiKey: "287554a05efe4127bd911a0a216a7b64", + topBbcNews:"https://newsapi.org/v2/top-headlines -G \ + -d sources=bbc-news \ + -d apiKey=287554a05efe4127bd911a0a216a7b64", + topUsaNews: "https://newsapi.org/v2/top-headlines?country=us&apiKey=287554a05efe4127bd911a0a216a7b64", + trumpNews: "https://newsapi.org/v2/top-headlines?country=us&pageSize=1&apiKey=287554a05efe4127bd911a0a216a7b64" +} +const ul = document.querySelector("#main") + +function createNode( element){ + return document.createElement(element) +} + +function append(parent, element){ + return parent.appendChild(element) +} + + +fetch(urls.trumpNews) +.then(response => { + return response.json() +}) +.then(body => { + console.log(body) + let trumpNewsArticles = body.articles + return trumpNewsArticles.map(article => { + let li = createNode("li") + mainImg = createNode("img") + header = createNode("h1") + span = createNode("span") + link = createNode("a") + swiper = createNode("p") + // img.src = article.urlToImage + header.textContent = article.title + mainImg.setAttribute("src", article.urlToImage) + span.innerHTML = `

${article.description}

` + link.innerHTML = `

Click here for full story

` + swiper.innerHTML = `

swipe for latest News

` + append(li,header) + append(li, mainImg) + append(li, swiper) + append(li, span) + append(li, link) + append(ul, li) + }) +}) diff --git a/style.css b/style.css new file mode 100644 index 0000000..f89d565 --- /dev/null +++ b/style.css @@ -0,0 +1,51 @@ + +/* .image-span{ + color: red; +} */ +body { + text-align: center; +} + + +.top-content { + display:flex; + flex-direction: column; + justify-content: center; + align-content: center; + +} + + +img{ + width: 40vh; + height: 30vh; +} + +ul { + list-style-type: none; +} + +.arrows{ + width: 20px; + height: 18px; + border-color: #000; + position: absolute; + top: 70%; + +} + +.prev{ + border-bottom: 6px solid; + border-left: 6px solid; + transform: rotate(45deg); + left: 10px; + margin-left: 70px; +} + +.next{ + border-bottom: 6px solid; + border-left: 6px solid; + transform: rotate(-135deg); + right: 5vh; + margin-right: 10px; +} \ No newline at end of file From 2d40cffa6566744a7a1fae4c3b32f4e086bc0aea Mon Sep 17 00:00:00 2001 From: jamal westfield Date: Fri, 14 Sep 2018 17:24:05 +0100 Subject: [PATCH 2/9] starting trump articles --- index.html | 12 ++++-- script.js | 105 ++++++++++++++++++++++++++++++++++------------------- style.css | 16 ++++---- 3 files changed, 86 insertions(+), 47 deletions(-) diff --git a/index.html b/index.html index 3263ec4..e64d97d 100644 --- a/index.html +++ b/index.html @@ -10,14 +10,20 @@ +
+

Header

+
-

Top Stories

+

Top Stories

+ + -
    - +
    +
    Latest Trump News
    + diff --git a/script.js b/script.js index 69c2ecf..918ffdd 100644 --- a/script.js +++ b/script.js @@ -1,49 +1,80 @@ - // Contains all the urls needed throughout the project +function createNode(element) { + return document.createElement(element) +} + +function append(parent, element) { + return parent.appendChild(element) +} + +const rightArrow = document.querySelector(".next") +rightArrow.addEventListener("click" ,function(){ + pageNumber++; + console.log(`${pageNumber}`) + getTopStory(pageNumber); + +}) + +const leftArrow = document.querySelector(".prev") +leftArrow.addEventListener("click", function(){ + pageNumber--; + getTopStory(pageNumber); +}) + + +function getTopStory(pageNumber){ + const topStoryUrl = `https://newsapi.org/v2/top-headlines?country=us&pageSize=1&apiKey=287554a05efe4127bd911a0a216a7b64&page=${pageNumber}`; + fetch(topStoryUrl) + .then(response => { + return response.json() + }) + .then(body => { + console.log(body) + const topUsaNewsArticles = body.articles + return topUsaNewsArticles.map(article => { + div.innerHTML=""; + const mainImg = createNode("img") + const header = createNode("h1") + const span = createNode("span") + const link = createNode("a") + const swiper = createNode("p") + header.textContent = article.title + mainImg.setAttribute("src", article.urlToImage) + span.innerHTML = `

    ${article.description}

    ` + link.innerHTML = `

    Click here for full story

    ` + swiper.innerHTML = `

    swipe for latest News

    ` + append(div, header) + append(div, mainImg) + append(div, swiper) + append(div, span) + append(div, link) + }) + }) +} + const urls = { apiKey: "287554a05efe4127bd911a0a216a7b64", - topBbcNews:"https://newsapi.org/v2/top-headlines -G \ + topBbcNews: "https://newsapi.org/v2/top-headlines -G \ -d sources=bbc-news \ -d apiKey=287554a05efe4127bd911a0a216a7b64", topUsaNews: "https://newsapi.org/v2/top-headlines?country=us&apiKey=287554a05efe4127bd911a0a216a7b64", trumpNews: "https://newsapi.org/v2/top-headlines?country=us&pageSize=1&apiKey=287554a05efe4127bd911a0a216a7b64" } -const ul = document.querySelector("#main") -function createNode( element){ - return document.createElement(element) -} +const div = document.querySelector("#main"); +let pageNumber = 1; + +getTopStory(1); //reset page back page 1 + + +// const = +// fetch(url) +// .then(response => { +// return response.json() +// }) +// .then(body => { +// console.log +// }) -function append(parent, element){ - return parent.appendChild(element) -} -fetch(urls.trumpNews) -.then(response => { - return response.json() -}) -.then(body => { - console.log(body) - let trumpNewsArticles = body.articles - return trumpNewsArticles.map(article => { - let li = createNode("li") - mainImg = createNode("img") - header = createNode("h1") - span = createNode("span") - link = createNode("a") - swiper = createNode("p") - // img.src = article.urlToImage - header.textContent = article.title - mainImg.setAttribute("src", article.urlToImage) - span.innerHTML = `

    ${article.description}

    ` - link.innerHTML = `

    Click here for full story

    ` - swiper.innerHTML = `

    swipe for latest News

    ` - append(li,header) - append(li, mainImg) - append(li, swiper) - append(li, span) - append(li, link) - append(ul, li) - }) -}) diff --git a/style.css b/style.css index f89d565..c542cb2 100644 --- a/style.css +++ b/style.css @@ -6,25 +6,27 @@ body { text-align: center; } - .top-content { display:flex; flex-direction: column; justify-content: center; align-content: center; + background-color:red; } - img{ width: 40vh; height: 30vh; } -ul { - list-style-type: none; +button { + width: 50px; + margin: auto; + } + .arrows{ width: 20px; height: 18px; @@ -39,13 +41,13 @@ ul { border-left: 6px solid; transform: rotate(45deg); left: 10px; - margin-left: 70px; + margin-left: 10vh; } .next{ border-bottom: 6px solid; border-left: 6px solid; transform: rotate(-135deg); - right: 5vh; - margin-right: 10px; + right: 10px; + margin-right: 10vh; } \ No newline at end of file From ece2cb49441ce7a9300b2a7aaac25bf7161324ec Mon Sep 17 00:00:00 2001 From: jamal westfield Date: Fri, 14 Sep 2018 23:15:51 +0100 Subject: [PATCH 3/9] slider working and tech news creating --- index.html | 22 ++++++++++----- script.js | 80 +++++++++++++++++++++++++++++++++++------------------- style.css | 22 +++++++++++---- 3 files changed, 84 insertions(+), 40 deletions(-) diff --git a/index.html b/index.html index e64d97d..5f4d7da 100644 --- a/index.html +++ b/index.html @@ -10,19 +10,27 @@ -
    -

    Header

    -
    +
    -

    Top Stories

    - - +

    Today's Top Stories

    +
      +
      • +
      • +
    -
    Latest Trump News
    +

    Latest Tech News

    +
    diff --git a/script.js b/script.js index 918ffdd..2e2ab18 100644 --- a/script.js +++ b/script.js @@ -10,7 +10,6 @@ function append(parent, element) { const rightArrow = document.querySelector(".next") rightArrow.addEventListener("click" ,function(){ pageNumber++; - console.log(`${pageNumber}`) getTopStory(pageNumber); }) @@ -29,52 +28,77 @@ function getTopStory(pageNumber){ return response.json() }) .then(body => { - console.log(body) const topUsaNewsArticles = body.articles return topUsaNewsArticles.map(article => { - div.innerHTML=""; + topStoryDiv.innerHTML=""; const mainImg = createNode("img") const header = createNode("h1") const span = createNode("span") const link = createNode("a") const swiper = createNode("p") + const published = createNode("p") header.textContent = article.title - mainImg.setAttribute("src", article.urlToImage) - span.innerHTML = `

    ${article.description}

    ` + mainImg.setAttribute("src", article.urlToImage || 'http://placekitten.com/200/300') + span.innerHTML = `

    ${article.description || `Nothing to display`}

    ` link.innerHTML = `

    Click here for full story

    ` + published.innerHTML = `

    ${article.published || `Posted Today`}

    ` swiper.innerHTML = `

    swipe for latest News

    ` - append(div, header) - append(div, mainImg) - append(div, swiper) - append(div, span) - append(div, link) + append(topStoryDiv, header) + append(topStoryDiv, mainImg) + append(topStoryDiv, published) + append(topStoryDiv, swiper) + append(topStoryDiv, span) + append(topStoryDiv, link) }) }) } -const urls = { - apiKey: "287554a05efe4127bd911a0a216a7b64", - topBbcNews: "https://newsapi.org/v2/top-headlines -G \ - -d sources=bbc-news \ - -d apiKey=287554a05efe4127bd911a0a216a7b64", - topUsaNews: "https://newsapi.org/v2/top-headlines?country=us&apiKey=287554a05efe4127bd911a0a216a7b64", - trumpNews: "https://newsapi.org/v2/top-headlines?country=us&pageSize=1&apiKey=287554a05efe4127bd911a0a216a7b64" -} +// const urls = { +// apiKey: "287554a05efe4127bd911a0a216a7b64", +// topBbcNews: "https://newsapi.org/v2/top-headlines -G \ +// -d sources=bbc-news \ +// -d apiKey=287554a05efe4127bd911a0a216a7b64", +// topUsaNews: "https://newsapi.org/v2/top-headlines?country=us&apiKey=287554a05efe4127bd911a0a216a7b64", +// trumpNews: "https://newsapi.org/v2/top-headlines?country=us&pageSize=1&apiKey=287554a05efe4127bd911a0a216a7b64" +// } -const div = document.querySelector("#main"); +const topStoryDiv = document.querySelector("#main"); let pageNumber = 1; - getTopStory(1); //reset page back page 1 -// const = -// fetch(url) -// .then(response => { -// return response.json() -// }) -// .then(body => { -// console.log -// }) + +const techNewsDiv = document.querySelector(".techNews") +const techUrl = "https://newsapi.org/v2/top-headlines?sources=techcrunch&apiKey=287554a05efe4127bd911a0a216a7b64" +fetch(techUrl) +.then(response => { + return response.json() +}) +.then(body => { + // console.log(body) + const techNews = body.articles + return techNews.map(article => { + techNewsDiv.innerHTML=""; + const mainImg = createNode("img") + const header = createNode("h1") + const span = createNode("span") + const link = createNode("a") + const swiper = createNode("p") + const published = createNode("p") + header.textContent = article.title + mainImg.setAttribute("src", article.urlToImage || 'http://placekitten.com/200/300') + span.innerHTML = `

    ${article.description || `Nothing to display`}

    ` + link.innerHTML = `

    Click here for full story

    ` + published.innerHTML = `

    Posted ${new Date(article.published) || `Posted Today`}

    ` + swiper.innerHTML = `

    swipe for Latest Tech News

    ` + append(techNewsDiv, header) + append(techNewsDiv, mainImg) + append(techNewsDiv, published) + append(techNewsDiv, swiper) + append(techNewsDiv, span) + append(techNewsDiv, link) + }) +}) diff --git a/style.css b/style.css index c542cb2..7a2e39e 100644 --- a/style.css +++ b/style.css @@ -20,13 +20,21 @@ img{ height: 30vh; } -button { - width: 50px; - margin: auto; - -} +/* button:hover { + +} */ +ul { + display: flex; + justify-content: center; + margin-right: 45px; +} +li { + display:inline-block; + +} + .arrows{ width: 20px; height: 18px; @@ -50,4 +58,8 @@ button { transform: rotate(-135deg); right: 10px; margin-right: 10vh; +} + +.publishedAt { + font-size: 10px; } \ No newline at end of file From fe80608acda3379472c3f5adce65424db7f2ff68 Mon Sep 17 00:00:00 2001 From: jamal westfield Date: Sat, 15 Sep 2018 10:51:29 +0100 Subject: [PATCH 4/9] navbar almost complete --- index.html | 27 ++++++++++----- script.js | 8 +++++ style.css | 98 +++++++++++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 124 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index 5f4d7da..acc02f2 100644 --- a/index.html +++ b/index.html @@ -7,17 +7,28 @@ + - +

    Today's Top Stories