Skip to content

Commit aad0169

Browse files
hanoseiAlice BarretthannahworkWinnie Kwok
authored
Mm 4 mars profile (#22)
Co-authored-by: Alice Barrett <alice.barrett@softwire.com> Co-authored-by: Hannah Osei <hannah.osei@softwire.com> Co-authored-by: Winnie Kwok <winnie.kwok@softwire.com>
1 parent c35e860 commit aad0169

File tree

7 files changed

+454
-1
lines changed

7 files changed

+454
-1
lines changed

‎package-lock.json‎

Lines changed: 101 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@
77
"@types/jest": "^27.5.2",
88
"@types/node": "^16.18.126",
99
"@types/react-dom": "^19.1.5",
10+
"dayjs": "^1.11.13",
1011
"react": "^19.1.0",
12+
"react-datepicker": "^8.3.0",
1113
"react-dom": "^19.1.0",
1214
"react-responsive-carousel": "^3.2.23",
1315
"react-router": "^7.6.0",

‎src/App.tsx‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,26 @@
11
import React from "react";
22
import "./App.scss";
3-
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
3+
import { Link, Route, BrowserRouter as Router, Routes } from "react-router";
4+
import ProfilePage from "./components/ProfilePage";
45
import PhotoOfTheDay from "./Components/photoOfTheDay/photoOfTheDay";
56

67
function App() {
78
return (
89
<Router>
910
<Routes>
1011
<Route path="/" element={<PhotoOfTheDay />} />
12+
<Route path="/profile" element={<ProfilePage />} />
13+
<Route
14+
path="*"
15+
element={
16+
<div>
17+
Sorry, that page does not exist, try these:
18+
<div>
19+
<Link to="/profile">Profile Page</Link>
20+
</div>
21+
</div>
22+
}
23+
/>
1124
</Routes>
1225
</Router>
1326
);

‎src/components/ProfilePage.tsx‎

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
1+
import React from "react";
2+
import { useState } from "react";
3+
import DatePicker from "react-datepicker";
4+
import "react-datepicker/dist/react-datepicker.css";
5+
import dayjs from "dayjs";
6+
import "./profilePage.scss";
7+
import "slick-carousel/slick/slick.css";
8+
import "slick-carousel/slick/slick-theme.css";
9+
import Slider from "react-slick";
10+
11+
const API_KEY = "qUubKrhKBBrb0M4uQISHm089PavbKEcLW3v7tgiP";
12+
13+
export default function ProfilePage() {
14+
const [name, setName] = useState<string>("");
15+
const [date, setDate] = useState<Date | null>(new Date());
16+
const [showProfile, setShowProfile] = useState<boolean>(false);
17+
const [roverPhotoUrls, setRoverPhotoUrls] = useState<string[]>([]);
18+
const [message, setMessage] = useState<string>(
19+
"These are the photos taken by the 'Curiosity' Rover on your birthday!",
20+
);
21+
const curiosityStartDate = new Date("2012-08-06");
22+
const settings = {
23+
dots: false,
24+
infinite: false,
25+
speed: 500,
26+
slidesToShow: 1,
27+
slidesToScroll: 1,
28+
};
29+
30+
const handleClick = () => {
31+
setShowProfile(true);
32+
getRoverPhotos().then((roverPhotos) => setRoverPhotoUrls(roverPhotos));
33+
};
34+
35+
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
36+
setName(event.target.value);
37+
};
38+
39+
const calculateAge = (date: Date) => {
40+
const today = new Date();
41+
let age = today.getFullYear() - date.getFullYear();
42+
43+
const m = today.getMonth() - date.getMonth();
44+
if (m < 0 || (m === 0 && today.getDate() < date.getDate())) {
45+
age--;
46+
}
47+
return age;
48+
};
49+
const age = date ? calculateAge(date) : 0;
50+
const marsAge = Math.round(age / 1.88);
51+
52+
async function getRoverPhotos(): Promise<string[]> {
53+
let earthDate = dayjs(date).format("YYYY-M-D");
54+
if (date && date < curiosityStartDate) {
55+
earthDate = dayjs(curiosityStartDate).format("YYYY-M-D");
56+
57+
setMessage(
58+
"Uh Oh! You're older than the Curiosity Rover, so there are no photos available. Here are the first images taken by the Curiosity Rover.",
59+
);
60+
} else {
61+
earthDate = dayjs(date).format("YYYY-M-D");
62+
}
63+
const fetchImages = await fetch(
64+
`https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/photos?earth_date=${earthDate}&api_key=${API_KEY}`,
65+
);
66+
const imagesData = await fetchImages.json();
67+
const roverPhotos = [];
68+
const roverPhotoCarouselLength = Math.min(imagesData.photos.length, 25);
69+
if (imagesData.photos.length !== 0) {
70+
for (let i = 0; i < roverPhotoCarouselLength; i++)
71+
roverPhotos.push(imagesData.photos[i].img_src);
72+
} else {
73+
setMessage(
74+
"The date of the first pictures taken by the Curiosity Rover is 06/08/2012",
75+
);
76+
}
77+
return roverPhotos;
78+
}
79+
80+
return (
81+
<div className="mars-profile-page">
82+
<div className="profile-input-section">
83+
<h1>Create your Mars profile</h1>
84+
<label className="input-field" htmlFor="name">
85+
<p>Name: </p>
86+
<input
87+
id="name"
88+
type="text"
89+
name="name"
90+
onChange={handleChange}
91+
placeholder="Enter your name here"
92+
required
93+
></input>
94+
</label>
95+
96+
<label className="input-field">
97+
<p>Birthday: </p>
98+
<DatePicker
99+
selected={date}
100+
onChange={(date) => setDate(date)}
101+
dateFormat="dd/MM/yyyy"
102+
maxDate={new Date()}
103+
showYearDropdown
104+
scrollableMonthYearDropdown
105+
placeholderText="Select your birthday"
106+
/>
107+
</label>
108+
<img
109+
className="profile-button-image"
110+
onClick={handleClick}
111+
src="https://www.pngall.com/wp-content/uploads/13/Mars-Planet-PNG-Cutout.png"
112+
alt="clickable button of mars"
113+
/>
114+
<p id="build-your-profile-button-text">
115+
Click on Mars to build your profile!
116+
</p>
117+
</div>
118+
{showProfile && (
119+
<div className="pop-up-profile-section">
120+
<div className="profile-information">
121+
<h2>Welcome to your Mars profile</h2>
122+
<div className="side-by-side-information">
123+
<div className="name-and-age-profile">
124+
<h3>
125+
<strong>Name:</strong> {name}
126+
</h3>
127+
<h3>
128+
<strong>Age on Earth:</strong> {age}
129+
</h3>
130+
<h3>
131+
<strong>Age on Mars:</strong> {marsAge}
132+
</h3>
133+
</div>
134+
<img
135+
id="profile-astronaut-picture"
136+
alt="astronaut"
137+
src="https://static.vecteezy.com/system/resources/previews/010/938/481/original/cute-astronaut-floating-space-cartoon-vector.jpg"
138+
/>
139+
</div>
140+
</div>
141+
142+
<div className="profile-fun-facts">
143+
<p>
144+
Did you know you would weigh 2.5x less on Mars? This is because
145+
the gravity is weaker on Mars than on Earth as it is smaller!
146+
</p>
147+
<p>
148+
On Earth you are <strong>{age} years old </strong>, but on Mars
149+
you would only be <strong>{marsAge} years old.</strong> This is
150+
because 1 year on Mars is roughly twice that on Earth.
151+
</p>
152+
</div>
153+
154+
<div className="profile-rover-photos">
155+
<Slider {...settings}>
156+
{roverPhotoUrls.length === 0 ? (
157+
<p>
158+
Sorry there are no available photos on your birthday, try a
159+
different day.
160+
</p>
161+
) : (
162+
roverPhotoUrls.map((photo: string, index) => (
163+
<img
164+
className="rover-images-from-API"
165+
src={photo}
166+
key={index}
167+
alt="Mars"
168+
/>
169+
))
170+
)}
171+
</Slider>
172+
<p>{message}</p>
173+
</div>
174+
</div>
175+
)}
176+
</div>
177+
);
178+
}

0 commit comments

Comments
 (0)