constructorlabs · joelamb · Sep 12, 2018 · Sep 12, 2018 · Sep 14, 2018 · Sep 14, 2018
diff --git a/README.md b/README.md
@@ -1,34 +1,57 @@
 # Responsive News Reader
 
-Let's create a responsive news reader website. To get the latest news the app will display we are going to use [News API](https://newsapi.org/). As with the Weather and Unsplash APIs, you will need to register with the service to obtain an API key.
+## A responsive news website. Powered by [News API](https://newsapi.org/).
+---
+> [View live demo](https://joelamb.github.io/update-live/)
 
-## Objectives
+## Features
 
-- [ ] Create a responsive layout that works well and looks good at mobile, tablet and desktop screen sizes. Please create the mobile version first, then tablet and then desktop.
+- A responsive mobile-first layout that works well and looks good at mobile, tablet and desktop screen sizes.
 
-- [ ] Fetch news articles from News API and display them including title, image, description, publication, date and link to article.
+- News articles fetched from News API and displayed. Each story includes title, image, description, publication source, publication date and a link to the original article.
 
-- [ ] Display images for tablet and desktop screens only
+- Publication date is shown as time elapsed since publication of the story.
 
-- [ ] Implement a feature of your choice
+- Images only display on tablet and desktop screens.
 
-## Stretch goals
+- Category navigation allows the user to see the top stories in Entertainment, Science, Technology, Health, Food & Cycling.
 
-- [ ] Implement pagination which allows you to get the next 20 results and display them
+- Pagination links at the foot of the page allow the user to see the next page of results. The current page number and total number of available pages are also displayed.
 
-- [ ] Add search functionality which allows the user to retrieve news about a particular topic
+- Search functionality to allows the user to retrieve news about a particular topic.
 
-## Instructions
+- Sidebar of most popular stories from the _Daily Mail_
 
-- Fork and clone this repo
-- Commit your changes frequently with short and descriptive commit messages
-- Create a pull request when complete
-- We want to see great looking webpages
-- Your code should have consistent indentation and sensible naming
-- Use lots of concise functions with a clear purpose
-- Add code comments where it is not immediately obvious what your code does
-- Your code should not throw errors and handle edge cases gracefully. For example not break if server fails to return expected results
+- Hidden redact feature when the user searches for 'Trump'
 
-## README.md
+## Code
 
-When finished, include a README.md in your repo. This should explain what the project is, how to run it and how to use it. Someone who is not familiar with the project should be able to look at it and understand what it is and what to do with it.
+- Clean, well-commented code.
+
+- Concise functions, each with a clear purpose.
+
+- `redact()` function wraps any 5,6,8 or 9 character word in the headline and story with a `<span>` when the user types 'Trump' in the search query input.
+
+- `cleanData()` function takes the data returned by the News API and filters out any stories that do not have an image link or content in the 'description' field.
+
+## Performance
+
+- Using `window.innerWidth`, images only load in the tablet and desktop views.
+
+## CSS
+
+- Clean, well commented CSS.
+
+- Font used throughout is FF Meta a new Variable Font based on the original typeface designed by Erik Spiekermann.
+
+- Grid CSS used to layout tablet and desktop views.
+
+## To Do
+
+- Error handling to get App to handle edge cases gracefully, alerting the user if there is an error.
+
+- Sanitise news feed to detect broken image links.
+
+- Give the user the choice of where they get most popular stories from in the sidebar.
+
+- Redact 'Trump' search images. Add a class with CSS brightness filter of either 0 or 1 to randomly black out images.
diff --git a/index.html b/index.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Update - News Reader</title>
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
+        crossorigin="anonymous">
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <header class='hero'>
+        <h1 class='hero__title'>Upd<i class="fas fa-broadcast-tower"></i>te <span>Live<i class="far fa-window-minimize"></i></span></h1>
+        <p class='hero__date'>Saturday</p>
+    </header>
+    <nav class="category-nav">
+        <ul>
+            <li class="category category-general current">top stories</li>
+            <li class="category category-entertainment">entertainment</li>
+            <li class="category category-science">science</li>
+            <li class="category category-tech">technology</li>
+
+            <li class="category category-health">health</li>
+            <li class="category category-food">food</li>
+            <li class="category category-cycling">cycling</li>
+        </ul>
+    </nav>
+    <section class="search">
+        <form class="search--form">
+            <label for="search--query">Search</label>
+            <input type="text" name="search-query" id="search--query" placeholder="Type your search query...">
+        </form>
+    </section>
+    <section class='news'>
+        <aside class="popular">
+            <h2><em>Daily Mail</em><br /> Sidebar of Shame</h2>
+
+        </aside>
+        <nav class="page-nav">
+            <button class="prev">&larr;</button>
+            <p class="page-num">Page <span class="page-current">1</span> of <span class="page-total"></span></p>
+            <button class="next">&rarr;</button>
+        </nav>
+    </section>
+
+
+
+    <footer class='legals'>
+        <p class='legals__copyright'>&copy; 2018 Joe Lamb</p>
+        <p class='legals__credit'>Powered by <a href="https://newsapi.org/">NewsAPI.org</a></p>
+    </footer>
+
+    <script src="index.js"></script>
+
+</body>
+
+</html>