fac-11/week5-asskitty

https://asskitty.herokuapp.com/

week5-ASSKITTY

https://asskitty.herokuapp.com/

News: now and then

Compare today to 150 years ago

The modern world moves at a furious pace. It seems that day by day there are so many breaking news items, natural disasters, coup d'etats, revolutions, terrorist attacks, elections, crises...

... that it can feel totally overwhelming to keep up. When these seismic shifts happen in our hyper-connected world, the people on the front line are not journalists from mainstream media organisations. They are people like you and me. Consumers of the news have also become the creators, and they are able to react to things at a rate of pace that is impossible for most formal outlets.

Project Requirements

• Must call an API and serve frequently changing content
• Users must be able to search for an input
• Host on Heroku
• Employ code coverage and continous implementation

Architecture

Cool learnings

/* eslint-disable */

Resources

Today's Date

New York Times documentation

Set up Heroku in 6 steps

week5-asskitty's Issues

Create index.html structure

With outlined sections.

Code coverage

Have you done any test coverage?

create DOMError function

DOMError function will display a modal that warns the user the date they have selected isn't possible

Server side validation of your input

You need to check that the user is inputting correct info into the input box i.e. a certain number of years (so it should be a number, not a string, etc).

Cool concept!!

Could make a fun app for education purposes as well 👍

Installation instructions in your README

It would be useful for people who want to run your project locally to have installation instructions, something like...

Installation instructions

• Clone this repo and cd into it

• git clone [email protected]:xxxx

• Run npm install to install all dependencies

Run locally

• Run npm start to start the server

• Navigate to http://localhost:4000/ in your browser

Tests

• Run npm test to run the tests

create Server

like in nodeGirls

Display continuous integration (and code coverage) badges on your project README.

You can add a badge to your README to show if travis is passing or failing etc.

Go to travis and click on where it says build passing and a box will open up with a url that you can add at the top of your README

Console warnings

Resource interpreted as Stylesheet but transferred with MIME type text/plain.

I think it's because you set your content type as a string argument to res.writeHead rather than passing in an argument ie
'Content-Type: ${extensionType[extension]}'
should be:
{'Content-Type': extensionType[extension]}

https://github.com/FAC-11/week5-ASSKITTY/blob/master/src/handlers.js#L33

Create XHR request function

Function should make an xhr request to the server with 3 arguments (date, callback)
Date will be passed into the xhr request as a payload.

callback will be called when request is complete (this will be the dom creation)

Setup file structure

With our planned file architecture

create eventListener function for submit

Users will able to select 'how many years ago' they would like news from.

This will call the xhr request function with the correct date

Employ continuous integration

Using Travis

create buildAPIURL function

buildAPIURL function takes the arguments url, api-key, begin-date, end-date, sort-query)

todays date will use url, api-key, begin-date, sort-query
past date will use url, api-key, begin-date, end-date

Function will return a string

create request function

request function returns statuscodes and payload depending on error/success

Tabbing - tabs should go through interactive elements

At least this is my understanding, but nice job on the aria labels though, thumbs up!

Remove commented code

Remove any unnecessary commented code (useful comments are fine!) and console.logs from your code

Nice handling of error back to client

Even though functionality isn't working properly (#51), nice handling of error message that client receives 👍

create tests for getDate function

make front end tests for getDate functionality

Employ code coverage

Using istanbul

create dateCheck function

This function will check the id key in object and call createDOM with the right arguments, either (now.object) or (then.object)

createDOM function

This function will take 2 arguments (sectionID, responseObject)
DOM function will populate the DOM with 5 articles.
These will be buttons with a heading/snippet wrapped in the link

Create back-end tests

Using tape

Unnecessary require in extract-data.js

You're requiring testJSON in extract-data.js but not using it

Create server tests

By injecting fake HTTP requests using Shot.

Submit button for number of years in then column?

It's not clear how to submit the number of years, should I just enter a number and press enter on my keyboard? A submit button or something like that would be better for UX

create error handling function with try/catch for date

try/catch function will
try - 'how many years ago' is > 0, <166 , is a number
catch - call a DOM function to tell the user that number isnt availble

Close issues which have been addressed

So it's easier to see what needs to be done :) E.g. employ continuous integration #16, #12...

Enhance accessibility

Pass args in when you call the function not when you define it

In apiRequest.js, you pass your url and apiKey into buildAPIURL function when you define the function. I'd pass these in when you call the function, so that you keep buildAPIURL generic

e.g.

const buildAPIURL = ( date, apiURL, apiKey ) => {
  return `${apiURL}?api-key=${apiKey}&begin_date=${date}&end_date=${date}&sort=newest`;
}

create getDate function

Finds date from js and returns a string in format YYYYMMDD

Create front-end tests

A few basic tests.

Style our app

Bearing in mind accessibility issues.

User story: Content should be dynamic and searchable

Our web app must provide users with frequently updated content on a regular or continuous basis and allow user input to search its content.

set up heroku

Host site on heroku

Host project on Heroku

!

Create readme

With comprehensive sections on why, what and how.

create extractData function

extractData will take (error,body) as arguments and if there is no error it will extract the following key/value from the JSON:

• response.docs[0].headline.name
• response.docs[0].snippet
• response.docs[0].web_url

function will return 5 of these

will also add a key for id: now/then

Images in readme are not appearing

You can use:

Link up front and back end

Get the components of our app talking to each other

Then functionality not working

When I type a number into the textfield and hit enter, I get:

"Sorry your request could not be completed right now"

create handler function

link in nodeGirls