Movie App

App.css

@import url("https://fonts.googleapis.com/css?family=Roboto+Slab:100,300,400,700");
@import url("https://fonts.googleapis.com/css?family=Raleway:300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i");

* {
  margin: 0;
  border: 0;
  box-sizing: border-box;
}

:root {
  --font-roboto: "Roboto Slab", serif;
  --font-raleway: "Raleway", sans-serif;
}

body {
  font-family: var(--font-roboto);
  background-color: #212426;
}

.app {
  padding: 4rem;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

h1 {
  font-size: 3rem;
  letter-spacing: 0.9px;
  background: linear-gradient(
    90deg,
    rgba(249, 211, 180, 1) 0%,
    rgba(249, 211, 180, 0) 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  width: fit-content;
}

.search {
  width: 71%;
  margin: 4rem 0 2rem;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 1.5rem 1.75rem;
  border-radius: 3rem;
  background: #1f2123;
  -webkit-box-shadow: 5px 5px 7px #1c1d1f, -5px -5px 7px #222527;
  box-shadow: 5px 5px 7px #1c1d1f, -5px -5px 7px #222527;
}

.search input {
  flex: 1;
  border: none;
  font-size: 1.5rem;
  font-family: var(--font-raleway);
  font-weight: 500;
  padding-right: 1rem;

  outline: none;
  color: #a1a1a1;
  background: #1f2123;
}

.search img {
  width: 35px;
  height: 35px;
  cursor: pointer;
}

/* .search button {
  padding: 20px 40px;
  border-radius: 0.5rem;
  margin-left: 15px;
  color: #a1a1a1;
  font-family: var(--font-raleway);
  font-weight: 900;
  letter-spacing: 0.75px;
  font-size: 1.25rem;
  cursor: pointer;

  background: #1f2123;
  -webkit-box-shadow: 5px 5px 7px #1c1d1f, -5px -5px 7px #222527;
  box-shadow: 5px 5px 7px #1c1d1f, -5px -5px 7px #222527;
} */

.empty {
  width: 100%;
  margin-top: 3rem;

  display: flex;
  justify-content: center;
  align-items: center;
}

.empty h2 {
  font-size: 1.25rem;
  color: #f9d3b4;
  font-family: var(--font-raleway);
}

.container {
  width: 100%;
  margin-top: 3rem;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.movie {
  width: 310px;
  height: 460px;
  margin: 1.5rem;

  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: none;

  transition: all 0.4s cubic-bezier(0.175, 0.885, 0, 1);
  box-shadow: 0px 13px 10px -7px rgba(0, 0, 0, 0.1);
}

.movie div:nth-of-type(1) {
  position: absolute;
  padding: 16px;
  width: 100%;
  opacity: 0;
  top: 0;
  color: #f9d3b4;
}

.movie:hover {
  box-shadow: 0px 30px 18px -8px rgba(0, 0, 0, 0.1);
  transform: scale(1.05, 1.05);
}

.movie div:nth-of-type(2) {
  width: 100%;
  height: 100%;
}

.movie div:nth-of-type(2) img {
  height: 100%;
  width: 100%;
}

.movie div:nth-of-type(3) {
  z-index: 2;
  background-color: #343739;
  padding: 16px 24px 24px 24px;

  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
}

.movie div:nth-of-type(3) span {
  font-family: "Raleway", sans-serif;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 2px;
  font-weight: 500;
  color: #f0f0f0;
}

.movie div:nth-of-type(3) h3 {
  margin-top: 5px;
  font-family: "Roboto Slab", serif;
  color: #f9d3b4;
}

.movie:hover div:nth-of-type(2) {
  height: 100%;
  opacity: 0.3;
}

.movie:hover div:nth-of-type(3) {
  background-color: transparent;
}

.movie:hover div:nth-of-type(1) {
  opacity: 1;
}

@media screen and (max-width: 600px) {
  .app {
    padding: 4rem 2rem;
  }

  .search {
    padding: 1rem 1.75rem;
    width: 100%;
  }

  .search input {
    font-size: 1rem;
  }

  .search img {
    width: 20px;
    height: 20px;
  }
}

@media screen and (max-width: 400px) {
  .app {
    padding: 4rem 1rem;
  }

  h1 {
    font-size: 2rem;
  }

  .container {
    margin-top: 2rem;
  }

  .movie {
    width: "100%";
    margin: 1rem;
  }
}

App.js

import React, { useState, useEffect } from "react";

import MovieCard from "./MovieCard";
import SearchIcon from "./search.svg";
import "./App.css";

const API_URL = "http://www.omdbapi.com?apikey=b6003d8a";

const App = () => {
  const [searchTerm, setSearchTerm] = useState("");
  const [movies, setMovies] = useState([]);

  useEffect(() => {
    searchMovies("Batman");
  }, []);

  const searchMovies = async (title) => {
    const response = await fetch(`${API_URL}&s=${title}`);
    const data = await response.json();

    setMovies(data.Search);
  };

  return (
    <div className="app">
      <h1>MovieLand</h1>

      <div className="search">
        <input
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
          placeholder="Search for movies"
        />
        <img
          src={SearchIcon}
          alt="search"
          onClick={() => searchMovies(searchTerm)}
        />
      </div>

      {movies?.length > 0 ? (
        <div className="container">
          {movies.map((movie) => (
            <MovieCard movie={movie} />
          ))}
        </div>
      ) : (
        <div className="empty">
          <h2>No movies found</h2>
        </div>
      )}
    </div>
  );
};

export default App;

MovieCard.jsx

import React from 'react';

const MovieCard = ({ movie: { imdbID, Year, Poster, Title, Type } }) => {
  return (
    <div className="movie" key={imdbID}>
      <div>
        <p>{Year}</p>
      </div>

      <div>
        <img src={Poster !== "N/A" ? Poster : "https://via.placeholder.com/400"} alt={Title} />
      </div>

      <div>
        <span>{Type}</span>
        <h3>{Title}</h3>
      </div>
    </div>
  );
}

export default MovieCard;

search.svg

If you know how to write it, create new app and start code yourself. without looking at the source code, It might take some hours, but you will be resolve it. I'm sure, because I know that feeling.

I have learned how to code it, I will focus on it some time later on in the year, for now, im busy building a ecommerce website. Anyway did you get the solution?

…

On Mon, 03 Jun 2024, 10:12 AM Qasem Nik ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ If you know how to write it, create new app and start code yourself. without looking at the source code, It might take some hours, but you will be resolve it. I'm sure, because I know that feeling. — Reply to this email directly, view it on GitHub <https://gist.github.com/adrianhajdin/997a8cdf94234e889fa47be89a4759f1#gistcomment-5076796> or unsubscribe <https://github.com/notifications/unsubscribe-auth/BGWETCSOOYSA22DH456PRHTZFQQN5BFKMF2HI4TJMJ2XIZLTSKBKK5TBNR2WLJDUOJ2WLJDOMFWWLO3UNBZGKYLEL5YGC4TUNFRWS4DBNZ2F6YLDORUXM2LUPGBKK5TBNR2WLJDHNFZXJJDOMFWWLK3UNBZGKYLEL52HS4DFVRZXKYTKMVRXIX3UPFYGLK2HNFZXIQ3PNVWWK3TUUZ2G64DJMNZZDAVEOR4XAZNEM5UXG5FFOZQWY5LFVEYTCNJQGI2TCNZRU52HE2LHM5SXFJTDOJSWC5DF> . You are receiving this email because you commented on the thread. Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub> .

I've been trying to figure this out, everything was going good until I started adding the MovieCard. Now it seems like nothing is working. I'm not getting any errors on VSC, just when I try to open to open the website to preview. After failing i've tried to just copy the code and its still not working. Back and front from here to chatgpt and its still not working, this is the error im getting:

ERROR
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of App.
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of App.
at createFiberFromTypeAndProps (http://localhost:3000/static/js/bundle.js:30445:21)
at createFiberFromElement (http://localhost:3000/static/js/bundle.js:30466:19)
at updateElement (http://localhost:3000/static/js/bundle.js:17494:23)
at updateSlot (http://localhost:3000/static/js/bundle.js:17587:26)
at reconcileChildrenArray (http://localhost:3000/static/js/bundle.js:17733:26)
at reconcileChildFibers (http://localhost:3000/static/js/bundle.js:18120:20)
at reconcileChildren (http://localhost:3000/static/js/bundle.js:22547:32)
at updateHostComponent (http://localhost:3000/static/js/bundle.js:23191:7)
at beginWork (http://localhost:3000/static/js/bundle.js:24643:18)
at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:9601:18)

I'm just really lost and don't understand anything.

the search icon code

the search icon code

Create a file name "search.svg" and copy ,paste the code above

Module not found means file doesn't exist. Ensure the file name should be correct and in should be in folder. I think you'll try it and past your code to gpt and ask him. Make sure you'll resolve your error but don't give up.

…

On Mon, 12 Aug 2024, 11:10 am Oji-kun, ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ Anyone knows how to fix this? I'm a complete beginne. ERROR in ./src/App.js 7:0-37 Module not found: Error: Can't resolve '.search.svg' in 'C:\Users\Prince\Desktop\my_first_react_app\src' webpack compiled with 1 error and 1 warning — Reply to this email directly, view it on GitHub <https://gist.github.com/adrianhajdin/997a8cdf94234e889fa47be89a4759f1#gistcomment-5151291> or unsubscribe <https://github.com/notifications/unsubscribe-auth/BE2YAQYQIMVDPSLBGB4FU2LZRBGTVBFKMF2HI4TJMJ2XIZLTSKBKK5TBNR2WLJDUOJ2WLJDOMFWWLO3UNBZGKYLEL5YGC4TUNFRWS4DBNZ2F6YLDORUXM2LUPGBKK5TBNR2WLJDHNFZXJJDOMFWWLK3UNBZGKYLEL52HS4DFVRZXKYTKMVRXIX3UPFYGLK2HNFZXIQ3PNVWWK3TUUZ2G64DJMNZZDAVEOR4XAZNEM5UXG5FFOZQWY5LFVEYTCNJQGI2TCNZRU52HE2LHM5SXFJTDOJSWC5DF> . You are receiving this email because you commented on the thread. Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub> .

Why it is movies?.length . why not movies.length?

If you use movies.length? it might give you an error I guess. While chaining you are supposed to write it like: 'object?.property'.

CSS is not Working as display in the Video

yes i also hadd that problem

import React from "react";
import ReactDOM from "react-dom/client";

import App from "./App";
import "./index.css";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
// <React.StrictMode>

// </React.StrictMode>
);

For the Newer version of React, you need to use the Strict Mode. But with the strict Mode, Console.log will give to the same values

import React from "react"; import ReactDOM from "react-dom/client";

import App from "./App"; import "./index.css";

const root = ReactDOM.createRoot(document.getElementById("root")); root.render( // <React.StrictMode> // </React.StrictMode> );

For the Newer version of React, you need to use the Strict Mode. But with the strict Mode, Console.log will give to the same values

import React from "react";
import ReactDOM from "react-dom/client";

import App from "./App";
import "./index.css";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
// <React.StrictMode>

// </React.StrictMode>
);

For the Newer version of React, you need to use the Strict Mode. But with the strict Mode, Console.log will give to the same values

true

i faced the same problem : "API not working"

solution: Verify Your Email ( ...by the received link)

Thanks

…

On Wed, Nov 6, 2024, 11:24 AM B.K Jeeban ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ i faced the same problem : "API not working" solution: Verify Your Email ( ...by the received link) — Reply to this email directly, view it on GitHub <https://gist.github.com/adrianhajdin/997a8cdf94234e889fa47be89a4759f1#gistcomment-5268876> or unsubscribe <https://github.com/notifications/unsubscribe-auth/BJMT3EQMOA5HM3HFCOA5O6DZ7HU6XBFKMF2HI4TJMJ2XIZLTSKBKK5TBNR2WLJDUOJ2WLJDOMFWWLO3UNBZGKYLEL5YGC4TUNFRWS4DBNZ2F6YLDORUXM2LUPGBKK5TBNR2WLJDHNFZXJJDOMFWWLK3UNBZGKYLEL52HS4DFVRZXKYTKMVRXIX3UPFYGLK2HNFZXIQ3PNVWWK3TUUZ2G64DJMNZZDAVEOR4XAZNEM5UXG5FFOZQWY5LFVEYTCNJQGI2TCNZRU52HE2LHM5SXFJTDOJSWC5DF> . You are receiving this email because you are subscribed to this thread. Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub> .