Mm 104 selection buttons and display image preview

src/App.scss

@@ -51,4 +51,8 @@ a {
   display: flex;
   flex-direction: column;
   height: 100vh;
+}
+.preview-chosen-image {
+  margin: 2vw;
+  width: 300px;
 }

src/Forms/BirthdayForm.tsx

@@ -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;

src/Home/Home.tsx

@@ -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;
@@ -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>

src/images/DisplayPicture.tsx

@@ -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,

src/images/PreviewImage.tsx

@@ -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" />
+        </>
+    )
+
+}

src/utils/fetchData.ts

@@ -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;