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

search.svg not showing

whats wrong???

I tried it too not working

but what I did was to copy and paste the search.svg code directly, beneath the input field code and it worked

Thanks @hedward

nothing is displaying I don't know what problem is but I follow step by step

SAME :/

thanks for the code, i also failed to get the array for my own, but when i copied and pasted your code, it worked well. however still i cannot navigate to specific movies. but thank you for sharing knowledge

svg is not showing, any help?

SVG Not showing fix

If you are really having trouble with svg not showing and are struggling with the solutions listed, this is a fix for you:

First - delete line 4 from 'App.js':

import SearchIcon from "./search.svg";

Second - change App.js lines 34-38 code from:

    <img
      src={SearchIcon}
      alt="search"
      onClick={() => searchMovies(searchTerm)}
    />

to:

    <img src="https://raw.githubusercontent.com/gist/adrianhajdin/997a8cdf94234e889fa47be89a4759f1/raw/f13e5a9a0d1e299696aa4a0fe3a0026fa2a387f7/search.svg"
      alt="search"
      onClick={() => searchMovies(searchTerm)}
    />

How to display more than 10 movies

`

thanks for the code, i also failed to get the array for my own, but when i copied and pasted your code, it worked well. however still i cannot navigate to specific movies. but thank you for sharing knowledge

Try to recheck your synatx maybe you must use the backtick character () instead of single quotes in the line below: const response = await fetch(${API_URL}&s=${title}`);

I didn't get the search icon but I got an umbrella icon to show so I used it:

I didn't get the search icon but I got an umbrella icon to show so I used it:

Try to use this instead of the search icon.svg
"
<img src="https://raw.githubusercontent.com/gist/adrianhajdin/997a8cdf94234e889fa47be89a4759f1/raw/f13e5a9a0d1e299696aa4a0fe3a0026fa2a387f7/search.svg"
alt="search"
onClick={() => searchMovies(searchTerm)}
/> in app.js

I didn't get the search icon but I got an umbrella icon to show so I used it:

Try to use this instead of the search icon.svg " <img src="https://raw.githubusercontent.com/gist/adrianhajdin/997a8cdf94234e889fa47be89a4759f1/raw/f13e5a9a0d1e299696aa4a0fe3a0026fa2a387f7/search.svg" alt="search" onClick={() => searchMovies(searchTerm)} /> in app.js

SVG Not showing fix
If you are really having trouble with svg not showing and are struggling with the solutions listed, this is a fix for you:

First - delete line 4 from 'App.js':
import SearchIcon from "./search.svg";

Second - change App.js lines 34-38 code from:
<img
src={SearchIcon}
alt="search"
onClick={() => searchMovies(searchTerm)}
/>
to:

<img src="https://raw.githubusercontent.com/gist/adrianhajdin/997a8cdf94234e889fa47be89a4759f1/raw/f13e5a9a0d1e299696aa4a0fe3a0026fa2a387f7/search.svg"
  alt="search"
  onClick={() => searchMovies(searchTerm)}
/>

The CSS styling is not the same as the one in the video

bro mine also do you know how to fixed it please help

Can anyone tell the reason of API is not working in the console why????
Problems: Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot printWarning @ react-dom.development.js:79 localhost/:1
Problem: Uncaught (in promise) TypeError: Failed to fetch at searchMovies (App.js:11:1) at App.js:18:1 at commitHookEffectListMount (react-dom.development.js:23139:1) at commitPassiveMountOnFiber (react-dom.development.js:24918:1) at commitPassiveMountEffects_complete (react-dom.development.js:24881:1)
Code : const searchMovies = async (title) => { const response = await fetch(${API_URL}&s=${title}); const data = await response.json();

    console.log(data.Search);
}

useEffect(() => {
    searchMovies('Spiderman');
}, []);

Can anyone tell the reason of API is not working in the console why????
Problems: Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot printWarning @ react-dom.development.js:79 localhost/:1
Problem: Uncaught (in promise) TypeError: Failed to fetch at searchMovies (App.js:11:1) at App.js:18:1 at commitHookEffectListMount (react-dom.development.js:23139:1) at commitPassiveMountOnFiber (react-dom.development.js:24918:1) at commitPassiveMountEffects_complete (react-dom.development.js:24881:1)
Code : const searchMovies = async (title) => { const response = await fetch(${API_URL}&s=${title}); const data = await response.json();

    console.log(data.Search);
}

useEffect(() => {
    searchMovies('Spiderman');
}, []);

I meet the same problem and don't know how to solve it.

here's how I solved it:

// React 17
// import React from "react";
// import ReactDOM from "react-dom";
// import App from "./App";

// ReactDOM.render(, document.getElementById("root"));

// React 18:
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")).render();

So basically it updates from React 17 to 18 and uses the new API. I just kept the old one there commented out for reference.

Basically there's just those two lines that changes:

