This app grabs the top 10 headlines from the Guardian newspaper API and displays them on the homepage. Clicking on a headline will show a summary of the article using the Aylien API and then allow the user to click through to the full article on the Guardian website. This single page web app uses pure JavaScript with HTML and CSS and is my first project using APIs in JavaScript. See more about my design process.
Clone the repo on the command line by running
git clone git@github.com:ewintram/news-summary-challenge.git
To launch the app use a static server e.g. http-server
Navigate to http://localhost:8080
Headline view page
Article summary view page
Testing is in pure JavaScript. To run the tests, open 'SpecRunner.html' in the browser and open the console to see the results.
Eleanor Wintram
MVC pattern
As a busy politician
I can see all of today's headlines in one place
So I know what the big stories of the day are
As a busy politician
I can click a link to see the original news article
So that I can get an in depth understanding of a very important story
As a busy politician
So I can get a few more details about an important story
I can see a summary of a news article
As a busy politician
So that I have something nice to look at
I can see a picture to illustrate each news article when I browse headlines
Headlines page
Article summary page
- Front end view for the results of the testing framework.
- Mocking the API response.
As a busy politician
Just in case my laptop breaks
I can read the site comfortably on my phone
As a busy politician
To make my news reading more fun
I can see whizzy animations in the app