diff --git a/index.html b/index.html index 44fcd2a..dcf187d 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,15 @@ - - - - Hello World - - -
- - - + + + + + React Cinema + + + +
+ + + + \ No newline at end of file diff --git a/moviereel.png b/moviereel.png new file mode 100644 index 0000000..0f79f84 Binary files /dev/null and b/moviereel.png differ diff --git a/src/App.js b/src/App.js index 9520f77..2e97b25 100644 --- a/src/App.js +++ b/src/App.js @@ -1,16 +1,54 @@ -import React from 'react'; +import React from "react"; +import Search from "./components/Search"; +import MovieResults from "./components/MovieResults"; +import Info from "./components/Info"; class App extends React.Component { - constructor(){ - super(); + constructor(props) { + super(props); + + this.state = { + movies: [], + moreInfo: [] + }; + + this.getMovies = this.getMovies.bind(this); + this.getMoreInfo = this.getMoreInfo.bind(this); + this.hideInfo = this.hideInfo.bind(this); + } + + getMovies(result) { + this.setState({ + movies: result + }); + } + + getMoreInfo(result) { + this.setState({ + moreInfo: result + }); + } + + hideInfo() { + this.setState({ + moreInfo: "" + }); } - render(){ + render() { return ( -
- React cinema app +
+ + + {this.state.moreInfo === "" ? null : ( + + )} + {/* */}
- ) + ); } } diff --git a/src/components/Info.js b/src/components/Info.js new file mode 100644 index 0000000..83c9a74 --- /dev/null +++ b/src/components/Info.js @@ -0,0 +1,20 @@ +import React from "react"; + +function Info({ moreInfo }) { + console.log("moreInfo:", moreInfo); + + return ( +
+ +
+ ); +} + +export default Info; diff --git a/src/components/MovieResult.js b/src/components/MovieResult.js new file mode 100644 index 0000000..797ecbd --- /dev/null +++ b/src/components/MovieResult.js @@ -0,0 +1,54 @@ +import React from "react"; + +// let imdb = "https://www.imdb.com/title/"; + +const omd = { + apiKey: "2c6457b6&", + firstSearch: "red", + url: "http://www.omdbapi.com/" +}; + +class MovieResult extends React.Component { + constructor(props) { + super(props); + + this.handleClick = this.handleClick.bind(this); + } + + fetchMoreInfo() { + fetch(`${omd.url}?i=${this.props.movie.imdbID}&apikey=${omd.apiKey}`) + .then(response => response.json()) + .then(result => { + this.props.getMoreInfo(result); + }) + .catch(error => console.log(error)); + } + + handleClick(event) { + event.preventDefault(); + + this.fetchMoreInfo(); + } + + render() { + return ( +
+
+ +

{this.props.movie.Title}

+ +

{this.props.movie.Year}

+
+ + Movie Poster + +
+ ); + } +} + +export default MovieResult; diff --git a/src/components/MovieResults.js b/src/components/MovieResults.js new file mode 100644 index 0000000..654f5e0 --- /dev/null +++ b/src/components/MovieResults.js @@ -0,0 +1,20 @@ +import React from "react"; +import MovieResult from "./MovieResult"; + +function MovieResults({ movies, getMoreInfo }) { + return ( +
+ {movies.map(movie => { + return ( + + ); + })} +
+ ); +} + +export default MovieResults; diff --git a/src/components/Search.js b/src/components/Search.js new file mode 100644 index 0000000..054bca1 --- /dev/null +++ b/src/components/Search.js @@ -0,0 +1,76 @@ +import React from "react"; + +const config = { + omd: { + apiKey: "2c6457b6&", + firstSearch: "red", + url: "http://www.omdbapi.com/" + } +}; + +class Search extends React.Component { + constructor(props) { + super(props); + + this.state = { + movie: config.omd.firstSearch + }; + + this.handleSubmit = this.handleSubmit.bind(this); + this.handleChange = this.handleChange.bind(this); + this.handleClick = this.handleClick.bind(this); + } + + fetchMovies() { + fetch(`${config.omd.url}?s=${this.state.movie}&apikey=${config.omd.apiKey}`) + .then(response => response.json()) + .then(result => { + this.props.getMovies(result.Search); + }) + .catch(error => console.log(error)); + } + + handleSubmit(event) { + event.preventDefault(); + this.fetchMovies(); + } + + handleChange(event) { + this.setState({ + movie: event.target.value + }); + } + + handleClick(event) { + this.props.hideInfo(); + } + + componentDidMount() { + this.fetchMovies(); + } + + render() { + return ( +
+

OPEN MOVIE DATABASE SEARCH

+ Movie Reel +
+
+ ); + } +} + +export default Search; diff --git a/style.css b/style.css new file mode 100644 index 0000000..8044e46 --- /dev/null +++ b/style.css @@ -0,0 +1,130 @@ +body { + background-color: crimson; + height: auto; + overflow-y: scroll; + position: relative; +} + +.background { + height: auto; +} + +.header { + position: fixed; + top: 0px; + z-index: 1; + right: 0; + left: 0; + background-color: crimson; +} + +.title { + margin: auto; + text-align: center; + padding-top: 30px; + font-family: "Julius Sans One", sans-serif; + font-size: 75px; + font-weight: bold; + text-shadow: 4px 4px red; +} + +.moviereel { + width: 70px; + display: block; + margin-left: auto; + margin-right: auto; + margin-top: 20px; + border: none; + border-radius: 50%; + box-shadow: 4px 4px red; +} + +.form { + margin: auto; + margin-top: 30px; + text-align: center; + padding: 5px; +} + +.input { + width: 50%; + padding: 12px 20px; + margin: 8px 0; + border: 2px solid red; + border-radius: 5px; + box-shadow: 4px 4px red; +} + +.button { + background-color: white; /* Green */ + border: none; + border-radius: 5px; + color: red; + padding: 9.5px 18px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + font-family: "Roboto", sans-serif; + box-shadow: 4px 4px red; +} + +.movieinfo { + display: flex; + margin-top: 100px; +} + +.moviecard { + margin: 20px; + margin-top: 250px; + width: 250px; + position: relative; + font-family: "Roboto", sans-serif; +} + +.poster { + width: 250px; + height: 370px; + padding-bottom: 10px; +} + +.cardtext { + margin: auto; + padding: 10px; + text-align: center; + border-style: solid; + border-width: 1px; + border-color: white; + border-radius: 5px; + font-family: "Roboto", sans-serif; + background-color: rgba(255, 255, 255, 0.5); + box-shadow: 5px 1px 1px red; +} + +.movieheading { + height: auto; +} + +.infocard { + text-align: center; + height: auto; + padding: 15px; + overflow: auto; + border-style: solid; + border-width: 1px; + border-color: white; + border-radius: 5px; + font-family: "Roboto", sans-serif; + background-color: rgba(255, 255, 255, 0.5); + box-shadow: 5px 1px 1px red; +} + +.detailedinfo { + overflow-y: scroll; + margin: auto; + margin-top: 25px; + margin-bottom: 25px; + padding: 10px; + height: auto; + width: 600px; +}