diff --git a/Procfile b/Procfile new file mode 100644 index 0000000..6f86b16 --- /dev/null +++ b/Procfile @@ -0,0 +1 @@ +web: node server.js \ No newline at end of file diff --git a/index.html b/index.html index 44fcd2a..dd5c78e 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,21 @@ - - - - Hello World - - + + + + + Movie Search Engine + + + +
+
+

+ search movie engine +

+
- - + + + \ No newline at end of file diff --git a/package.json b/package.json index 28efe05..6636354 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,9 @@ "version": "1.0.0", "description": "", "main": "index.js", + "engines": { + "node": "8.11.2" + }, "scripts": { "test": "jest", "dev": "webpack --mode development", diff --git a/server.js b/server.js new file mode 100644 index 0000000..9b52e06 --- /dev/null +++ b/server.js @@ -0,0 +1,20 @@ +const express = require("express"); +const bodyParser = require("body-parser"); +const app = express(); + +app.use(bodyParser.json()); +app.use("/static", express.static("static")); +app.set("view engine", "hbs"); + +app.get("/", function(req, res) { + res.render("index"); +}); + +// app.listen(8080, function() { +// console.log("Listening on port 8080"); +// }); + +const port = process.env.PORT || 8080; +app.listen(port, function() { + console.log(`Listening on port number ${port}`); +}); diff --git a/src/App.js b/src/App.js index 9520f77..0198da8 100644 --- a/src/App.js +++ b/src/App.js @@ -1,16 +1,29 @@ -import React from 'react'; +import React from "react"; +import Search from "./Search"; +import MovieList from "./MovieList"; class App extends React.Component { - constructor(){ + constructor(props) { super(); + + this.state = { + movies: [] + }; + + this.moviesReceiver = this.moviesReceiver.bind(this); + } + + moviesReceiver(moviesArr) { + this.setState({ movies: moviesArr }); } - render(){ + render() { return (
- React cinema app + +
- ) + ); } } diff --git a/src/Movie.js b/src/Movie.js new file mode 100644 index 0000000..92ed61b --- /dev/null +++ b/src/Movie.js @@ -0,0 +1,89 @@ +import React from "react"; + +function MovieDetails(props) { + return ( +
+

Movie details

+

+ Director: + {props.Director} +

+

+ Actors: + {props.Actors} +

+

+ Awards: + {props.Awards} +

+

+ Runtime: + {props.Runtime} +

+

+ Plot: + {props.Plot} +

+
+ ); +} + +class Movie extends React.Component { + constructor(props) { + super(props); + + this.state = { + showDetails: false, + moreDetails: {}, + buttonName: "more details" + }; + } + + handleClick(movieIdToSearchFor) { + if (this.state.showDetails) { + this.setState({ showDetails: false, buttonName: "more details" }); + } else { + fetch(`https://www.omdbapi.com/?i=${movieIdToSearchFor}&apikey=40ce55c`) + .then(response => response.json()) + .then(data => + this.setState({ + moreDetails: data, + showDetails: true, + buttonName: "hide details" + }) + ); + } + } + render() { + return ( +
+
+

{this.props.title}

+

+ Release Year: {this.props.year} +

+
+
+ +
+ +
+ +
+ {this.state.showDetails ? ( + + ) : null} +
+ ); + } +} + +export default Movie; diff --git a/src/MovieList.js b/src/MovieList.js new file mode 100644 index 0000000..d044f86 --- /dev/null +++ b/src/MovieList.js @@ -0,0 +1,22 @@ +import React from "react"; +import Movie from "./Movie"; + +function MovieList(props) { + return ( +
+ {props.moviesResults.map(movie => { + return ( + + ); + })} +
+ ); +} + +export default MovieList; diff --git a/src/Search.js b/src/Search.js new file mode 100644 index 0000000..bafc649 --- /dev/null +++ b/src/Search.js @@ -0,0 +1,51 @@ +import React from "react"; + +class Search extends React.Component { + constructor() { + super(); + + this.state = { + type: "" + }; + + this.handleChange = this.handleChange.bind(this); + this.handleSubmit = this.handleSubmit.bind(this); + } + handleChange(event) { + this.setState({ type: event.target.value }); + } + + handleSubmit(event) { + event.preventDefault(); + if (this.state.type.length > 0) { + fetch(`http://www.omdbapi.com/?s=${this.state.type}&apikey=40ce55c`) + .then(function(response) { + return response.json(); + }) + .then(data => { + this.props.moviesReceiver(data.Search); + }); + } + } + + render() { + return ( +
+
+
+ ); + } +} + +export default Search; diff --git a/src/style.css b/src/style.css new file mode 100644 index 0000000..02d32c8 --- /dev/null +++ b/src/style.css @@ -0,0 +1,90 @@ +html, +body { + height: 100%; + background-color: silver; +} + +html { + box-sizing: border-box; +} + +.header { + padding: 5px 10px; + background-color: navy; + border: solid 6px black; +} + +.title { + display: flex; + justify-content: center; + color: white; + text-transform: capitalize; + font-family: Impact; +} + +.container { + padding: 5px 10px; + background: silver; +} + +.search { + display: flex; + + justify-content: center; + padding: 2px 2px 2px 10px; + background: navy; + margin: auto; + font-size: 14px; + +} + +.search__label { + align-self: center; +} + +.search__input { + justify-content: center; + + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.search__btn { + text-transform: uppercase; + background: lightblue; +} + +.search, +.search__input, +.btn { + transition: 0.5s background-color, 0.5s color; + + padding: 5px 10px; + border: none; + font: inherit; + border: solid 6px black; +} + +.movie__list { + display: flex; + flex-wrap: wrap; + justify-content: space-around; +} + +.movie { + background-color: navy; + color:white; + width: 360px; + padding: 10px; + text-align: center; + border: solid 6px black; + margin-top: 10px; + margin-bottom: 10px' +} + +.movie__details { + position: relative; + background-color: white; + color:black; + border: solid 6px black; +}