Recent Rutgers Headlines

challenge/src/components/Headlines.jsx

@@ -0,0 +1,41 @@
+import React, { useState, useEffect } from 'react';
+import './headlineStyles.css';
+
+
+export default function Headlines() {
+    const [headlines, setHeadlines] = useState([]);
+
+    useEffect(() => {
+        const now = new Date();
+        const isoString = now.toISOString();
+        fetch(`https://newsapi.org/v2/everything?q=rutgers&searchIn=title&sortBy=publishedAt&apiKey=d96f06c59026476fad99574df2b51f09`)
+        .then((response) => response.json())
+
+        .then((data) => {
+            console.log(data);
+            setHeadlines(data.articles.slice(0, 3));
+        })
+
+
+
+    }, [])
+
+    return(
+        <div className= "headlinesDiv">
+        <h1 className = "mainHeading"> Recent Rutgers Rundowns</h1>
+        <ul className = "articlesList">
+                {headlines.map((list, index)=> (
+                        <li key={index}>
+                            <a href = {list.url} target="_blank" rel="noopener noreferrer"> {list.title}</a>  
+                        <h3 className = "dates">{new Date(list.publishedAt).toLocaleDateString('en-US', {
+                                year: 'numeric',
+                                month: 'long',
+                                day: 'numeric'
+                            })}</h3></li>
+                    ))}
+            </ul>
+        </div>
+    );
+
+}
+

challenge/src/components/Pages/Home.jsx

@@ -17,6 +17,7 @@ import RandomColorButton from "../RandomColorButton";
 import MoviePage from "../MoviePage";
 import Pokesearch from "../Pokesearch";
 import News from "../News";
+import Headlines from "../Headlines";
 
 const Home = (props) => {
   return (
@@ -72,6 +73,7 @@ const Home = (props) => {
         <PartyParrot />
         <ElonMusk />
         <News />
+        <Headlines />
       </div>
     </div>
   );

challenge/src/components/headlineStyles.css

@@ -0,0 +1,24 @@
+
+.headlinesDiv {
+    text-align: center;
+
+}
+.mainHeading {
+    font-family: Georgia, serif;
+}
+.articlesList {
+    display: inline-flex;
+    background-color: transparent;
+    font-size: 15px;
+    font-family: 'Courier New', monospace;
+    padding: 20px;
+
+}
+.articlesList li:hover {
+    transform: scale(1.02);
+    background-color: #f3ade5c2;
+}
+
+.dates {
+    font-size:10px;
+}