').addClass('container');
+
+ const $titlePopUp = $('
').val($titleToAdd);
+ $newContainer.append($titlePopUp);
+
+ const $descripPopUp = $('
').val();
+ $newContainer.append($descripPopUp);
+
+ const $goToArticle = $('').attr({href: "", target: "_blank"}).addClass('popUpAction').text('READ MORE FROM SOURCE');
+ $newContainer.append($goToArticle);
+
+ $('#popUp').append($newContainer);
+});
+
+//CLOSE article window
+$(".closePopUp").on('click', function(){
+ $('#popUp').addClass('hidden');
+ $('#containerPopUp').val('');
+});
+
+//LOADER function
+// $('#popUp').removeClass('hidden').addClass('loader');
+// $('.closePopUp').addClass('hidden');
+
+//ERROR MESSAGE function
+function errorMessage(){
+ const $errorLoadingImg = $('![]()
').attr('src', '../images/error_loading.jpg');
+ const $errorText = $('').val('Sorry! We are unable to load these articles right now.');
+ $('#main').append($errorLoadingImg);
+}
diff --git a/feedr/psuedocodeFeedr.md b/feedr/psuedocodeFeedr.md
new file mode 100644
index 0000000..cf838b3
--- /dev/null
+++ b/feedr/psuedocodeFeedr.md
@@ -0,0 +1,56 @@
+** GET JSON STRING **
+
+ API KEY = acd435a3c73c4530a3dc729d9a356729
+
+ const vergeNews [sources = the-verge]
+ const polygonNews [sources = polygon]
+ const wiredNews [sources = wired]
+
+ const url= 'https://newsapi.org/v2/top-headlines?' +
+ 'sources=NEWS-OUTLET' +
+ 'apiKey=API_KEY';
+
+ var req = new Request(url);
+
+ fetch(req)
+ .then(function(response) {
+ if there is a response:
+ console.log(response.json());
+ function to convert object to string
+ function to attach articles to the DOM
+ else:
+ get error image
+ get error message
+ append both to page
+ })
+
+** ATTACHING ARTICLES TO THE DOM **
+0. convert object to array
+1. forEach loop
+ a. article container: create article with class article
+ b. image: create section with featuredImage class
+ i. get image url from api content & add to img src
+ ii. append section to article
+ c. title/link/type: create section with class articleContent
+ i. get article url & add to a href
+ ii. get article title & assign to h3
+ iii. get tag/type/date? of article and add to h6 ???
+ iv. append section to article
+ d. rating: create section with class impressions
+ i. get page views & add to section
+ e. clearfix: add div with class clearfix
+ f. append article to container
+
+** ON CLICK FUNCTIONS **
+- on dropdown menu click
+ remove all
+ attach articles from one object
+- on home clicks
+ add everything
+ sort by date (top is most recent)
+- on article click
+ remove class hidden from id popUp
+ get info from section clicked
+ append that info to the pop-up section
+ close popup by adding hidden on click closePopUp
+ remove content from popup section
diff --git a/feedr/styles/html5bp.css b/feedr/styles/html5bp.css
new file mode 100644
index 0000000..405ba2c
--- /dev/null
+++ b/feedr/styles/html5bp.css
@@ -0,0 +1,261 @@
+/*! HTML5 Boilerplate v5.2.0 | MIT License | https://html5boilerplate.com/ */
+
+/*
+ * What follows is the result of much research on cross-browser styling.
+ * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
+ * Kroc Camen, and the H5BP dev community and team.
+ */
+
+/* ==========================================================================
+ Base styles: opinionated defaults
+ ========================================================================== */
+
+html {
+ color: #222;
+ font-size: 1em;
+ line-height: 1.4;
+}
+
+/*
+ * Remove text-shadow in selection highlight:
+ * https://twitter.com/miketaylr/status/12228805301
+ *
+ * These selection rule sets have to be separate.
+ * Customize the background color to match your design.
+ */
+
+::-moz-selection {
+ background: #b3d4fc;
+ text-shadow: none;
+}
+
+::selection {
+ background: #b3d4fc;
+ text-shadow: none;
+}
+
+/*
+ * A better looking default horizontal rule
+ */
+
+hr {
+ display: block;
+ height: 1px;
+ border: 0;
+ border-top: 1px solid #ccc;
+ margin: 1em 0;
+ padding: 0;
+}
+
+/*
+ * Remove the gap between audio, canvas, iframes,
+ * images, videos and the bottom of their containers:
+ * https://github.com/h5bp/html5-boilerplate/issues/440
+ */
+
+audio,
+canvas,
+iframe,
+img,
+svg,
+video {
+ vertical-align: middle;
+}
+
+/*
+ * Remove default fieldset styles.
+ */
+
+fieldset {
+ border: 0;
+ margin: 0;
+ padding: 0;
+}
+
+/*
+ * Allow only vertical resizing of textareas.
+ */
+
+textarea {
+ resize: vertical;
+}
+
+/* ==========================================================================
+ Browser Upgrade Prompt
+ ========================================================================== */
+
+.browserupgrade {
+ margin: 0.2em 0;
+ background: #ccc;
+ color: #000;
+ padding: 0.2em 0;
+}
+
+
+/* ==========================================================================
+ Helper classes
+ ========================================================================== */
+
+/*
+ * Hide visually and from screen readers:
+ */
+
+.hidden {
+ display: none !important;
+}
+
+/*
+ * Hide only visually, but have it available for screen readers:
+ * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
+ */
+
+.visuallyhidden {
+ border: 0;
+ clip: rect(0 0 0 0);
+ height: 1px;
+ margin: -1px;
+ overflow: hidden;
+ padding: 0;
+ position: absolute;
+ width: 1px;
+}
+
+/*
+ * Extends the .visuallyhidden class to allow the element
+ * to be focusable when navigated to via the keyboard:
+ * https://www.drupal.org/node/897638
+ */
+
+.visuallyhidden.focusable:active,
+.visuallyhidden.focusable:focus {
+ clip: auto;
+ height: auto;
+ margin: 0;
+ overflow: visible;
+ position: static;
+ width: auto;
+}
+
+/*
+ * Hide visually and from screen readers, but maintain layout
+ */
+
+.invisible {
+ visibility: hidden;
+}
+
+/*
+ * Clearfix: contain floats
+ *
+ * For modern browsers
+ * 1. The space content is one way to avoid an Opera bug when the
+ * `contenteditable` attribute is included anywhere else in the document.
+ * Otherwise it causes space to appear at the top and bottom of elements
+ * that receive the `clearfix` class.
+ * 2. The use of `table` rather than `block` is only necessary if using
+ * `:before` to contain the top-margins of child elements.
+ */
+
+.clearfix:before,
+.clearfix:after {
+ content: " "; /* 1 */
+ display: table; /* 2 */
+}
+
+.clearfix:after {
+ clear: both;
+}
+
+/* ==========================================================================
+ EXAMPLE Media Queries for Responsive Design.
+ These examples override the primary ('mobile first') styles.
+ Modify as content requires.
+ ========================================================================== */
+
+@media only screen and (min-width: 35em) {
+ /* Style adjustments for viewports that meet the condition */
+}
+
+@media print,
+ (-webkit-min-device-pixel-ratio: 1.25),
+ (min-resolution: 1.25dppx),
+ (min-resolution: 120dpi) {
+ /* Style adjustments for high resolution devices */
+}
+
+/* ==========================================================================
+ Print styles.
+ Inlined to avoid the additional HTTP request:
+ http://www.phpied.com/delay-loading-your-print-css/
+ ========================================================================== */
+
+@media print {
+ *,
+ *:before,
+ *:after {
+ background: transparent !important;
+ color: #000 !important; /* Black prints faster:
+ http://www.sanbeiji.com/archives/953 */
+ box-shadow: none !important;
+ text-shadow: none !important;
+ }
+
+ a,
+ a:visited {
+ text-decoration: underline;
+ }
+
+ a[href]:after {
+ content: " (" attr(href) ")";
+ }
+
+ abbr[title]:after {
+ content: " (" attr(title) ")";
+ }
+
+ /*
+ * Don't show links that are fragment identifiers,
+ * or use the `javascript:` pseudo protocol
+ */
+
+ a[href^="#"]:after,
+ a[href^="javascript:"]:after {
+ content: "";
+ }
+
+ pre,
+ blockquote {
+ border: 1px solid #999;
+ page-break-inside: avoid;
+ }
+
+ /*
+ * Printing Tables:
+ * http://css-discuss.incutio.com/wiki/Printing_Tables
+ */
+
+ thead {
+ display: table-header-group;
+ }
+
+ tr,
+ img {
+ page-break-inside: avoid;
+ }
+
+ img {
+ max-width: 100% !important;
+ }
+
+ p,
+ h2,
+ h3 {
+ orphans: 3;
+ widows: 3;
+ }
+
+ h2,
+ h3 {
+ page-break-after: avoid;
+ }
+}
diff --git a/feedr/styles/normalize.css b/feedr/styles/normalize.css
new file mode 100644
index 0000000..5e5e3c8
--- /dev/null
+++ b/feedr/styles/normalize.css
@@ -0,0 +1,424 @@
+/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
+
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS and IE text size adjust after device orientation change,
+ * without disabling user zoom.
+ */
+
+html {
+ font-family: sans-serif; /* 1 */
+ -ms-text-size-adjust: 100%; /* 2 */
+ -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Remove default margin.
+ */
+
+body {
+ margin: 0;
+}
+
+/* HTML5 display definitions
+ ========================================================================== */
+
+/**
+ * Correct `block` display not defined for any HTML5 element in IE 8/9.
+ * Correct `block` display not defined for `details` or `summary` in IE 10/11
+ * and Firefox.
+ * Correct `block` display not defined for `main` in IE 11.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section,
+summary {
+ display: block;
+}
+
+/**
+ * 1. Correct `inline-block` display not defined in IE 8/9.
+ * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+ */
+
+audio,
+canvas,
+progress,
+video {
+ display: inline-block; /* 1 */
+ vertical-align: baseline; /* 2 */
+}
+
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+ display: none;
+ height: 0;
+}
+
+/**
+ * Address `[hidden]` styling not present in IE 8/9/10.
+ * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
+ */
+
+[hidden],
+template {
+ display: none;
+}
+
+/* Links
+ ========================================================================== */
+
+/**
+ * Remove the gray background color from active links in IE 10.
+ */
+
+a {
+ background-color: transparent;
+}
+
+/**
+ * Improve readability of focused elements when they are also in an
+ * active/hover state.
+ */
+
+a:active,
+a:hover {
+ outline: 0;
+}
+
+/* Text-level semantics
+ ========================================================================== */
+
+/**
+ * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
+ */
+
+abbr[title] {
+ border-bottom: 1px dotted;
+}
+
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+ */
+
+b,
+strong {
+ font-weight: bold;
+}
+
+/**
+ * Address styling not present in Safari and Chrome.
+ */
+
+dfn {
+ font-style: italic;
+}
+
+/**
+ * Address variable `h1` font-size and margin within `section` and `article`
+ * contexts in Firefox 4+, Safari, and Chrome.
+ */
+
+h1 {
+ font-size: 2em;
+ margin: 0.67em 0;
+}
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+
+mark {
+ background: #ff0;
+ color: #000;
+}
+
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+
+small {
+ font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+
+sub,
+sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+
+sup {
+ top: -0.5em;
+}
+
+sub {
+ bottom: -0.25em;
+}
+
+/* Embedded content
+ ========================================================================== */
+
+/**
+ * Remove border when inside `a` element in IE 8/9/10.
+ */
+
+img {
+ border: 0;
+}
+
+/**
+ * Correct overflow not hidden in IE 9/10/11.
+ */
+
+svg:not(:root) {
+ overflow: hidden;
+}
+
+/* Grouping content
+ ========================================================================== */
+
+/**
+ * Address margin not present in IE 8/9 and Safari.
+ */
+
+figure {
+ margin: 1em 40px;
+}
+
+/**
+ * Address differences between Firefox and other browsers.
+ */
+
+hr {
+ box-sizing: content-box;
+ height: 0;
+}
+
+/**
+ * Contain overflow in all browsers.
+ */
+
+pre {
+ overflow: auto;
+}
+
+/**
+ * Address odd `em`-unit font size rendering in all browsers.
+ */
+
+code,
+kbd,
+pre,
+samp {
+ font-family: monospace, monospace;
+ font-size: 1em;
+}
+
+/* Forms
+ ========================================================================== */
+
+/**
+ * Known limitation: by default, Chrome and Safari on OS X allow very limited
+ * styling of `select`, unless a `border` property is set.
+ */
+
+/**
+ * 1. Correct color not being inherited.
+ * Known issue: affects color of disabled elements.
+ * 2. Correct font properties not being inherited.
+ * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+ color: inherit; /* 1 */
+ font: inherit; /* 2 */
+ margin: 0; /* 3 */
+}
+
+/**
+ * Address `overflow` set to `hidden` in IE 8/9/10/11.
+ */
+
+button {
+ overflow: visible;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+ * Correct `select` style inheritance in Firefox.
+ */
+
+button,
+select {
+ text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ * and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ * `input` and others.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+ -webkit-appearance: button; /* 2 */
+ cursor: pointer; /* 3 */
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+ cursor: default;
+}
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+ border: 0;
+ padding: 0;
+}
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+input {
+ line-height: normal;
+}
+
+/**
+ * It's recommended that you don't attempt to style these elements.
+ * Firefox's implementation doesn't respect box-sizing, padding, or width.
+ *
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+ box-sizing: border-box; /* 1 */
+ padding: 0; /* 2 */
+}
+
+/**
+ * Fix the cursor style for Chrome's increment/decrement buttons. For certain
+ * `font-size` values of the `input`, it causes the cursor style of the
+ * decrement button to change from `default` to `text`.
+ */
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+ height: auto;
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
+ */
+
+input[type="search"] {
+ -webkit-appearance: textfield; /* 1 */
+ box-sizing: content-box; /* 2 */
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari and Chrome on OS X.
+ * Safari (but not Chrome) clips the cancel button when the search input has
+ * padding (and `textfield` appearance).
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+ border: 1px solid #c0c0c0;
+ margin: 0 2px;
+ padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct `color` not being inherited in IE 8/9/10/11.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+
+legend {
+ border: 0; /* 1 */
+ padding: 0; /* 2 */
+}
+
+/**
+ * Remove default vertical scrollbar in IE 8/9/10/11.
+ */
+
+textarea {
+ overflow: auto;
+}
+
+/**
+ * Don't inherit the `font-weight` (applied by a rule above).
+ * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+ */
+
+optgroup {
+ font-weight: bold;
+}
+
+/* Tables
+ ========================================================================== */
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+
+td,
+th {
+ padding: 0;
+}
diff --git a/feedr/styles/style.css b/feedr/styles/style.css
new file mode 100644
index 0000000..106c712
--- /dev/null
+++ b/feedr/styles/style.css
@@ -0,0 +1,239 @@
+/* General styles */
+.container {
+ max-width: 1000px;
+ margin: 0 auto;
+}
+
+#popUp {
+ opacity: 0.95;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: #fff;
+}
+
+#popUp .closePopUp {
+ position: absolute;
+ top: 20px;
+ right: 20px;
+ font-size: 40px;
+ color: #FE052C;
+ text-decoration: none;
+}
+
+#popUp.loader {
+ background-image: url(../images/ajax_loader.gif);
+ background-repeat: no-repeat;
+ background-position: center center;
+}
+
+#popUp.loader .container {
+ display: none;
+}
+
+#popUp .container {
+ margin-top: 80px;
+}
+
+#popUp h1 {
+ margin-bottom: 0;
+}
+
+#popUp .popUpAction {
+ padding: 10px;
+ background-color: #FE052C;
+ color: #fff;
+ text-decoration: none;
+ border-radius: 5px;
+ transform: 0.2s all;
+ margin-top: 30px;
+ display: inline-block;
+}
+
+#popUp .popUpAction:hover {
+ color: #FE052C;
+ background: #fff;
+}
+
+/* Header styles */
+header {
+ background-color: #FE052C;
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ /*what is being changed*/
+ z-index: 1000,
+}
+
+header h1 {
+ color: #FFF;
+ padding: 10px 2%;
+ margin: 0;
+ width: 16%;
+ float: left;
+ padding-left: 0;
+}
+
+/* Header navigation bar */
+header nav {
+ padding: 10px 2%;
+ width: 76%;
+ float: right;
+ text-align: right;
+ line-height: 30px;
+ margin-top: 0;
+ position: relative;
+ vertical-align: middle;
+}
+
+/* Search bar */
+header #search {
+ width: 20px;
+ height: 20px;
+ position: absolute;
+ right: 20px;
+ top: 10px;
+}
+
+header #search a {
+ display: block;
+ width: 100%;
+ padding: 10px;
+}
+
+header #search a:hover {
+ background: #CC0020;
+}
+
+header #search img {
+ width: 100%;
+ display: block;
+}
+
+header #search input {
+ position: absolute;
+ right: 20px;
+ /*top: 10px;*/
+ padding: 8px 0;
+ width: 0;
+ transition: 0.2s all;
+ visibility: hidden;
+}
+
+header #search.active input {
+ width: 160px;
+ padding: 8px 10px;
+ visibility: visible;
+}
+
+header #search.active a {
+ background: #CC0020;
+}
+
+header nav a {
+ display:block;
+ padding:0 10px;
+ color:#FFF;
+ font-size:16px;
+ line-height: 40px;
+ text-decoration:none;
+ transition: 0.2s all;
+}
+
+header nav a:hover {
+ background-color: #fff;
+ color: #CC0020;
+}
+
+nav ul {
+ padding:0;
+ margin:0;
+ margin-right: 30px;
+ list-style: none;
+ position: relative;
+ }
+
+nav ul li {
+ display:inline-block;
+ background-color: #CC0020;
+ position: relative;
+}
+
+nav ul ul {
+ display: none;
+ position: absolute;
+ top: 40px;
+ right: -30px;
+}
+
+/* Display Dropdowns on Hover */
+nav ul li:hover > ul {
+ display:inherit;
+}
+
+/* First Tier Dropdown */
+nav ul ul li {
+ width:170px;
+ float:none;
+ display:list-item;
+ position: relative;
+}
+
+/* Main Section */
+#main {
+ margin-top: 65px;
+}
+
+/* Individual Article Styling */
+.article {
+ border-bottom: 1px solid #ccc;
+ transition: 0.2s all;
+}
+
+.article:hover {
+ padding: 0 2%;
+ background-color: #eee;
+}
+
+.article .featuredImage {
+ width: 12%;
+ float: left;
+ margin: 1.5%;
+ max-width: 60px;
+}
+
+.article .featuredImage img {
+ max-width: 100%;
+ border-radius: 50px;
+}
+
+.article .articleContent {
+ width: 70%;
+ float: left;
+}
+
+.article .articleContent a {
+ text-decoration: none;
+}
+
+.article .articleContent h3 {
+ margin-bottom: 0;
+ color: #FE052C;
+}
+
+.article .articleContent h6 {
+ margin-top: 0;
+ color: #666;
+}
+
+.article .impressions {
+ width: 15%;
+ float: right;
+ font-size: 30px;
+ margin-top: 15px;
+ text-align: right;
+ color: #097FB2;
+}
diff --git a/js/app.js b/js/app.js
index a6502cd..f8a2126 100755
--- a/js/app.js
+++ b/js/app.js
@@ -1,3 +1,5 @@
/*
+ GA-JS-SF-9
+ Samantha Park
Please add all Javascript code to this file.
*/