constructorlabs · rolandjlevy · Sep 14, 2018 · Sep 14, 2018 · Sep 14, 2018 · Sep 14, 2018
diff --git a/.DS_Store b/.DS_Store
diff --git a/README-orig.md b/README-orig.md
@@ -0,0 +1,34 @@
+# 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.
+
+## Objectives
+
+- [ ] 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.
+
+- [ ] Fetch news articles from News API and display them including title, image, description, publication, date and link to article.
+
+- [ ] Display images for tablet and desktop screens only
+
+- [ ] Implement a feature of your choice
+
+## Stretch goals
+
+- [ ] Implement pagination which allows you to get the next 20 results and display them
+
+- [ ] Add search functionality which allows the user to retrieve news about a particular topic
+
+## Instructions
+
+- 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
+
+## README.md
+
+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.
diff --git a/README.md b/README.md
@@ -1,34 +1,43 @@
-# Responsive News Reader
+# 'newsee' newsreader app
+
+![Screenshot](images/screen-shot.png) 
+
+## Objective > what does it do?
+The purpose of the newsreader app is to display the news with a fully responsive layout for mobile, tablet and desktop screen sizes giving an intuative and user-freindly experience.
+
+## How it works
+The app loads raw data from the [News API](https://newsapi.org/), uses Javascript to display the articles' title, image, description and other details, and CSS to style the UI. 
+
+[View newsee repo on Github](https://github.com/rolandjlevy/responsive-news-reader)
+
+## Technology used
+- [ ] News API
+- [ ] Javascript
+- [ ] CSS
+
+## Stages of development
+- [ ] Set up APIs and read the **News API** documentation 
+- [ ] Retrieved the data for news articles 
+- [ ] Used Javascript to display the image, description, publication and date for the current day 
+- [ ] Used CSS to style the layout
+
+## Features achieved
+- [ ] Drop-down menu for showing news from countries wordwide
+- [ ] Drop-down menu for showing news for categories
+- [ ] Images shown in mobile view only
+- [ ] Show / hide images toggle shown in mobile view only
+- [ ] Search bar allows user input to display search results
+- [ ] User's search terms are highlighed in the results
+
+## Desired features with more time
+- [ ] An option to change text size for accessibility
+- [ ] Drop-down menu for news from different sources
+- [ ] Drop-down menu for news in different languages
+- [ ] A special slideshow gallery of happy / funny articles
+- [ ] Trump's fake news
+- [ ] Show news on a good to bad sliding scale using a slider
+- [ ] When no image replace with a relevant image
+- [ ] Add icons above categories
+- [ ] Random article generator
+- [ ] Focus the selected article and blur / darken the background
 
-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.
-
-## Objectives
-
-- [ ] 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.
-
-- [ ] Fetch news articles from News API and display them including title, image, description, publication, date and link to article.
-
-- [ ] Display images for tablet and desktop screens only
-
-- [ ] Implement a feature of your choice
-
-## Stretch goals
-
-- [ ] Implement pagination which allows you to get the next 20 results and display them
-
-- [ ] Add search functionality which allows the user to retrieve news about a particular topic
-
-## Instructions
-
-- 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
-
-## README.md
-
-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.
diff --git a/countries-options.txt b/countries-options.txt
@@ -0,0 +1,55 @@
+
+                            <option value="ar">Argentina</option>
+                            <option value="au">Australia</option>
+                            <option value="at">Austria</option>
+                            <option value="be">Belgium</option>
+                            <option value="br">Brazil</option>
+                            <option value="bg">Bulgaria</option>
+                            <option value="ca">Canada</option>
+                            <option value="cn">China</option>
+                            <option value="co">Colombia</option>
+                            <option value="cu">Cuba</option>
+                            <option value="cz">Czech Republic</option>
+                            <option value="eg">Egypt</option>
+                            <option value="fr">France</option>
+                            <option value="de">Germany</option>
+                            <option value="gr">Greece</option>
+                            <option value="hk">Hong Kong</option>
+                            <option value="hu">Hungary</option>
+                            <option value="in">India</option>
+                            <option value="id">Indonesia</option>
+                            <option value="ie">Ireland</option>
+                            <option value="il">Israel</option>
+                            <option value="it">Italy</option>
+                            <option value="jp">Japan</option>
+                            <option value="lv">Latvia</option>
+                            <option value="lt">Lithuania</option>
+                            <option value="my">Malaysia</option>
+                            <option value="mx">Mexico</option>
+                            <option value="ma">Morocco</option>
+                            <option value="nl">Netherlands</option>
+                            <option value="nz">New Zealand</option>
+                            <option value="ng">Nigeria</option>
+                            <option value="no">Norway</option>
+                            <option value="ph">Philippines</option>
+                            <option value="pl">Poland</option>
+                            <option value="pt">Portugal</option>
+                            <option value="ro">Romania</option>
+                            <option value="ru">Russia</option>
+                            <option value="sa">Saudi Arabia</option>
+                            <option value="rs">Serbia</option>
+                            <option value="sg">Singapore</option>
+                            <option value="sk">Slovakia</option>
+                            <option value="si">Slovenia</option>
+                            <option value="za">South Africa</option>
+                            <option value="kr">South Korea</option>
+                            <option value="se">Sweden</option>
+                            <option value="ch">Switzerland</option>
+                            <option value="tw">Taiwan</option>
+                            <option value="th">Thailand</option>
+                            <option value="tr">Turkey</option>
+                            <option value="ae">UAE</option>
+                            <option value="ua">Ukraine</option>
+                            <option value="gb">United Kingdom</option>
+                            <option value="us">United States</option>
+                            <option value="ve">Venuzuela</option>
diff --git a/countries.txt b/countries.txt
@@ -0,0 +1,108 @@
+Argentina
+ar
+Australia
+au
+Austria
+at
+Belgium
+be
+Brazil
+br
+Bulgaria
+bg
+Canada
+ca
+China
+cn
+Colombia
+co
+Cuba
+cu
+Czech Republic
+cz
+Egypt
+eg
+France
+fr
+Germany
+de
+Greece
+gr
+Hong Kong
+hk
+Hungary
+hu
+India
+in
+Indonesia
+id
+Ireland
+ie
+Israel
+il
+Italy
+it
+Japan
+jp
+Latvia
+lv
+Lithuania
+lt
+Malaysia
+my
+Mexico
+mx
+Morocco
+ma
+Netherlands
+nl
+New Zealand
+nz
+Nigeria
+ng
+Norway
+no
+Philippines
+ph
+Poland
+pl
+Portugal
+pt
+Romania
+ro
+Russia
+ru
+Saudi Arabia
+sa
+Serbia
+rs
+Singapore
+sg
+Slovakia
+sk
+Slovenia
+si
+South Africa
+za
+South Korea
+kr
+Sweden
+se
+Switzerland
+ch
+Taiwan
+tw
+Thailand
+th
+Turkey
+tr
+UAE
+ae
+Ukraine
+ua
+United Kingdom
+gb
+United States
+us
+Venuzuela
+ve
diff --git a/images/.DS_Store b/images/.DS_Store
diff --git a/images/eyes-transparent.png b/images/eyes-transparent.png
diff --git a/images/eyes-white.png b/images/eyes-white.png
diff --git a/images/eyes-white.xcf b/images/eyes-white.xcf
diff --git a/images/eyes.png b/images/eyes.png
diff --git a/images/eyes.xcf b/images/eyes.xcf
diff --git a/images/screen-shot.png b/images/screen-shot.png
diff --git a/index.html b/index.html
@@ -0,0 +1,73 @@
+<!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>News Reader</title>
+    <style>
+        @import url('https://fonts.googleapis.com/css?family=Catamaran:700');
+        @import url('https://fonts.googleapis.com/css?family=Catamaran:400');
+        @import url('https://fonts.googleapis.com/css?family=Catamaran:100');
+        @import url('https://fonts.googleapis.com/css?family=Handlee|Itim|Mukta|Muli');     
+    </style>
+    <link rel="stylesheet" href="styles.css">
+</head>
+
+<body>
+    <div class="news-app">
+
+        <header class="header">
+            <div class="header__logo__wrapper">
+                <img src="images/eyes-white.png" class="header__logo">
+                <p class="header__logo__text">newsee</p>
+            </div>
+            <div class="header__nav">
+                <form class="header__form">
+                    <div class="header__nav__input">
+                        <input type="text" class="search" name="search" placeholder="&#128269; Search">
+                    </div>
+                </form>
+            </div>
+        </header>
+
+        <div class="content">
+            <nav class="content__nav">
+                <div class="content__country__wrapper">
+                    <form class="country">
+                        Top Headines:
+                    </form>
+                    <form class="category">
+                        Categories:
+                    </form>
+                    <form class="nav__image__display">
+                        <label for="toggle__images">Show images</label>
+                        <input type="checkbox" id="toggle__images" class="toggle__images" checked>
+                    </form>
+                </div>
+                <div class="content__message__wrapper">
+                    <div class="content___message">
+                    </div>
+                </div>
+            </nav>
+
+            <main class="content__body">
+                <div class="content__section__buttons"></div>
+                <ul class="article__list"></ul>
+            </main>
+
+            <aside class="content__aside">
+                Aside content
+            </aside>
+
+            <footer class="content__footer">
+                Footer content
+            </footer>
+        </div>
+    </div>
+    <script src="src/countries-object.js"></script>
+    <script src="src/sources-object.js"></script>
+    <script src="src/index.js"></script>
+</body>
+</html>