From ca1d5710f4697e4c355c0571b69250b6f0584c3b Mon Sep 17 00:00:00 2001 From: Terri Archer Date: Wed, 9 Nov 2022 14:06:22 -0500 Subject: [PATCH 1/4] completed coursework --- package-lock.json | 68 ++++++++++++++++++++++++++++++++++++---- package.json | 1 + src/App.css | 15 +++++++++ src/App.js | 20 +++++++++--- src/components/Header.js | 0 src/components/Photo.js | 15 +++++++++ 6 files changed, 108 insertions(+), 11 deletions(-) create mode 100644 src/components/Header.js create mode 100644 src/components/Photo.js diff --git a/package-lock.json b/package-lock.json index bba0ebd384..b3a4c60c3a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "@testing-library/jest-dom": "^5.16.2", "@testing-library/react": "^12.1.3", "@testing-library/user-event": "^13.5.0", + "axios": "^1.1.3", "react": "^17.0.2", "react-dom": "^17.0.2", "react-scripts": "5.0.0" @@ -4048,6 +4049,29 @@ "node": ">=4" } }, + "node_modules/axios": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.1.3.tgz", + "integrity": "sha512-00tXVRwKx/FZr/IDVFt4C+f9FYairX517WoGCL6dpOntqLkZofjhu43F/Xl44UOpqa+9sLFDrG/XAnFsUYgkDA==", + "dependencies": { + "follow-redirects": "^1.15.0", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, + "node_modules/axios/node_modules/form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/axobject-query": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz", @@ -6960,9 +6984,9 @@ "integrity": "sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==" }, "node_modules/follow-redirects": { - "version": "1.14.9", - "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.9.tgz", - "integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==", + "version": "1.15.2", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz", + "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==", "funding": [ { "type": "individual", @@ -11306,6 +11330,11 @@ "node": ">= 0.10" } }, + "node_modules/proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" + }, "node_modules/psl": { "version": "1.8.0", "resolved": "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz", @@ -17120,6 +17149,28 @@ "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.1.tgz", "integrity": "sha512-gd1kmb21kwNuWr6BQz8fv6GNECPBnUasepcoLbekws23NVBLODdsClRZ+bQ8+9Uomf3Sm3+Vwn0oYG9NvwnJCw==" }, + "axios": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.1.3.tgz", + "integrity": "sha512-00tXVRwKx/FZr/IDVFt4C+f9FYairX517WoGCL6dpOntqLkZofjhu43F/Xl44UOpqa+9sLFDrG/XAnFsUYgkDA==", + "requires": { + "follow-redirects": "^1.15.0", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + }, + "dependencies": { + "form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "requires": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + } + } + } + }, "axobject-query": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz", @@ -19294,9 +19345,9 @@ "integrity": "sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==" }, "follow-redirects": { - "version": "1.14.9", - "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.9.tgz", - "integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==" + "version": "1.15.2", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz", + "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==" }, "fork-ts-checker-webpack-plugin": { "version": "6.5.0", @@ -22308,6 +22359,11 @@ } } }, + "proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" + }, "psl": { "version": "1.8.0", "resolved": "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz", diff --git a/package.json b/package.json index 43ed2e2816..95c84f0fa7 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "@testing-library/jest-dom": "^5.16.2", "@testing-library/react": "^12.1.3", "@testing-library/user-event": "^13.5.0", + "axios": "^1.1.3", "react": "^17.0.2", "react-dom": "^17.0.2", "react-scripts": "5.0.0" diff --git a/src/App.css b/src/App.css index 74b5e05345..27b2d5fc15 100644 --- a/src/App.css +++ b/src/App.css @@ -28,6 +28,21 @@ color: #61dafb; } +img { + max-width: 40%; + object-fit: cover; +} + +.nasa-data-wrapper { + display: flex; + flex-direction: column; + align-items: center; +} + +.nasa-data-wrapper p{ + width: 50%; +} + @keyframes App-logo-spin { from { transform: rotate(0deg); diff --git a/src/App.js b/src/App.js index d9a6e0db35..579c97b193 100644 --- a/src/App.js +++ b/src/App.js @@ -1,13 +1,23 @@ -import React from "react"; +import React, {useState,useEffect} from "react"; +import axios from "axios" +import Photo from "./components/Photo" import "./App.css"; +const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; + + function App() { + const [nasaData, setNasaData] = useState() + useEffect(() => { + axios.get('https://api.nasa.gov/planetary/apod?api_key=KegHQiuuqdamaU7M8nYwsOF0gVINoftWAqEaf389') + .then(res => { + setNasaData(res.data) + }) + .catch(err => console.error(err)) + }, []) return (
-

- Read through the instructions in the README.md file to build your NASA - app! Have fun 🚀! -

+ {nasaData && }
); } diff --git a/src/components/Header.js b/src/components/Header.js new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/components/Photo.js b/src/components/Photo.js new file mode 100644 index 0000000000..31e36b38e7 --- /dev/null +++ b/src/components/Photo.js @@ -0,0 +1,15 @@ +import React from "react"; + + +const Photo = (props) => { + return( +
+

{props.photo.title}

+

{props.photo.copyright}

+ {props.photo.title}/ +

{props.photo.explanation}

+
+ ) +} + +export default Photo \ No newline at end of file From 391b7a1d0da50e3e54430362580e3af7ab9c675a Mon Sep 17 00:00:00 2001 From: Terri Archer Date: Wed, 9 Nov 2022 14:37:43 -0500 Subject: [PATCH 2/4] completed coursework and began stylings --- public/index.html | 1 + src/App.css | 7 +++++++ src/App.js | 4 ++-- src/components/Header.js | 21 +++++++++++++++++++++ 4 files changed, 31 insertions(+), 2 deletions(-) diff --git a/public/index.html b/public/index.html index 65c7f76ca4..f039d0fa5c 100644 --- a/public/index.html +++ b/public/index.html @@ -10,6 +10,7 @@ content="Web site created using create-react-app" /> + + - Nasa
- diff --git a/src/App.css b/src/App.css index cecea2bccb..ea0348f937 100644 --- a/src/App.css +++ b/src/App.css @@ -32,23 +32,6 @@ p, h1, h2, h3 { font-family: 'Inconsolata', monospace; } -img { - max-width: 40%; - object-fit: cover; - border: ridge 0.2rem; -} - -.nasa-data-wrapper { - margin: 2%; - display: flex; - flex-direction: column; - align-items: center; - border: groove 0.2rem #a9a9ab; -} - -.nasa-data-wrapper p{ - width: 50%; -} @keyframes App-logo-spin { from { diff --git a/src/App.js b/src/App.js index d754df769c..763446b53d 100644 --- a/src/App.js +++ b/src/App.js @@ -5,6 +5,7 @@ import Header from "./components/Header" import "./App.css"; + function App() { const [nasaData, setNasaData] = useState() useEffect(() => { @@ -16,8 +17,8 @@ function App() { }, []) return (
- {nasaData &&
} - {nasaData && } + {nasaData &&
} + {nasaData && }
); } diff --git a/src/components/Photo.js b/src/components/Photo.js index 31e36b38e7..a5507a3a4e 100644 --- a/src/components/Photo.js +++ b/src/components/Photo.js @@ -1,14 +1,53 @@ import React from "react"; +import styled from 'styled-components' + + +const StyledWrapper = styled.div` + background-color: ${pr => pr.theme.wildcard}; + margin: 2%; + align-items: center; + border: groove 0.2rem #a9a9ab; + + h2 { + font-style: bold; + } + + h3 { + font-style: italic; + } + + img { + max-width: 40%; + // object-fit: cover; + border: ridge 0.2rem; + } + + .content { + margin: 3%; + display: flex; + flex-direction: row; + } + + .content p { + padding: 2%; + width: 50%; + margin: 5%; + border: thick double; + background-color: ${pr=> pr.theme.primaryColor}; + } +`; const Photo = (props) => { return( -
+

{props.photo.title}

{props.photo.copyright}

- {props.photo.title}/ -

{props.photo.explanation}

-
+
+ {props.photo.title}/ +

{props.photo.explanation}

+
+ ) } diff --git a/src/index.js b/src/index.js index afed62d599..4662bddab3 100644 --- a/src/index.js +++ b/src/index.js @@ -2,5 +2,12 @@ import React from "react"; import ReactDOM from "react-dom"; import "./index.css"; import App from "./App"; +import { ThemeProvider } from "styled-components" +import theme from "./theme/index" -ReactDOM.render(, document.getElementById("root")); +ReactDOM.render( + + + , + document.getElementById("root") +); diff --git a/src/theme/index.js b/src/theme/index.js new file mode 100644 index 0000000000..2acca96852 --- /dev/null +++ b/src/theme/index.js @@ -0,0 +1,6 @@ +export default { + primaryColor: '#D5C5C8', + secondary: '#9DA3A4', + teriary: '#604D53', + wildcard: '#db7f8e' +} \ No newline at end of file From 93011672aad7a74bbdb35aad540ff3c0eacc689e Mon Sep 17 00:00:00 2001 From: Terri Archer Date: Fri, 11 Nov 2022 15:18:12 -0500 Subject: [PATCH 4/4] added stylings --- public/index.html | 2 ++ src/components/Header.js | 40 +++++++++++++++++++++++++++++++++++++--- src/components/Photo.js | 14 +++++++++++--- src/index.css | 4 ++++ src/index.js | 2 +- src/theme/index.js | 2 +- 6 files changed, 56 insertions(+), 8 deletions(-) diff --git a/public/index.html b/public/index.html index b6ed11c769..0d62747e35 100644 --- a/public/index.html +++ b/public/index.html @@ -11,6 +11,8 @@ /> + + diff --git a/src/components/Header.js b/src/components/Header.js index c13c26af73..7c62cbc724 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -1,5 +1,35 @@ import React from "react"; +import styled from "styled-components"; +/** + * To-Do + * add in button functionality + * find proper color theme + */ + + +const MainWrapper = styled.div` + width: 50%; + border: thick double; + margin: 1% auto; + + h1, h3 { + font-family: 'Anybody', cursive; + } + + .dashboard { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-evenly; + } + + button { + background-color: ${pr => pr.theme.secondary}; + } + + +`; const Header = (props) => { const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; @@ -9,10 +39,14 @@ const Header = (props) => { return ( -
+

Welcome to your NASA photo of the day!

-

{month + " "+ day + ", " + year}

-
+
+ +

{month + " "+ day + ", " + year}

+ +
+ ) }; diff --git a/src/components/Photo.js b/src/components/Photo.js index a5507a3a4e..e836b75819 100644 --- a/src/components/Photo.js +++ b/src/components/Photo.js @@ -3,13 +3,18 @@ import styled from 'styled-components' const StyledWrapper = styled.div` - background-color: ${pr => pr.theme.wildcard}; + background-color: ${pr => pr.theme.primary}; margin: 2%; align-items: center; border: groove 0.2rem #a9a9ab; + h2, h3 { + background-color: ${pr => pr.theme.primary}; + } + h2 { font-style: bold; + font-family: 'Anybody', cursive; } h3 { @@ -26,14 +31,17 @@ const StyledWrapper = styled.div` margin: 3%; display: flex; flex-direction: row; + background-color: ${pr => pr.theme.primary}; } .content p { padding: 2%; width: 50%; margin: 5%; - border: thick double; - background-color: ${pr=> pr.theme.primaryColor}; + border: thick double black; + background-color: ${pr=> pr.theme.secondary}; + color: white; + font-family: 'Exo 2', sans-serif; } `; diff --git a/src/index.css b/src/index.css index 4a1df4db71..7c06f2f1d9 100644 --- a/src/index.css +++ b/src/index.css @@ -11,3 +11,7 @@ code { font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; } + +*{ + background-color: #604D53; +} diff --git a/src/index.js b/src/index.js index 4662bddab3..20cc93607a 100644 --- a/src/index.js +++ b/src/index.js @@ -3,7 +3,7 @@ import ReactDOM from "react-dom"; import "./index.css"; import App from "./App"; import { ThemeProvider } from "styled-components" -import theme from "./theme/index" +import theme from "./theme" ReactDOM.render( diff --git a/src/theme/index.js b/src/theme/index.js index 2acca96852..e8a4221e8e 100644 --- a/src/theme/index.js +++ b/src/theme/index.js @@ -1,5 +1,5 @@ export default { - primaryColor: '#D5C5C8', + primary: '#D5C5C8', secondary: '#9DA3A4', teriary: '#604D53', wildcard: '#db7f8e'