React-react2-week1

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 (
+    <>
+      <h1>Astronomical Picture of the day ...</h1>
+      <img src={pic.url} alt="astronomical Pic" />
+      <h2>{pic.title}</h2>
+      <p>{pic.explanation}</p>
+    </>
+  );
+}

app/Blogs/[slug]/page.js

@@ -0,0 +1,17 @@
+"use client";
+import { usePathname, useSearchParams } from "next/navigation";
+
+export default function BlogPost() {
+  const path = usePathname();
+  const slug = path.split("/")[2];
+
+  const title = slug
+    .replace(/-/g, " ")
+    .replace(/\b\w/g, (c) => c.toUpperCase());
+  return (
+    <div>
+      <h1>{title}</h1>
+      <p>This is the content of the blog post titled "{title}".</p>
+    </div>
+  );
+}

app/Blogs/page.js

@@ -0,0 +1,34 @@
+"use client";
+
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+
+export default function Blog() {
+  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" },
+  ];
+
+  const router = useRouter();
+
+  return (
+    <div>
+      <h1>Blog Posts</h1>
+      <ul>
+        {blogPosts.map((post, index) => (
+          <li
+            key={index}
+            onClick={() => {
+              router.push(`/Blogs/${post.slug}`);
+            }}
+            style={{ cursor: "pointer", color: "blue" }}
+          >
+            {post.title}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

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 <div>Loading...</div>;
+  }
+
+  if (!imageData) {
+    return <div>No image found for this date.</div>;
+  }
+
+  const imageUrl = `https://api.nasa.gov/EPIC/archive/natural/${date.replace(
+    /-/g,
+    "/"
+  )}/png/${imageData.image}.png?api_key=DEMO_KEY`;
+
+  return (
+    <div>
+      <h1>EPIC Image for Date: {date}</h1>
+      <img src={imageUrl} alt="EPIC" width={600} height={600} />
+      <p>
+        <strong>{imageData.caption}</strong>
+      </p>
+    </div>
+  );
+}
+
+{
+  /* <h1>
+          Welcome to Epic ImageList, Please provide date query string:
+          YYYY_MM_DD
+        </h1> */
+}

app/Form/page.js

@@ -0,0 +1,7 @@
+"use client";
+
+import SubmitNote from "./submitNote";
+
+export default function Form() {
+  return <SubmitNote />;
+}

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 (
+    <form onSubmit={handleSubmit}>
+      <h1>Take a Note</h1>
+      <label onClick={clickTitle}>Note Title: </label>
+      <input type="text" name="title" id="title" ref={refs.title} />
+      <br className="formbr" />
+      <label>Note Content: </label>
+      <textarea
+        type="text"
+        name="content"
+        id="content"
+        rows={10}
+        cols={50}
+        ref={refs.content}
+      />
+      <br className="formbr" />
+      <label>Note Author: </label>
+      <input type="text" name="author" id="author" ref={refs.author} />
+      <br className="formbr" />
+      <label htmlFor="date">Note Date: </label>
+      <input type="date" name="date" id="date" ref={refs.date} />
+      <br className="formbr" />
+      <button type="submit">Submit Note</button>
+    </form>
+  );
+}

app/MarsRover/page.js

@@ -0,0 +1,43 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+export default function MarsRover() {
+  const [data, setData] = useState([]);
+
+  useEffect(() => {
+    const fetchingMarsRover = async () => {
+      try {
+        const fetchData = await fetch(
+          "https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/photos?sol=1000&api_key=DEMO_KEY"
+        );
+        const response = await fetchData.json();
+        setData(response.photos);
+      } catch (error) {
+        console.error("Error fetching data:", error);
+      }
+    };
+    fetchingMarsRover();
+  }, []);
+
+  if (data.length === 0) {
+    return <div>Loading ...</div>;
+  }
+
+  return (
+    <>
+      <h1>Mars Rover Pic</h1>
+      {data.map((photo) => (
+        <div key={photo.id}>
+          <p>{photo.camera.full_name}</p>
+          <img
+            src={photo.img_src}
+            alt={photo.camera.full_name}
+            width={300}
+            height={200}
+          />
+        </div>
+      ))}
+    </>
+  );
+}

app/SignUp/page.js

@@ -0,0 +1,153 @@
+"use client";
+import { useRef } from "react";
+import { useState } from "react";
+import { Box, TextField, Button, Typography, Input } from "@mui/material";
+import { Label } from "@mui/icons-material";
+import { useRouter } from "next/navigation";
+
+export default function SignUp() {
+  const router = useRouter();
+
+  const [emailError, setEmailError] = useState(false);
+  const [emailErrorMessage, setEmailErrorMessage] = useState("");
+  const [passwordError, setPasswordError] = useState(false);
+  const [passwordErrorMessage, setPasswordErrorMessage] = useState("");
+  const [firstNameError, setFirstNameError] = useState(false);
+  const [firstNameErrorMessage, setFirstNameErrorMessage] = useState("");
+  const [lastNameError, setLastNameError] = useState(false);
+  const [lastNameErrorMessage, setLastNameErrorMessage] = useState("");
+
+  const firstNameRef = useRef(null);
+  const lastNameRef = useRef(null);
+  const emailRef = useRef(null);
+  const passwordRef = useRef(null);
+
+  const handleKeyDown = (event, nextFieldRef) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      nextFieldRef.current?.focus();
+    }
+  };
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    const isValid = validateInputs();
+    if (isValid) {
+      alert("Your form has been submitted");
+      router.push("/");
+    }
+  };
+
+  const validateInputs = () => {
+    const email = document.getElementById("email");
+    const password = document.getElementById("password");
+    const firstName = document.getElementById("first-name");
+    const lastName = document.getElementById("last-name");
+
+    let isValid = true;
+
+    if (!email.value || !/\S+@\S+\.\S+/.test(email.value)) {
+      setEmailError(true);
+      setEmailErrorMessage("Please enter a valid email address.");
+      isValid = false;
+    } else {
+      setEmailError(false);
+      setEmailErrorMessage("");
+    }
+
+    if (!password.value || password.value.length < 6) {
+      setPasswordError(true);
+      setPasswordErrorMessage("Password must be at least 6 characters long.");
+      isValid = false;
+    } else {
+      setPasswordError(false);
+      setPasswordErrorMessage("");
+    }
+
+    if (!firstName.value || firstName.value.length < 1) {
+      setFirstNameError(true);
+      setFirstNameErrorMessage("Name is required.");
+      isValid = false;
+    } else {
+      setFirstNameError(false);
+      setFirstNameErrorMessage("");
+    }
+
+    if (!lastName.value || lastName.value.length < 1) {
+      setLastNameError(true);
+      setLastNameErrorMessage("Name is required.");
+      isValid = false;
+    } else {
+      setLastNameError(false);
+      setLastNameErrorMessage("");
+    }
+
+    return isValid;
+  };
+
+  return (
+    <Box
+      component="form"
+      onSubmit={handleSubmit}
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        maxWidth: "500px",
+        margin: "0 auto",
+        padding: "2rem",
+        border: "1px solid #ccc",
+        borderRadius: "4px",
+      }}
+    >
+      <Typography variant="h4" gutterBottom>
+        Sign Up
+      </Typography>
+
+      <TextField
+        required
+        id="first-name"
+        label="First-Name"
+        variant="outlined"
+        inputRef={firstNameRef}
+        sx={{ marginBottom: "1rem", width: "100%" }}
+        onKeyDown={(e) => handleKeyDown(e, lastNameRef)}
+      />
+
+      <TextField
+        required
+        id="last-name"
+        label="Last-Name"
+        variant="outlined"
+        inputRef={lastNameRef}
+        sx={{ marginBottom: "1rem", width: "100%" }}
+        onKeyDown={(e) => handleKeyDown(e, emailRef)}
+      />
+
+      <TextField
+        required
+        id="email"
+        label="email"
+        type="email"
+        variant="outlined"
+        inputRef={emailRef}
+        sx={{ marginBottom: "1rem", width: "100%" }}
+        onKeyDown={(e) => handleKeyDown(e, passwordRef)}
+      />
+
+      <TextField
+        required
+        id="password"
+        label="password"
+        variant="outlined"
+        inputRef={passwordRef}
+        sx={{ marginBottom: "1rem", width: "100%" }}
+        onKeyDown={(e) => handleKeyDown(e, firstNameRef)}
+      />
+
+      <Button type="submit" variant="contained" color="primary">
+        Submit
+      </Button>
+    </Box>
+  );
+}

app/about/page.js

@@ -0,0 +1,3 @@
+export default function About() {
+  return <h1>This is about page</h1>;
+}