import ReactDOM from "react-dom/client";
ReactDOM.createRoot(document.getElementById("root")).render(<App />);

Not sure what you mean, can you clarify?I am gonna tinker some with it now, so can look into this as well. You want to list ALL movies on page load?On 2 Feb 2024, at 06:45, Hner123 ***@***.***> wrote:Re: ***@***.*** commented on this gist.How to fetch all movies when the page first loads? Please helpsearch should be empty?—Reply to this email directly, view it on GitHub or unsubscribe.You are receiving this email because you commented on the thread.Triage notifications on the go with GitHub Mobile for iOS or Android.                                                           

Hi folks,

For those who are struggling to get the code for 'search.svg,' simply click the "Display the source blob" button shown below.

I didn't get the search icon but I got an umbrella icon to show so I used it:

Try to use this instead of the search icon.svg " <img src="https://raw.githubusercontent.com/gist/adrianhajdin/997a8cdf94234e889fa47be89a4759f1/raw/f13e5a9a0d1e299696aa4a0fe3a0026fa2a387f7/search.svg" alt="search" onClick={() => searchMovies(searchTerm)} /> in app.js

SVG Not showing fix
If you are really having trouble with svg not showing and are struggling with the solutions listed, this is a fix for you:

First - delete line 4 from 'App.js':
import SearchIcon from "./search.svg";

Second - change App.js lines 34-38 code from:
<img
src={SearchIcon}
alt="search"
onClick={() => searchMovies(searchTerm)}
/>
to:

<img src="https://raw.githubusercontent.com/gist/adrianhajdin/997a8cdf94234e889fa47be89a4759f1/raw/f13e5a9a0d1e299696aa4a0fe3a0026fa2a387f7/search.svg"
alt="search"
onClick={() => searchMovies(searchTerm)}
/>

The CSS styling is not the same as the one in the video

bro mine also do you know how to fixed it please help

He might not have shown that part of the video where he renames some classes. But if you review his code given here, it works perfectly fine as shown in the video.
Make sure you're using classes correctly. Try to match with his source code given here.
If you can't debug, let me know which specific part is off for styling?

if anyone struggle with search.svg code not showing click this: <>

It might be quotation issue, don't write
<img src="{SearchIcon}" alt="search" />
instead remove double quotes from src="" and it shoult be like this
<img src={SearchIcon} alt="search" />

Can anyone tell the reason of API is not working in the console why????
Problems: Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot printWarning @ react-dom.development.js:79 localhost/:1
Problem: Uncaught (in promise) TypeError: Failed to fetch at searchMovies (App.js:11:1) at App.js:18:1 at commitHookEffectListMount (react-dom.development.js:23139:1) at commitPassiveMountOnFiber (react-dom.development.js:24918:1) at commitPassiveMountEffects_complete (react-dom.development.js:24881:1)
Code : const searchMovies = async (title) => { const response = await fetch(${API_URL}&s=${title}); const data = await response.json();

    console.log(data.Search);
}

useEffect(() => {
    searchMovies('Spiderman');
}, []);

Can anyone tell the reason of API is not working in the console why????
Problems: Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot printWarning @ react-dom.development.js:79 localhost/:1
Problem: Uncaught (in promise) TypeError: Failed to fetch at searchMovies (App.js:11:1) at App.js:18:1 at commitHookEffectListMount (react-dom.development.js:23139:1) at commitPassiveMountOnFiber (react-dom.development.js:24918:1) at commitPassiveMountEffects_complete (react-dom.development.js:24881:1)
Code : const searchMovies = async (title) => { const response = await fetch(${API_URL}&s=${title}); const data = await response.json();

    console.log(data.Search);
}

useEffect(() => {
    searchMovies('Spiderman');
}, []);

I meet the same problem and don't know how to solve it.

here's how I solved it:

// React 17 // import React from "react"; // import ReactDOM from "react-dom"; // import App from "./App";

// ReactDOM.render(, document.getElementById("root"));

// React 18: import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App";

ReactDOM.createRoot(document.getElementById("root")).render();

So basically it updates from React 17 to 18 and uses the new API. I just kept the old one there commented out for reference.

Basically there's just those two lines that changes:

import ReactDOM from "react-dom/client";
ReactDOM.createRoot(document.getElementById("root")).render(<App />);

this solution fixed the react 18 error but still I can not console log the data from API

Check react 18 or 17. The path or version check it. because if you're written react 17 in react 18 version thus api is not working

…

