updated with styling

Author: Leslie Rose

client/node_modules/.cache/babel-loader/025edc43c8846b64cf0f593735bd9343a27e2491.json.gz

@@ -1,4 +1,8 @@
 .deletebutton {
   float: right;
-  color: #e74944;
+  background-color:#dc6f68;
 }
+
+.deletebutton:hover {
+  background-color: rgb(0, 255, 234);
+}

client/node_modules/.cache/babel-loader/037ec7801b6ae837efc40e47638fb558aa6a4c54.json.gz

@@ -0,0 +1,11 @@
+.formButton {
+    float: right;
+    background-color:#dc6f68!important;
+    border: none;
+    color: black!important;
+  }
+  
+.formButton:hover {
+    background-color: rgb(0, 255, 234);
+    border: none;
+  }

client/node_modules/.cache/babel-loader/09a6c078df670c0df2af3785af085e100794e615.json.gz

@@ -1,7 +1,8 @@
 import React from "react";
+import "./FormBtn.css";
 
 export const FormBtn = props => (
-  <button {...props} style={{ float: "right", marginBottom: 10 }} className="btn btn-success">
+  <button {...props} style={{ float: "right", marginBottom: 10 }} className="btn btn-success formButton">
     {props.children}
   </button>
 );

client/node_modules/.cache/babel-loader/0bcc01690a2acbc991220b791617cf2a152474cd.json.gz

@@ -0,0 +1,22 @@
+.form-control:valid {
+    background-color: #000000;
+}
+*::-webkit-input-placeholder {
+    color: #dc6f68!important;
+}
+*:-moz-placeholder {
+    /* FF 4-18 */
+    color: dc6f68!important;
+}
+*::-moz-placeholder {
+    /* FF 19+ */
+    color: dc6f68!important;
+}
+*:-ms-input-placeholder {
+    /* IE 10+ */
+    color: dc6f68!important;
+}
+
+.form-control {
+    color: #dc6f68!important;
+}

client/node_modules/.cache/babel-loader/0f46a9e8195b9d7cb5d039436df03a2aa46b0140.json.gz

@@ -1,4 +1,6 @@
 import React from "react";
