Skip to content

Commit

Permalink
Merge pull request #25 from techswitch-learners/mm-104-selection-butt…
Browse files Browse the repository at this point in the history
…ons--and-display-image-preview

Mm 104 selection buttons  and display image preview
  • Loading branch information
dorothyynwong authored Aug 2, 2024
2 parents 547e64f + 093c386 commit da362e2
Show file tree
Hide file tree
Showing 6 changed files with 103 additions and 3 deletions.
4 changes: 4 additions & 0 deletions src/App.scss
Original file line number Diff line number Diff line change
Expand Up @@ -51,4 +51,8 @@ a {
display: flex;
flex-direction: column;
height: 100vh;
}
.preview-chosen-image {
margin: 2vw;
width: 300px;
}
29 changes: 29 additions & 0 deletions src/Forms/BirthdayForm.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import React, { useState } from 'react';

function BirthdayForm() {
const [birthday, setBirthday] = useState('');

const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
getBirthday(birthday);
};

const getBirthday = (date: string) => {
console.log("Birthday:", date);
};

return (
<form onSubmit={handleSubmit}>
<label>Birthday</label>
<input
type="date"
id="birthday"
value={birthday}
onChange={(e) => setBirthday(e.target.value)}
/>
<button type="submit">Submit</button>
</form>
);
}

export default BirthdayForm;
2 changes: 2 additions & 0 deletions src/Home/Home.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import DisplayBackgroundImage from '../images/DisplayBackgroundImage';
import './Home.scss'
import { PreviewImage } from "../images/PreviewImage";

interface HomeProps{
username:string;
Expand Down Expand Up @@ -39,6 +40,7 @@ function Home(props:HomeProps) {
<button type="submit">Submit</button>
{submitStatus ? <p>Welcome {props.username}!</p> : null}
</form>
<PreviewImage/>
<button className="startQuizButton" onClick={routeChange}>
Start quiz
</button>
Expand Down
2 changes: 1 addition & 1 deletion src/images/DisplayPicture.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { useState, useEffect } from 'react';
import { fetchAPI } from '../utils/fetchData';

interface PictureOfDay {
export interface PictureOfDay {
date: string,
explanation: string,
hdurl: string,
Expand Down
67 changes: 67 additions & 0 deletions src/images/PreviewImage.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
import { useState } from "react";
import { PictureOfDay } from "./DisplayPicture";
import { fetchAPI, fetchRandomAPI } from "../utils/fetchData";

export function PreviewImage() {

const [myPreviewImage, setMyPreviewImage] = useState<PictureOfDay | null>(null);
const [birthday, setBirthday] = useState('');

const handleRandomButtonClick = async () => {
try {
const randomPicture = await fetchRandomAPI("https://api.nasa.gov/planetary/apod?api_key=");
setMyPreviewImage(randomPicture[0]);
console.log(myPreviewImage);

}
catch (error) {
console.error("Error fetching today's image:", error);
}
}

const handleTodayButtonClick = async () => {
try {
const todaysPicture = await fetchAPI("https://api.nasa.gov/planetary/apod?api_key=");
setMyPreviewImage(todaysPicture);
}
catch (error) {
console.error("Error fetching today's image:", error);
}
}

const handleBirthdayFormSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
try {
const userBirthdayImage = await fetchAPI("https://api.nasa.gov/planetary/apod?api_key=", birthday);
setMyPreviewImage(userBirthdayImage);
} catch (error) {
console.error("Error fetching today's image:", error);
}
}

return (
<>
<h4>CHOOSE THE IMAGE YOU WANT TO DISPLAY:</h4>
<button type="button"
id="todays-date-button"
onClick={handleTodayButtonClick}>Today</button>

<button type="button"
id="random-button"
onClick={handleRandomButtonClick}>Random</button>

<form onSubmit={handleBirthdayFormSubmit}>
<label>Birthday</label>
<input
type="date"
id="birthday"
value={birthday}
onChange={(e) => setBirthday(e.target.value)}
/>
<button type="submit">Submit</button>
</form>
<img src={myPreviewImage?.url} alt={myPreviewImage?.explanation} className="preview-chosen-image" />
</>
)

}
2 changes: 0 additions & 2 deletions src/utils/fetchData.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,7 @@ export async function fetchAPI(apiUrl: string, date = todaysDate) {
if (!response.ok) {
throw new Error('Network response was not ok');
}

const pictureData = await response.json();
console.log(pictureData);
return pictureData;
} catch (err) {
throw err;
Expand Down

0 comments on commit da362e2

Please sign in to comment.