it's working!

Week-14-Props_State_Events_and_Lifecycle_Methods/src/App.css

@@ -29,8 +29,24 @@ nav{
 
 .card{
   width: 18rem;
+  height: 45em;
   padding: 2em;
   margin: 2em;
   background-color: #61dbfb;
 }
 
+.hover{
+  margin: 3px;
+  position:absolute;
+  color: #61dbfb;
+  box-sizing: border-box;
+  max-height:200px;
+  left:0%;
+  z-index:999;
+  background:#242443;
+  padding:10px;
+  border:1px solid #4c768d;
+  border-radius: 10px;
+  box-shadow: 0 0 2px 2px #242443;
+}
+

Week-14-Props_State_Events_and_Lifecycle_Methods/src/App.jsx

@@ -1,25 +1,236 @@
-//import { useState } from 'react'
+import { useState } from 'react'
 
 import NavBar from "../src/NavBar"
 import MovieCard from '../src/MovieCard'
-import { movieList } from "./data"
+//import { movieList } from "./data"
+
 
-//console.log(movieList);
 
 function App() {
-  //const [count, setCount] = useState(0)
+
+  //console.log(movieList[2].reviewList);
+
+  // const [count, setCount] = useState(0)
+
+  // console.log(movie.reviewList);
+  const [movieList, setMovielist] = useState([{
+    id: 1,
+    title: 'The Fifth Element',
+    image: '../src/images/FifthElement.jpg',
+    director: 'Luc Besson',
+    writer: 'Luc Besson',
+    starring: 'Bruce Willis, Milla Jovovich, Gary Oldman, Chris Tucker, Ian Holm',
+    synopsis: "In the colorful future, a cab driver unwittingly becomes the central figure in the search for a legendary cosmic weapon to keep Evil and Mr. Zorg at bay.",
+    rating: 'PG-13',
+    reviewList: [
+       {
+          id: 1,
+          author: 'John Doe',
+          stars: 5.0,
+          review: 'Great movie! Amazing action sequences and a compelling story.',
+       },
+       {
+          id: 2,
+          author: 'Jane Smith',
+          stars: 4.0,
+          review: 'Good movie, but could have been better. Some scenes felt unnecessary.',
+       },
+    ],
+ },
+ {
+    id: 2,
+    title: 'The Matrix',
+    image: '../src/images/TheMatrix.jpg',
+    director: 'Lana Wachowski, Lilly Wachowski',
+    writer: 'Lana Wachowski, Lilly Wachowski',
+    starring: 'Keanu Reves, Laurence Fishburn, Carrie-Anne Moss',
+    synopsis: 'When a beautiful stranger leads computer hacker Neo to a forbidding underworld, he discovers the shocking truth--the life he knows is the elaborate deception of an evil cyber-intelligence.',
+    rating: 'R',
+    reviewList: [
+       {
+          id: 1,
+          author: 'Alice Johnson',
+          stars: 5.0,
+          review:
+             "One of the best movies I've ever seen. Mind-bending and thought-provoking.",
+       },
+       {
+          id: 2,
+          author: 'Bob Anderson',
+          stars: 4.0,
+          review: 'A masterpiece of storytelling. The visuals are stunning.',
+       },
+       {
+          id: 3,
+          author: 'Chris Wilson',
+          stars: 4.0,
+          review: "Good movie, but it's a bit confusing at times.",
+       },
+    ],
+ },
+ {
+    id: 3,
+    title: 'Contact',
+    image: '../src/images/Contact.jpg',
+    director: 'Robert Zemeckis',
+    writer: 'James V. Hart, Michael Goldenberg, Carl Sagan',
+    starring: 'Jodie Foster, Matthew McConaughey, Tom Skeritt',
+    synopsis: "Dr. Ellie Arroway, after years of searching, finds conclusive radio proof of extraterrestrial intelligence, sending plans for a mysterious machine.",
+    rating: 'PG',
+    reviewList: [
+       {
+          id: 1,
+          author: 'David Smith',
+          stars: 4.0,
+          review:
+             'A visually stunning and emotionally powerful film. Highly recommend!',
+       },
+       {
+          id: 2,
+          author: 'Emily Davis',
+          stars: 5.0,
+          review: "One of the best sci-fi movies I've ever seen. It's a masterpiece.",
+       },
+       {
+          id: 3,
+          author: 'Michael Johnson',
+          stars: 4.0,
+          review: 'Great movie with exceptional performances and a captivating story.',
+       },
+       {
+          id: 4,
+          author: 'Sarah Thompson',
+          stars: 5.0,
+          review:
+             "Contact takes you on an incredible journey and leaves you thinking about it long after it's over.",
+       },
+    ],
+ },
+ {
+    id: 4,
+    title: 'Jurassic Park',
+    image: '../src/images/JurassicPark.jpg',
+    director: 'Steven Speilberg',
+    writer: 'Michael Chriton, David Koepp',
+    starring: 'Sam Niell, Laura Dern, Jeff Goldblum',
+    synopsis: 'A pragmatic paleontologist touring an almost complete theme park on an island in Central America is tasked with protecting a couple of kids after a power failure causes the park\'s cloned dinosaurs to run loose.',
+    rating: 'PG-13',
+    reviewList: [
+       {
+          id: 1,
+          author: 'John Williams',
+          stars: 5.0,
+          review:
+             "An absolute masterpiece. This movie is years ahead of it's time",
+       },
+       {
+          id: 2,
+          author: 'Rebecca Johnson',
+          stars: 4.0,
+          review:
+             'Awe inspiring with intense action sequences. One of the best movies ever made.',
+       },
+       {
+          id: 3,
+          author: 'James Anderson',
+          stars: 4.0,
+          review:
+             "A thrilling and dark movie with exceptional performances. ",
+       },
+    ],
+ },
+
+ {
+   id: 5,
+   title: 'Independence Day',
+   image: '../src/images/Independence.jpg',
+   director: 'Roland Emmerich',
+   writer: 'Dean Devlin, Roland Emmerich',
+   starring: 'Will Smith. Bill Pullman, Jeff Goldblum',
+   synopsis: "The aliens are coming and their goal is to invade and destroy Earth. Fighting superior technology, mankind's best weapon is the will to survive.",
+   rating: 'PG-13',
+   reviewList: [
+      {
+         id: 1,
+         author: 'John Doe',
+         stars: 4.0,
+         review: 'Great movie! Amazing action sequences and a compelling story.',
+      },
+      {
+         id: 2,
+         author: 'Jane Smith',
+         stars: 3.0,
+         review:
+            'Good movie, but could have been better. Some scenes felt unnecessary.',
+      },
+   ],
+},
+
+{
+   id: 6,
+   title: 'Starship Troopers',
+   image: '../src/images/Troopers.jpg',
+   director: 'Paul Verhoeven',
+   writer: 'Edward Neumeier, Robert A. Heinlein',
+   starring: 'Casper Van Dien, Denise Richards, Dina Meyer, Neil Patrick Harris',
+   synopsis: "Humans in a fascist, militaristic future wage war with giant alien bugs.",
+   rating: 'R',
+   reviewList: [
+      {
+         id: 1,
+         author: 'John Doe',
+         stars: 5.0,
+         review: 'Great movie! Amazing action sequences and a compelling story.',
+      },
+      {
+         id: 2,
+         author: 'Jane Smith',
+         stars: 4.0,
+         review:
+            'Good movie, but could have been better. Some scenes felt unnecessary.',
+      },
+   ],
+},]);
+
+
+  const handlePost = (index, newReview) =>{
+
+
+    movieList[index].reviewList.push(newReview);
+
+    setMovielist((prevArray) => {
+      const newArray = [...prevArray];
+      const objectToUpdate = { ...newArray[index] };
+      const subArrayToUpdate = [...objectToUpdate.reviewList];
+      subArrayToUpdate[(subArrayToUpdate.length + 1)] = { id: (subArrayToUpdate.length + 1), value: newReview };
+      objectToUpdate.subArray = subArrayToUpdate;
+      newArray[index] = objectToUpdate;
+      return newArray;
+    });
+
+
+  }
+
+    //console.log(reviews)
+
 
   return (
     <>
      <NavBar />
      <div className="row">
       {movieList.map((movie, index) => (
         <MovieCard 
-        key={index} 
+        key={index}
+        id={index} 
         title={movie.title} 
         synopsis={movie.synopsis}
         image={movie.image}
         reviews={movie.reviewList}
+        director={movie.director}
+        writer={movie.writer}
+        starring={movie.starring}
+        rating={movie.rating}
+        handlePost={handlePost}
         />
         ))} 
       </div>

Week-14-Props_State_Events_and_Lifecycle_Methods/src/Leave Review.jsx

@@ -0,0 +1,60 @@
+import { useState } from "react"
+import StarRating from "./StarRating";
+
+export default function LeaveReview({ id, handlePost}){
+   //States to pull from form
+  const [userName, setUserName] = useState("");
+  const [review, setReview] = useState("");
+
+  const postReview = (e) => {
+   e.preventDefault();
+   let index = id;
+   let newReview = {
+      author: userName,
+      stars: selectedRatings[0],
+      review: review
+   }
+
+handlePost(index, newReview);
+setUserName("");
+setReview("");
+setSelectedRatings(0);
+
+ };
+
+ const [selectedRatings, setSelectedRatings] = useState([]);
+
+ const handleRatingChange = (rating) => {
+   setSelectedRatings((prevRatings) => [...prevRatings, rating]);
+ };
+  //html form
+   return (
+
+      <>
+
+      <div id="wrapper">
+            <div className="reviewForm">
+                <h5>Feel Free to Leave a Review:</h5>
+            <form onSubmit={postReview}>
+               <label >Your Name:</label><br/>
+               <input type="text"  id="username" 
+               value={userName} className="form-control" placeholder="Please enter your name:"
+               onChange={(e) => setUserName(e.target.value)} />
+               <br/>
+               <label >Please Share Your Thoughts:</label><br/>
+               <input type="text" className="form-control" id="review" 
+               value={review} placeholder="Leave a review here:"
+               onChange={(e) => setReview(e.target.value)} />
+                <br/>
+                <label>How Many Stars Would You Give?</label>
+                <StarRating defaultValue={0} onRatingChange={handleRatingChange}/>
+               <br/>
+               <button id="post" className="btn btn-secondary" type="submit">Post Review</button>
+               <br/>
+            </form>
+            <br/>
+            </div>
+      </div>
+      </>
+   )
+}

Week-14-Props_State_Events_and_Lifecycle_Methods/src/MovieCard.jsx

@@ -1,26 +1,57 @@
 import React, { useState } from 'react';
-//import StarRating from "./StarRating"
+
 import Reviews from "./Reviews"
 
-export default function MovieCard( {title, synopsis, image, reviews} ){
+
+export default function MovieCard( 
+  {title, synopsis, image, reviews, director, writer, starring, handlePost, rating, id} ){
+
+  //console.log(id);
 
   const [show, setShow] = useState(false)
-    //console.log(reviews)
+
+  const [isHovering, setIsHovering] = useState(false);
+
+  const handleMouseOver = () => {
+    setIsHovering(true);
+  };
+
+  const handleMouseOut = () => {
+    setIsHovering(false);
+  };
+
+
     return(
       <>
 
       <div className="col-lg-4">
         <div className="card">
-          <img className="card-img-top" src={image} alt="Card image cap" />
+          <img onMouseOver={handleMouseOver}
+            onMouseOut={handleMouseOut} 
+            className="card-img-top" 
+            src={image} 
+            alt="Movie Poster" />
+
             <div className="card-body">
               <h5 className="card-title">{title}</h5>
-
+              {isHovering && (
+            <div className="hover">
               <p className="card-text">{synopsis}</p>
+
+            </div>
+        )}
+
+              <p className="card-text"><b>Director:</b> {director}</p>
+              <p className="card-text"><b>Writer:</b> {writer}</p>
+              <p className="card-text"><b>Starring:</b> {starring}</p>
+              <p className="card-text"><b>Rated:</b> {rating}</p>
               <div>
-              <button onClick={ () => setShow(true) }>Reviews</button>
+              <button className='btn btn-secondary' onClick={ () => setShow(true) }>Reviews</button>
               <Reviews onClose={ () => setShow(false)} 
               show={show}
-              reviews={reviews}/>
+              reviews={reviews}
+              handlePost={handlePost}
+              id={id}/>
               </div>
             </div>
         </div>