+import "./Input.css";
+
 
 export const Input = props => (
   <div className="form-group">

client/node_modules/.cache/babel-loader/257038492b682214efa99cf5eae48c9b556aa8d9.json.gz

@@ -0,0 +1,8 @@
+.container-fluid {
+    padding-top: 60px;
+    background-color: rgb(240, 233, 233);
+}
+
+body {
+    background-color: rgb(240, 233, 233);
+}

client/node_modules/.cache/babel-loader/2bbf427211b5a23256db89976048f8966b7dcace.json.gz

@@ -1,4 +1,5 @@
 import React from "react";
+import "./Container.css";
 
 export const Container = ({ fluid, children }) => (
   <div className={`container${fluid ? "-fluid" : ""}`}>

client/node_modules/.cache/babel-loader/2f8fc55ce6fee40cbab882bdb51406b4ee645028.json.gz

@@ -0,0 +1,40 @@
+@font-face {
+    font-family: "Newspaper";
+    src: url("../../fonts/newspaperfont.ttf");
+    font-weight: normal;
+  }
+
+
+.jumbotron {
+    background: url("../../images/newspaperbackground.jpg");
+    border: rgb(0, 255, 234) solid 10px;
+}
+
+h1 {
+    font-family: "Newspaper", Arial, Helvetica, sans-serif;
+    font-size: 80px;
+    margin-top: -30px;
+}
+
+@media screen and (max-width: 701px) { 
+  
+    h1 {
+        font-size: 70px;
+    }
+}
+
+@media screen and (max-width: 520px) { 
+  
+    h1 {
+        font-size: 50px;
+    }
+}
+
+@media screen and (max-width: 400px) { 
+  
+    h1 {
+        font-size: 50px;
+        margin-top: -50px;
+    }
+}
+

client/node_modules/.cache/babel-loader/33127fc265eac7b633a9731fdcea501a706131f4.json.gz

@@ -1,4 +1,5 @@
 import React from "react";
+import "./Jumbotron.css";
 
 const Jumbotron = ({ children }) => (
   <div

client/node_modules/.cache/babel-loader/37cf46179377d809f22f86ae92b606f38e5c28f5.json.gz

@@ -31,3 +31,13 @@
 .list-overflow-container li:last-child {
   border-bottom: none;
 }
+
+.list-group-item a {
+  text-decoration: none;
+  color:#dc6f68!important;
+
+}
+
+.list-group-item a:hover {
+  color: rgb(0, 255, 234)!important;
+}

client/node_modules/.cache/babel-loader/389caaff12a35eeedfbd6cafed325f3496cd9249.json.gz

@@ -0,0 +1,15 @@
+.navbar {
+    background-color: rgb(0, 0, 0)!important;
+    box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.2), 0 20px 20px 0 rgba(0, 0, 0, 0.19);
+    position: fixed;
+    width: 100%;
+}
+
+a:hover {
+    color: rgb(0, 255, 234);
+}
+
+.nav-link {
+    font-size: 16px;
+    margin-top: 3px;
+}

client/node_modules/.cache/babel-loader/40729c3e691b753823981bad4b1086fe19ff180f.json.gz

@@ -1,7 +1,8 @@
 import React from "react";
+import "./Nav.css";
 
 const Nav = () => (
-  <nav className="navbar navbar-expand-lg navbar-dark bg-primary">
+  <nav className="navbar navbar-expand-lg bg-primary sticky-top">
     <a className="navbar-brand" href="/">
       NYT ARTICLE SCRUBBER
     </a>

client/node_modules/.cache/babel-loader/422fb98eac673bc738b80e14d9974adc24d35ec5.json.gz

@@ -1,4 +1,8 @@
-.savebutton {
+.save-button {
   float: right;
-  color: #e74944;
+  background-color:#dc6f68;
+}
+
+.save-button:hover {
+  background-color: rgb(0, 255, 234);
 }

client/node_modules/.cache/babel-loader/4325e8dd4570bb590ff7fffaa76e9731c4fb5876.json.gz

@@ -4,20 +4,15 @@ import Jumbotron from "../../components/Jumbotron";
 import nytapi from "../../utils/nyt/nytapi";
 import { Col, Row, Container } from "../../components/Grid";
 import { List, ListItem } from "../../components/List";
-import { Input, FormBtn } from "../../components/Form";
-// import Note from "../Note";
-
 
 class Saved extends Component {
   state = {
     search: "",
+    title: "",
     startYear: "",
     endYear: "",
     articles: [],
     savedArticles: [],
-    title: "",
-    savedNotes: [],
-    note: ""
   };
 
   componentDidMount() {
@@ -39,7 +34,6 @@ class Saved extends Component {
       .then(res => {
         console.log(res)
         this.setState({ articles: res.data.response.docs });
-        // console.log(res.data)
       })
       .catch(err => console.log(err));
   }
@@ -58,7 +52,7 @@ class Saved extends Component {
 
     //Find the article from the articles array with the ID matching the saved button
     const articleSaveButtonContent = (this.state.articles.filter(element => element._id === event.target.id)[0]);
-    nytapi.saveArticle({ title: articleSaveButtonContent.headline.main, author: articleSaveButtonContent.source, summary: articleSaveButtonContent.snippet, articleDate: articleSaveButtonContent.pub_date, link: articleSaveButtonContent.web_url, note: "none" })
+    nytapi.saveArticle({ title: articleSaveButtonContent.headline.main, author: articleSaveButtonContent.source, summary: articleSaveButtonContent.snippet, articleDate: articleSaveButtonContent.pub_date, link: articleSaveButtonContent.web_url})
       .then(res =>
         this.loadSavedArticles())
       .catch(err => console.log(err));
@@ -86,16 +80,7 @@ class Saved extends Component {
 
   render() {
     return (
-      <Container fluid>
-        <Row>
-          <Col size="md-12">
-            <Jumbotron>
-              <h1>New York Times Article Scrubber</h1>
-            </Jumbotron>
-          
-          </Col>
-        </Row>
-
+      <Container fluid>          
         <Row>
           <Col size="md-12 sm-12">
             <Jumbotron>
@@ -109,28 +94,13 @@ class Saved extends Component {
                         <h2>{article.title}</h2>
                         </strong>
                         <h5>Date published: {article.articleDate}</h5>
+                        <h5>Date saved: {article.date}</h5>
                         <h6>{article.summary}</h6>
 
-                         <a href={article.link} target="blank"> Link</a>
-                    <form>
-                      <Input
-                        key={article._id}
-                        id={article._id}
-                        value={this.state.note}
-                        onChange={this.handleInputChange}
-                        name="note"
-                        placeholder="Notes"
-                      />
+                         <a href={article.link} target="blank"> <span role="img" aria-label="newspaper1">📰</span> Read More Here <span role="img" aria-label="newspaper2">📰</span></a>
+                    
                       <DeleteButton id={article._id} onClick={this.deleteArticleFunction} />
-                      {/* <Notes id={article._id} onClick={this.addNoteFunction} data-toggle="modal" data-target="#NotesModal" /> */}
-                      <FormBtn
-                        // id={note._id}
-                        disabled={!(this.state.note)}
-                        onClick={this.addNoteFunction}
-                      >
-                        Submit
-                  </FormBtn>
-                    </form>
+                     
                   </ListItem>
 
                 ))}

client/node_modules/.cache/babel-loader/535531abfe6809dfb52a1f8e95bdc5c02778a3f5.json.gz

@@ -1,13 +1,10 @@
 import React, { Component } from "react";
 import SaveButton from "../../components/SaveButton";
-import DeleteButton from "../../components/DeleteButton";
 import Jumbotron from "../../components/Jumbotron";
 import nytapi from "../../utils/nyt/nytapi";
-import { Link } from "react-router-dom";
 import { Col, Row, Container } from "../../components/Grid";
 import { List, ListItem } from "../../components/List";
 import { Input, FormBtn } from "../../components/Form";
-// import Note from "../Note";
 
 
 class SearchArticles extends Component {
@@ -18,21 +15,22 @@ class SearchArticles extends Component {
     articles: [],
     savedArticles: [],
     title: "",
-    notes: ""
   };
 
 
 
   searchArticle = (event) => {
     event.preventDefault();
+    
     nytapi.getArticles(this.state.search, this.state.startYear, this.state.endYear)
       .then(res => {
-        console.log(res)
+        console.log(res.data.response.docs)
         this.setState({ articles: res.data.response.docs });
-        // console.log(res.data)
       })
-      .catch(err => console.log(err));
-  }
+      .then(res =>
+        alert("📰 Articles found! 📰"))
+      .catch(err => console.log(err));  
+    }
 
   deleteArticleFunction = (event) => {
     event.preventDefault();
@@ -48,37 +46,13 @@ class SearchArticles extends Component {
 
     //Find the article from the articles array with the ID matching the saved button
     const articleSaveButtonContent = (this.state.articles.filter(element => element._id === event.target.id)[0]);
-    nytapi.saveArticle({ title: articleSaveButtonContent.headline.main, author: articleSaveButtonContent.source, summary: articleSaveButtonContent.snippet, articleDate: articleSaveButtonContent.pub_date, link: articleSaveButtonContent.web_url, note: "none" })
+    nytapi.saveArticle({ title: articleSaveButtonContent.headline.main, author: articleSaveButtonContent.source, summary: articleSaveButtonContent.snippet, articleDate: articleSaveButtonContent.pub_date, link: articleSaveButtonContent.web_url
+  })
       .then(res =>
-        alert("Article saved!"))
+        alert("📰 Article saved! 📰"))
       .catch(err => console.log(err));
   };
 
-  // addNoteFunction = event => {
-  //   event.preventDefault();
-
-  //         console.log(this.state.note
-  //         )
-
-  //   nytapi.saveNote({note: this.state.note
-  //   })
-  //     .then(res => 
-  //      this.loadSavedNotes()
-  //     )
-  //     .catch(err => console.log(err));
-  // };
-
-  // loadSavedNotes = (event) => {
-  //   event.preventDefault();
-  //   nytapi.getSavedNotes()
-  //   .then(res => {
-  //     this.setState({ savedNotes: res.data })
-  //     console.log(res.data)
-  //   })
-  //   .catch(err => console.log(err));
-  // }
-
-
   handleInputChange = event => {
     const { name, value } = event.target;
     this.setState({
@@ -112,25 +86,25 @@ class SearchArticles extends Component {
                 value={this.state.search}
                 onChange={this.handleInputChange}
                 name="search"
-                placeholder="Search Term (required)"
+                placeholder="Search Term"
               />
               <Input
                 value={this.state.startYear}
                 onChange={this.handleInputChange}
                 name="startYear"
-                placeholder="Start Date (optional)"
+                placeholder="Start Date"
               />
               <Input
                 value={this.state.endYear}
                 onChange={this.handleInputChange}
                 name="endYear"
-                placeholder="End Date (optional)"
+                placeholder="End Date"
               />
               <FormBtn
                 disabled={!(this.state.search && this.state.startYear && this.state.endYear)}
                 onClick={this.searchArticle}
               >
-                Submit
+                SUBMIT
               </FormBtn>
             </form>
           </Col>
@@ -149,7 +123,7 @@ class SearchArticles extends Component {
                         <h5>Date published: {article.pub_date}</h5>
                         <h6>{article.snippet}</h6>
 
-                         <a href={article.web_url} target="blank"> Link</a>
+                         <a href={article.web_url} target="blank"> <span role="img" aria-label="newspaper1">📰</span> Read more here <span role="img" aria-label="newspaper2">📰</span></a>
                     <SaveButton id={article._id} onClick={this.saveArticleFunction} />
                   </ListItem>
                 ))}