add createElement

package.json

@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "uuid": "^9.0.1"
   },
   "devDependencies": {
     "@types/react": "^18.2.43",

src/App.jsx

@@ -1,49 +1,45 @@
 import { useState } from "react";
-import "./App.css";
+import styles from "./App.module.css";
 import { Movies } from "./components/Movies";
+import { MovieForm } from "./components/MovieForm";
+
+import { v4 as uuidv4 } from "uuid";
 
 function App() {
   const [movies, setMovies] = useState([
     {
-      id: 1,
+      id: uuidv4(),
       title: "Titanic",
       released: "1997",
       director: "James Cameron",
       favorite: false,
     },
     {
-      id: 2,
+      id: uuidv4(),
       title: "The Naked Gun",
       released: "1988",
       director: "David Zucker",
       favorite: true,
     },
     {
-      id: 3,
-      title: "Das Böse unter der Sonne",
+      id: uuidv4(),
+      title: "Evil under the sun",
       released: "1982",
       director: "Guy Hamilton",
       favorite: true,
     },
 
     {
-      id: 5,
+      id: uuidv4(),
       title: "Sherlock Holmes",
       released: "2009",
       director: "Guy Ritchie",
       favorite: true,
     },
-
-    {
-      id: 6,
-      title: "Barbie",
-      released: "2023",
-      director: "Greta Gerwig",
-      favorite: false,
-    },
   ]);
+  const [isFormOpen, setIsFormOpen] = useState(false);
 
-  function handleFavoriteChange(id, newFavoriteStatus) {
+  function handleToggleFavorite(id, newFavoriteStatus) {
     setMovies(
       movies.map((movie) => {
         if (movie.id === id) {
@@ -57,27 +53,45 @@ function App() {
       })
     );
   }
-
+  // delete
   function handleDeleteMovie(movieTitle) {
     setMovies(
       movies.filter((movie) => {
         return movie.title !== movieTitle;
       })
     );
   }
+  // create
+  function handleMovie(newMovie) {
+    setMovies([
+      { ...newMovie, id: uuidv4(), isFavorite: false },
+      ...movies,
+    ]);
+    setIsFormOpen(false);
+  }
 
   return (
     <>
       <header>
         <h1>Movies List</h1>
       </header>
+      <div className={styles["header-box"]}>
+        <button
+          onClick={() => {
+            setIsFormOpen((prevIsFormOpen) => !prevIsFormOpen);
+          }}
+        >
+          {isFormOpen ? "Cancel" : "Add Movie"}
+        </button>
+      </div>
+      {isFormOpen ? <MovieForm onAddMovie={handleMovie} /> : <></>}
       <main>
         {movies.map((movie) => {
           return (
             <Movies
               key={movie.id}
-              onFavoriteChange={(newFavoriteStatus) => {
-                handleFavoriteChange(movie.id, newFavoriteStatus);
+              onToggleFavorite={(newFavoriteStatus) => {
+                handleToggleFavorite(movie.id, newFavoriteStatus);
               }}
               onMovieDelete={(movieTitle) => {
                 handleDeleteMovie(movieTitle);
@@ -90,6 +104,7 @@ function App() {
           );
         })}
       </main>
+      {/* <p>{JSON.stringify(movies)}</p> */}
     </>
   );
 }

src/App.module.css

@@ -0,0 +1,18 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.header-box {
+  display: flex;
+
+  gap: 15px;
+  margin: 0vh auto 0;
+  transform: translateY(-0%);
+  padding: 20px;
+}
+.header-box button {
+  padding: 30px;
+}

src/components/MovieForm.jsx

@@ -0,0 +1,68 @@
+import { useState } from "react";
+import styles from "./MovieForm.module.css";
+
+export function MovieForm({ onAddMovie }) {
+  const [title, setTitle] = useState("");
+  const [director, setDirector] = useState("");
+  const [released, setReleased] = useState("");
+
+  return (
+    <>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          console.log("title:", title);
+          console.log("director:", director);
+          console.log("released:", released);
+          onAddMovie({
+            title,
+            director,
+            released,
+          });
+        }}
+        className={styles.form}
+      >
+        <div className={styles["input-group"]}>
+          <label htmlFor="title">Title</label>
+          <input
+            value={title}
+            onChange={(event) => {
+              setTitle(event.target.value);
+            }}
+            type="text"
+            name="title"
+            id="title"
+          />
+          {/* <p>{title}</p> */}
+        </div>
+        <div className={styles["input-group"]}>
+          <label htmlFor="director">Director</label>
+          <input
+            value={director}
+            onChange={(event) => {
+              setDirector(event.target.value);
+            }}
+            type="text"
+            name="director"
+            id="director"
+          />
+          {/* <p>{director}</p> */}
+        </div>
+        <div className={styles["input-group"]}>
+          <label htmlFor="released">Relaesed</label>
+          <input
+            value={released}
+            onChange={(event) => {
+              setReleased(event.target.value);
+            }}
+            type="text"
+            name="released"
+            id="released"
+          />
+          {/* <p>{released}</p> */}
+        </div>
+        <button type="submit">Submit</button>
+      </form>
+    </>
+  );
+}

src/components/MovieForm.module.css

@@ -0,0 +1,25 @@
+.form {
+  position: relative;
+  display: flex;
+
+  gap: 15px;
+  margin: 0vh auto 0;
+  transform: translateY(-0%);
+  padding: 20px;
+  /* border: 1px solid red; */
+}
+
+.form .input-group {
+  display: flex;
+  flex-direction: column;
+  /* border: 1px solid red; */
+  padding: 0;
+}
+
+.form .input-group input {
+  padding: 10px;
+}
+
+.form button {
+  margin-top: 20px;
+}

src/components/Movies.jsx

@@ -4,11 +4,11 @@ export function Movies({
   released,
   director,
   favorite,
-  onFavoriteChange,
+  onToggleFavorite,
   onMovieDelete,
 }) {
   function handleFavorite() {
-    onFavoriteChange(favorite ? false : true);
+    onToggleFavorite(favorite ? false : true);
   }
   function handleDeleteMovie() {
     onMovieDelete(title);

src/index.css

@@ -39,7 +39,7 @@ body {
 
 header {
   display: flex;
-  margin: 20vh auto 0;
+  margin: 10vh auto 0;
   transform: translateY(-20%);
   padding: 20px;
 }