diff --git a/app/AstronomicPic/page.jsx b/app/AstronomicPic/page.jsx new file mode 100644 index 0000000..99199c7 --- /dev/null +++ b/app/AstronomicPic/page.jsx @@ -0,0 +1,15 @@ +export default async function AstronomicPic() { + const data = await fetch( + "https://api.nasa.gov/planetary/apod?api_key=OlzCH4LIbWzf0IXVVqiLUqi51gsGHd0scdwfKhS3" + ); + const pic = await data.json(); + + return ( + <> +

Astronomical Picture of the day ...

+ astronomical Pic +

{pic.title}

+

{pic.explanation}

+ + ); +} diff --git a/app/Blogs/[slug]/page.js b/app/Blogs/[slug]/page.js new file mode 100644 index 0000000..d907aa8 --- /dev/null +++ b/app/Blogs/[slug]/page.js @@ -0,0 +1,13 @@ +export default function BlogPost({ params }) { + const slug = params.slug; + + const title = slug + .replace(/-/g, " ") + .replace(/\b\w/g, (c) => c.toUpperCase()); + return ( +
+

{title}

+

This is the content of the blog post titled "{title}".

+
+ ); +} diff --git a/app/Blogs/page.js b/app/Blogs/page.js new file mode 100644 index 0000000..aae5686 --- /dev/null +++ b/app/Blogs/page.js @@ -0,0 +1,32 @@ +"use client"; + +import { useRouter } from "next/navigation"; + +const blogPosts = [ + { title: "My First Post", slug: "my-first-post" }, + { title: "Learning React", slug: "learning-react" }, + { title: "Confusing React", slug: "confusing-react" }, + { title: "My Last Post", slug: "my-last-post" }, +]; +export default function Blog() { + const router = useRouter(); + + return ( +
+

Blog Posts

+ +
+ ); +} diff --git a/app/EpicImage/page.js b/app/EpicImage/page.js new file mode 100644 index 0000000..6efc7a3 --- /dev/null +++ b/app/EpicImage/page.js @@ -0,0 +1,68 @@ +"use client"; + +import { useState, useEffect } from "react"; +import { useSearchParams } from "next/navigation"; + +export default function NASAEpicImage() { + const searchParam = useSearchParams(); + + const date = searchParam.get("date"); + + const [imageData, setImageData] = useState(null); + const [loading, setLoading] = useState(true); + + useEffect(() => { + if (date) { + const fetchData = async () => { + try { + const response = await fetch( + `https://api.nasa.gov/EPIC/api/natural/date/${date}?api_key=DEMO_KEY` + ); + if (!response.ok) { + throw new Error("Network response was not ok"); + } + const data = await response.json(); + setImageData(data[0]); + } catch (error) { + console.error("Error fetching EPIC image:", error); + } finally { + setLoading(false); + } + }; + + fetchData(); + } else { + setLoading(false); + } + }, []); + + if (loading) { + return
Loading...
; + } + + if (!imageData) { + return
No image found for this date.
; + } + + const imageUrl = `https://api.nasa.gov/EPIC/archive/natural/${date.replaceAll( + /-/g, + "/" + )}/png/${imageData.image}.png?api_key=DEMO_KEY`; + + return ( +
+

EPIC Image for Date: {date}

+ EPIC +

+ {imageData.caption} +

+
+ ); +} + +{ + /*

+ Welcome to Epic ImageList, Please provide date query string: + YYYY_MM_DD +

*/ +} diff --git a/app/Form/page.js b/app/Form/page.js new file mode 100644 index 0000000..05b542f --- /dev/null +++ b/app/Form/page.js @@ -0,0 +1,7 @@ +"use client"; + +import SubmitNote from "./submitNote"; + +export default function Form() { + return ; +} diff --git a/app/Form/submitNote.js b/app/Form/submitNote.js new file mode 100644 index 0000000..4556af9 --- /dev/null +++ b/app/Form/submitNote.js @@ -0,0 +1,50 @@ +"use client"; + +import { useRef } from "react"; + +export default function SubmitNote() { + const refs = { + title: useRef(null), + content: useRef(null), + author: useRef(null), + date: useRef(null), + }; + + const clickTitle = () => refs.title.current.focus(); + + const handleSubmit = (e) => { + e.preventDefault(); + const formData = {}; + + for (let key in refs) { + formData[key] = refs[key].current.value; + } + console.log(formData); + }; + + return ( +
+

Take a Note

+ + +
+ +