Skip to content

Commit

Permalink
implemented Home Background Image with picture got from DisplayBgImage
Browse files Browse the repository at this point in the history
  • Loading branch information
dorothyynwong committed Jul 31, 2024
1 parent dbb1d91 commit 7c818ff
Show file tree
Hide file tree
Showing 3 changed files with 18 additions and 51 deletions.
40 changes: 13 additions & 27 deletions src/App.scss
Original file line number Diff line number Diff line change
Expand Up @@ -41,37 +41,23 @@ a {
text-decoration: none;
}

body {
display: flex;
}

// main is the component enclosing the Home content, including a background image and the text content it will have above it.
// The layering of the content is done with grid: main is the parent, .backrground-img and .home-content are its children
main {
display: grid;
grid-template-rows: 200vw;
grid-template-columns: 200vh;
grid-template-columns: 1fr;
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}

.backround-img {
// display: flex;
position: absolute;
// z-index: -5;
width: 200vw;
height: 200vh;
// top: 0;
// left: 0;

.background-img {
z-index: -2;
grid-area: 1 / 1 / 1 / 1;
grid-area: 1 / 1 / 3 / 2;
}

.testContent {
width: 100%;
grid-area: 1 / 1 / 1 / 1;
z-index: 1;
}

// remove this when we have actual content for our Home
// .test-home-bg {
// width: 80vw;
// height: 80vh;
// }
.home-content {
color: $text-color;
z-index: 0;
grid-area: 1 / 1 / 2 / 2;
}
2 changes: 1 addition & 1 deletion src/Home/Home.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ function Home() {
<>
<main>
<DisplayBgImage />
<div className="testContent">
<div className="home-content">
{/* Other components and content */}
<form onSubmit={handleSubmit}>
<label>Enter name:
Expand Down
27 changes: 4 additions & 23 deletions src/images/DisplayBgImage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,17 +19,7 @@ const DisplayBgImage = () => {
try {
setIsLoading(true);

// const pictureData = await fetchAPI("https://api.nasa.gov/planetary/apod?api_key=");
// test picture data for when the API requests have reached their limit:
const pictureData = {
"date": "2024-07-30",
"explanation": "To some, it looks like a penguin. But to people who study the universe, it is an interesting example of two big galaxies interacting. Just a few hundred million years ago, the upper NGC 2936 was likely a normal spiral galaxy: spinning, creating stars, and minding its own business. Then it got too close to the massive elliptical galaxy NGC 2937, below, and took a dive. Together known as Arp 142, they are featured in this new Webb infrared image, while a visible light Hubble image appears in comparison. NGC 2936 is not only being deflected, but distorted, by this close gravitational interaction. When massive galaxies pass near each other, gas is typically condensed from which new stars form. A young group of stars appears as the nose of the penguin toward the right of the upper galaxy, while in the center of the spiral, bright stars together appear as an eye. Before a billion years, the two galaxies will likely merge into one larger galaxy. Explore Your Universe: Random APOD Generator",
"hdurl": "https://apod.nasa.gov/apod/image/2407/Arp142_Webb_1487.jpg",
"media_type": "image",
"service_version": "v1",
"title": "Arp 142: Interacting Galaxies from Webb",
"url": "https://apod.nasa.gov/apod/image/2407/Arp142_Webb_960.jpg"
}
const pictureData = await fetchAPI("https://api.nasa.gov/planetary/apod?api_key=");

setMyPictureData(pictureData);
setIsLoading(false);
Expand All @@ -53,18 +43,9 @@ const DisplayBgImage = () => {
if (!myPictureData) return (<div>EMPTY</div>);


// return (
// <div style={{ backgroundImage: `url(${myPictureData.hdurl})`}}>
// {/* remove this when we have actual content for our Home */}
// <div className='test-home-bg'>
// Current bg image: {myPictureData.hdurl}
// </div>
// </div>
// )

return (
<img className='backgroung-img' src={myPictureData.hdurl}/>
)
return (
<img className='background-img' src={myPictureData.hdurl} />
)

};

Expand Down

0 comments on commit 7c818ff

Please sign in to comment.