On Sat, 2 Mar 2024, 5:21 pm Hamid Reza Edalat Nejad, < ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ Can anyone tell the reason of API is not working in the console why???? Problems: Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot printWarning @ react-dom.development.js:79 localhost/:1 Problem: Uncaught (in promise) TypeError: Failed to fetch at searchMovies (App.js:11:1) at App.js:18:1 at commitHookEffectListMount (react-dom.development.js:23139:1) at commitPassiveMountOnFiber (react-dom.development.js:24918:1) at commitPassiveMountEffects_complete (react-dom.development.js:24881:1) Code : const searchMovies = async (title) => { const response = await fetch(${API_URL}&s=${title}); const data = await response.json(); console.log(data.Search); } useEffect(() => { searchMovies('Spiderman'); }, []); Can anyone tell the reason of API is not working in the console why???? Problems: Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot printWarning @ react-dom.development.js:79 localhost/:1 Problem: Uncaught (in promise) TypeError: Failed to fetch at searchMovies (App.js:11:1) at App.js:18:1 at commitHookEffectListMount (react-dom.development.js:23139:1) at commitPassiveMountOnFiber (react-dom.development.js:24918:1) at commitPassiveMountEffects_complete (react-dom.development.js:24881:1) Code : const searchMovies = async (title) => { const response = await fetch(${API_URL}&s=${title}); const data = await response.json(); console.log(data.Search); } useEffect(() => { searchMovies('Spiderman'); }, []); I meet the same problem and don't know how to solve it. here's how I solved it: // React 17 // import React from "react"; // import ReactDOM from "react-dom"; // import App from "./App"; // ReactDOM.render(, document.getElementById("root")); // React 18: import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App"; ReactDOM.createRoot(document.getElementById("root")).render(); So basically it updates from React 17 to 18 and uses the new API. I just kept the old one there commented out for reference. Basically there's just those two lines that changes: import ReactDOM from "react-dom/client"; ReactDOM.createRoot(document.getElementById("root")).render(<App />); this solution fixed the react 18 error but still I can not console log the data from API — Reply to this email directly, view it on GitHub <https://gist.github.com/adrianhajdin/997a8cdf94234e889fa47be89a4759f1#gistcomment-4959997> or unsubscribe <https://github.com/notifications/unsubscribe-auth/BE2YAQ3I6OZ37P3I5IBRZ2DYWG76NBFKMF2HI4TJMJ2XIZLTSKBKK5TBNR2WLJDUOJ2WLJDOMFWWLO3UNBZGKYLEL5YGC4TUNFRWS4DBNZ2F6YLDORUXM2LUPGBKK5TBNR2WLJDHNFZXJJDOMFWWLK3UNBZGKYLEL52HS4DFVRZXKYTKMVRXIX3UPFYGLK2HNFZXIQ3PNVWWK3TUUZ2G64DJMNZZDAVEOR4XAZNEM5UXG5FFOZQWY5LFVEYTCNJQGI2TCNZRU52HE2LHM5SXFJTDOJSWC5DF> . 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> .

the search icon is not showing bringing out an error code

'SearchIcon' is not defined no-undef

create a new svg file and copy the search icon's code and paste there....now import that in your main component..it ll work

Check the icon api or match whole code ones time

…

On Mon, 18 Mar 2024, 11:44 am Shanjai Rahul, ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ the search icon is not showing bringing out an error code 'SearchIcon' is not defined no-undef create a new svg file and copy the search icon's code and paste there....now import that in your main component..it ll work — Reply to this email directly, view it on GitHub <https://gist.github.com/adrianhajdin/997a8cdf94234e889fa47be89a4759f1#gistcomment-4991823> or unsubscribe <https://github.com/notifications/unsubscribe-auth/BE2YAQ6AB7YAOZGS6ADUZJDYY2EMVBFKMF2HI4TJMJ2XIZLTSKBKK5TBNR2WLJDUOJ2WLJDOMFWWLO3UNBZGKYLEL5YGC4TUNFRWS4DBNZ2F6YLDORUXM2LUPGBKK5TBNR2WLJDHNFZXJJDOMFWWLK3UNBZGKYLEL52HS4DFVRZXKYTKMVRXIX3UPFYGLK2HNFZXIQ3PNVWWK3TUUZ2G64DJMNZZDAVEOR4XAZNEM5UXG5FFOZQWY5LFVEYTCNJQGI2TCNZRU52HE2LHM5SXFJTDOJSWC5DF> . 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> .

Hey all the setup is Cool!

Hi folks,

For those who are struggling to get the code for 'search.svg,' simply click the "Display the source blob" button shown below.

Thanks, it works. Upon clicking that icon, it went up to app.jss and scrolled back to look at the search.svg, lo and behold, the code appeared there. I tried to paste it here:

search.svg is there just click this "<>" it wll show thats how i got it

Can anyone provide the readme description?

Folks initially the codes worked well on my end but now nothing to display its dissapointing

<svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M29.8594 29.8594L39.4219 39.4219" stroke="#D88769" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M17.9062 33.0469C26.2682 33.0469 33.0469 26.2682 33.0469 17.9062C33.0469 9.54431 26.2682 2.76562 17.9062 2.76562C9.54431 2.76562 2.76562 9.54431 2.76562 17.9062C2.76562 26.2682 9.54431 33.0469 17.9062 33.0469Z" stroke="#D88769" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>

CSS is not Working as display in the Video