From 1a68bcf9fdc09167a8957d78477042bbdec8d70c Mon Sep 17 00:00:00 2001 From: Phoebe DG Date: Mon, 25 Jun 2018 13:36:39 +0100 Subject: [PATCH] added css --- index.html | 23 +++--- moviereel.png | Bin 0 -> 3627 bytes src/App.js | 52 +++++++++++-- src/components/Info.js | 20 +++++ src/components/MovieResult.js | 54 ++++++++++++++ src/components/MovieResults.js | 20 +++++ src/components/Search.js | 76 +++++++++++++++++++ style.css | 130 +++++++++++++++++++++++++++++++++ 8 files changed, 358 insertions(+), 17 deletions(-) create mode 100644 moviereel.png create mode 100644 src/components/Info.js create mode 100644 src/components/MovieResult.js create mode 100644 src/components/MovieResults.js create mode 100644 src/components/Search.js create mode 100644 style.css 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 0000000000000000000000000000000000000000..0f79f8431e1f043a8fc6fa72cb170c8fe55de00b GIT binary patch literal 3627 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 xEtbh9iwDC> - 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 ( +
+
    +
  • Actors: {moreInfo.Actors}
    • +
  • Genre: {moreInfo.Genre}
    • +
  • Director: {moreInfo.Director}
    • +
  • Plot: {moreInfo.Plot}
    • +
  • Released: {moreInfo.Released}
    • +
  • Runtime: {moreInfo.Runtime}
    • +
+
+ ); +} + +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; +}