From 7054b4a71c9d09e5c09bd6a741808fab8a6ef290 Mon Sep 17 00:00:00 2001 From: jamal westfield Date: Fri, 28 Sep 2018 17:30:24 +0100 Subject: [PATCH 1/9] search working, hero working, need to fix hero showing at bottom --- src/components/App.js | 52 ++++++++++++++++++++++++++++++-- style.css | 69 +++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 118 insertions(+), 3 deletions(-) diff --git a/src/components/App.js b/src/components/App.js index 9520f77..174ffaa 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -1,14 +1,60 @@ import React from 'react'; - +import Search from './Search'; +import Results from './Results'; +import Hero from './Hero'; class App extends React.Component { constructor(){ super(); + + this.receiveSearch = this.receiveSearch.bind(this) + // this.componentDidMount = this.componentDidMount.bind(this) + + this.fetchMovies = this.fetchMovies.bind(this) + this.state ={ + userSearch: "", + moviesArray:[] + + } + } + + // componentDidMount(){ + // this.fetchMovies("") + // } + + fetchMovies(userSearch){ + fetch(`http://www.omdbapi.com/?apikey=8d5ab09&s=${userSearch}`) + .then(response => response.json()) + .then(body => { + // console.log(body) + this.setState({moviesArray: body.Search}) + }) } + +// function receive user input + receiveSearch(text){ + this.setState({ + userSearch: text + }) + this.fetchMovies(text) + } + + + + + + + render(){ return ( -
- React cinema app +
+

The Internet's Biggest Collections Of Movies

+ + + + {/* add a ternary to show hero if no movie search and if movie is search, no hero */} + +
) } diff --git a/style.css b/style.css index e69de29..d9673cb 100644 --- a/style.css +++ b/style.css @@ -0,0 +1,69 @@ +body{ + background: black; + color: white; +} + + + + + +.welcome-heading{ + display:flex; + justify-content: center; + text-align:center +} + +form{ + display:flex; + justify-content: center; +} + +.hero-heading { + text-align:center; + color:lightblue; +} + +.scroll-heading{ + text-align:center; +} + + +.hero-image { + height: 400px; + width: 350px; +} + +.hero-landing{ + display:flex; + justify-content: center; + background: white; +} + + +.hero-video{ + display:flex; + justify-content: center; + +} + +.results{ + display: flex; + flex-direction: column; +} + + +@media screen and (min-width: 500px) { + .results { + display:flex; + flex-direction: row; + overflow: scroll; + } + + .posters{ + width: 200px; + } + + .posters:hover{ + transform: scale(1.1); + } + } \ No newline at end of file From 0df9c6b817bf7cff776dfe7b9179fd93e7b04861 Mon Sep 17 00:00:00 2001 From: jamal westfield Date: Sat, 29 Sep 2018 21:20:13 +0100 Subject: [PATCH 2/9] latest --- index.html | 4 ++++ package-lock.json | 37 +++++++++++++++++++++++++---- package.json | 3 ++- src/components/App.js | 20 ++++++++++++---- style.css | 55 ++++++++++++++++++++++++++++++++++++------- 5 files changed, 99 insertions(+), 20 deletions(-) diff --git a/index.html b/index.html index 5956140..0038acd 100644 --- a/index.html +++ b/index.html @@ -2,11 +2,15 @@ + Hello World + +
+ diff --git a/package-lock.json b/package-lock.json index 8ca987c..07b8726 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2313,7 +2313,6 @@ "version": "2.6.9", "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", - "dev": true, "requires": { "ms": "2.0.0" } @@ -4903,6 +4902,11 @@ } } }, + "load-script": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/load-script/-/load-script-1.0.0.tgz", + "integrity": "sha1-BJGTngvuVkPuSUp+PaPSuscMbKQ=" + }, "loader-runner": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-2.3.1.tgz", @@ -4933,8 +4937,7 @@ "lodash": { "version": "4.17.11", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz", - "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==", - "dev": true + "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==" }, "lodash.debounce": { "version": "4.0.8", @@ -5345,8 +5348,7 @@ "ms": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", - "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", - "dev": true + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" }, "multimatch": { "version": "2.1.0", @@ -6152,6 +6154,16 @@ "prop-types": "^15.6.0" } }, + "react-youtube": { + "version": "7.7.0", + "resolved": "https://registry.npmjs.org/react-youtube/-/react-youtube-7.7.0.tgz", + "integrity": "sha512-ZHHG3x7y9P8oCldPx0t4z0jTK9GC4lBVzKnYcd8SHQe2x5mCUIxLNWXzR8+Oe7H2I4ACCB87lLF5WuU39PGuCw==", + "requires": { + "lodash": "^4.17.4", + "prop-types": "^15.5.3", + "youtube-player": "^5.5.1" + } + }, "read-chunk": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/read-chunk/-/read-chunk-2.1.0.tgz", @@ -6632,6 +6644,11 @@ "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=", "dev": true }, + "sister": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/sister/-/sister-3.0.1.tgz", + "integrity": "sha512-aG41gNRHRRxPq52MpX4vtm9tapnr6ENmHUx8LMAJWCOplEMwXzh/dp5WIo52Wl8Zlc/VUyHLJ2snX0ck+Nma9g==" + }, "slash": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/slash/-/slash-1.0.0.tgz", @@ -8292,6 +8309,16 @@ "dev": true } } + }, + "youtube-player": { + "version": "5.5.1", + "resolved": "https://registry.npmjs.org/youtube-player/-/youtube-player-5.5.1.tgz", + "integrity": "sha512-1d62W9She0B1uKNyY6K7jtWFbOW3dYsm6hyKzrh11BLOuYFzkt8K6AcQ3QdPF3aU47dzhZ82clzOJVVWus4HTw==", + "requires": { + "debug": "^2.6.6", + "load-script": "^1.0.0", + "sister": "^3.0.0" + } } } } diff --git a/package.json b/package.json index 26c045b..3c72d7a 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,8 @@ }, "dependencies": { "react": "^16.2.0", - "react-dom": "^16.2.0" + "react-dom": "^16.2.0", + "react-youtube": "^7.7.0" }, "devDependencies": { "babel-loader": "^7.1.3", diff --git a/src/components/App.js b/src/components/App.js index 174ffaa..f06d88d 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -2,17 +2,20 @@ import React from 'react'; import Search from './Search'; import Results from './Results'; import Hero from './Hero'; + class App extends React.Component { constructor(){ super(); + this.handleClick = this.handleClick.bind(this) this.receiveSearch = this.receiveSearch.bind(this) // this.componentDidMount = this.componentDidMount.bind(this) this.fetchMovies = this.fetchMovies.bind(this) this.state ={ userSearch: "", - moviesArray:[] + moviesArray:[], + pageNumber: 1 } } @@ -22,7 +25,7 @@ class App extends React.Component { // } fetchMovies(userSearch){ - fetch(`http://www.omdbapi.com/?apikey=8d5ab09&s=${userSearch}`) + fetch(`http://www.omdbapi.com/?apikey=8d5ab09&s=${userSearch}&page=${this.state.pageNumber}`) .then(response => response.json()) .then(body => { // console.log(body) @@ -40,7 +43,14 @@ class App extends React.Component { } - + handleClick(event){ + event.preventDefault() + console.log(this.state.pageNumber) + this.setState({ + pageNumber: this.state.pageNumber + 1 + }) + console.log(this.state.pageNumber) + } @@ -51,10 +61,10 @@ class App extends React.Component {

The Internet's Biggest Collections Of Movies

- {/* add a ternary to show hero if no movie search and if movie is search, no hero */} - + +
) } diff --git a/style.css b/style.css index d9673cb..281a1e2 100644 --- a/style.css +++ b/style.css @@ -25,45 +25,82 @@ form{ .scroll-heading{ text-align:center; + } +span{ + text-align: center; +} .hero-image { height: 400px; - width: 350px; + width: 100%; } .hero-landing{ display:flex; justify-content: center; - background: white; + /* background: white; + border-radius: */ } .hero-video{ display:flex; justify-content: center; + width: 100% } .results{ display: flex; flex-direction: column; + +} + + + +.posters{ + border-radius: 10% / 50%; } +.load-button{ + display: none; +} @media screen and (min-width: 500px) { - .results { - display:flex; - flex-direction: row; - overflow: scroll; - } - + + + .posters{ - width: 200px; + width: 400px; + } .posters:hover{ transform: scale(1.1); } + + .hero-landing{ + display:flex; + justify-content: center; + /* background: white; + border-radius: */ +} + + .hero-image { + height: 400px; + width: 80%; +} + + +.hero-video{ + display:flex; + justify-content: center; + +} + + + + } \ No newline at end of file From 30bb5bd3da137e59e432a299b0866ebd0b6be09e Mon Sep 17 00:00:00 2001 From: jamal westfield Date: Sat, 29 Sep 2018 21:23:00 +0100 Subject: [PATCH 3/9] latest --- src/components/Displayresults.js | 55 ++++++++++++++++++++++++++++++++ src/components/Hero.js | 49 ++++++++++++++++++++++++++++ src/components/Results.js | 15 +++++++++ src/components/Search.js | 38 ++++++++++++++++++++++ 4 files changed, 157 insertions(+) create mode 100644 src/components/Displayresults.js create mode 100644 src/components/Hero.js create mode 100644 src/components/Results.js create mode 100644 src/components/Search.js diff --git a/src/components/Displayresults.js b/src/components/Displayresults.js new file mode 100644 index 0000000..69fc053 --- /dev/null +++ b/src/components/Displayresults.js @@ -0,0 +1,55 @@ +import React from 'react'; + +class Displayresults extends React.Component { + constructor(){ + super() + this.fetchFilmInfo = this.fetchFilmInfo.bind(this) + + this.state ={ + info: {}, + MovieInfoHeading: '' + } + } + + + + fetchFilmInfo(){ + + fetch(`http://www.omdbapi.com/?apikey=8d5ab09&i=${this.props.movie.imdbID}`) + .then(response => response.json()) + .then(body => + this.setState({ + info: body, + MovieInfoHeading: 'Movie Information:', + Plot: `Plot: ${body.Plot}`, + imdbRating: `Rating: ${body.imdbRating}`, + Director: `Director: ${body.Director}`, + Genre: `Genre: ${body.Genre}`, + Runtime: `Runtime: ${body.Runtime}`, + + + })) + } + + render(){ + return ( + +
+

{this.props.movie.Title} ({this.props.movie.Year})

+ Click For Movie Info + +

{this.state.Plot}

+

{this.state.imdbRating}

+

{this.state.Director}

+

{this.state.Genre}

+

{this.state.Runtime}

+ +
+ ); + } +} + +export default Displayresults; + + + \ No newline at end of file diff --git a/src/components/Hero.js b/src/components/Hero.js new file mode 100644 index 0000000..836245c --- /dev/null +++ b/src/components/Hero.js @@ -0,0 +1,49 @@ +import React from 'react'; + + +class Hero extends React.Component { + constructor(){ + super(); + this.fetchHero = this.fetchHero.bind(this) + this.state ={ + movie: [] + } + } + + fetchHero(){ + fetch("http://www.omdbapi.com/?apikey=8d5ab09&i=tt1270797") + .then(response => response.json()) + .then(body => {(console.log(body)) + this.setState({ + movie: body + }) + }) + } + + componentDidMount(){ + this.fetchHero() + } + + + + render(){ + return ( + +
+

Today's Featured Film

+

VENOM

+

In Theatres Soon!

+

Scroll down to watch the trailer

+
+ +
+
+ +
+
+ ); + } +} + +export default Hero; + diff --git a/src/components/Results.js b/src/components/Results.js new file mode 100644 index 0000000..f971f51 --- /dev/null +++ b/src/components/Results.js @@ -0,0 +1,15 @@ +import React from 'react'; +import Displayresults from './Displayresults' +class Results extends React.Component { + render(){ + return ( +
+ {this.props.moviesArray.map(movie => { + return + })} +
+ ); + } +} + +export default Results; diff --git a/src/components/Search.js b/src/components/Search.js new file mode 100644 index 0000000..80fe462 --- /dev/null +++ b/src/components/Search.js @@ -0,0 +1,38 @@ +import React from 'react'; +import Displayresults from './Displayresults' +class Search extends React.Component { +constructor(){ + super() + this.state = { + text: "" + } + this.handleSubmit = this.handleSubmit.bind(this) + this.handleChange = this.handleChange.bind(this) +} + + handleChange(event){ + this.setState({ + text:event.target.value + }) + } + + handleSubmit(event){ + //capture user input submit + event.preventDefault() + this.props.receiver(this.state.text) + + } + + + render(){ + return ( + +
+ + +
+ ); + } +} + +export default Search; \ No newline at end of file From 06f666b0fd1f8b75f6b0ddb52f53fa2f7d579f9e Mon Sep 17 00:00:00 2001 From: jamal westfield Date: Sun, 30 Sep 2018 10:40:06 +0100 Subject: [PATCH 4/9] desktop fixed --- src/components/App.js | 20 +++++++++----------- src/components/Displayresults.js | 1 - style.css | 29 +++++++++++++++++++---------- 3 files changed, 28 insertions(+), 22 deletions(-) diff --git a/src/components/App.js b/src/components/App.js index f06d88d..b1e01b5 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -14,10 +14,9 @@ class App extends React.Component { this.fetchMovies = this.fetchMovies.bind(this) this.state ={ userSearch: "", - moviesArray:[], - pageNumber: 1 - + moviesArray:[] } + this.page = 1 } // componentDidMount(){ @@ -25,11 +24,13 @@ class App extends React.Component { // } fetchMovies(userSearch){ - fetch(`http://www.omdbapi.com/?apikey=8d5ab09&s=${userSearch}&page=${this.state.pageNumber}`) + fetch(`http://www.omdbapi.com/?apikey=8d5ab09&s=${userSearch}&page=${this.page}`) .then(response => response.json()) .then(body => { // console.log(body) - this.setState({moviesArray: body.Search}) + this.setState({moviesArray: body.Search, + + }) }) } @@ -45,11 +46,7 @@ class App extends React.Component { handleClick(event){ event.preventDefault() - console.log(this.state.pageNumber) - this.setState({ - pageNumber: this.state.pageNumber + 1 - }) - console.log(this.state.pageNumber) + this.page + 1 } @@ -63,8 +60,9 @@ class App extends React.Component { {/* add a ternary to show hero if no movie search and if movie is search, no hero */} + - + ) } diff --git a/src/components/Displayresults.js b/src/components/Displayresults.js index 69fc053..c8bf38c 100644 --- a/src/components/Displayresults.js +++ b/src/components/Displayresults.js @@ -43,7 +43,6 @@ class Displayresults extends React.Component {

{this.state.Director}

{this.state.Genre}

{this.state.Runtime}

- ); } diff --git a/style.css b/style.css index 281a1e2..4a4003c 100644 --- a/style.css +++ b/style.css @@ -23,13 +23,8 @@ form{ color:lightblue; } -.scroll-heading{ +p.scroll-heading, h3.scroll-heading{ text-align:center; - -} - -span{ - text-align: center; } .hero-image { @@ -59,22 +54,30 @@ span{ } - .posters{ border-radius: 10% / 50%; } .load-button{ - display: none; + margin: auto; } @media screen and (min-width: 500px) { +h1.scroll-heading{ + display: flex; + justify-content: center; +} +span{ + display:flex; + justify-content: center; +} .posters{ - width: 400px; - + width: 300px; + margin:auto; + } .posters:hover{ @@ -100,6 +103,12 @@ span{ } +p{ + width: 260px; + margin: auto; + padding: 5px; + text-align: center; +} From c9c7008e888a92709bc987133497c49336ffad1e Mon Sep 17 00:00:00 2001 From: jamal westfield Date: Sun, 30 Sep 2018 12:19:01 +0100 Subject: [PATCH 5/9] pagination working --- src/components/App.js | 27 ++++++++++++++++++++------- src/components/Button.js | 13 +++++++++++++ src/components/Displayresults.js | 3 ++- src/components/Results.js | 1 + style.css | 20 +++++++++++++++----- 5 files changed, 51 insertions(+), 13 deletions(-) create mode 100644 src/components/Button.js diff --git a/src/components/App.js b/src/components/App.js index b1e01b5..f38678e 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -8,15 +8,16 @@ class App extends React.Component { super(); this.handleClick = this.handleClick.bind(this) + this.handlePrevClick = this.handlePrevClick.bind(this) this.receiveSearch = this.receiveSearch.bind(this) // this.componentDidMount = this.componentDidMount.bind(this) this.fetchMovies = this.fetchMovies.bind(this) this.state ={ userSearch: "", - moviesArray:[] + moviesArray:[], + page: 1 } - this.page = 1 } // componentDidMount(){ @@ -24,7 +25,7 @@ class App extends React.Component { // } fetchMovies(userSearch){ - fetch(`http://www.omdbapi.com/?apikey=8d5ab09&s=${userSearch}&page=${this.page}`) + fetch(`http://www.omdbapi.com/?apikey=8d5ab09&s=${userSearch}&page=${this.state.page}`) .then(response => response.json()) .then(body => { // console.log(body) @@ -45,8 +46,20 @@ class App extends React.Component { handleClick(event){ - event.preventDefault() - this.page + 1 + + this.setState({ + page: this.state.page + 1 + }) + this.fetchMovies(this.state.userSearch,this.setState.page) + window.scrollTo(0,1000) + } + + handlePrevClick(){ + this.setState({ + page: this.state.page - 1 + }) + this.fetchMovies(this.state.userSearch, this.setState.page) + window.scrollTo(0,500) } @@ -60,9 +73,9 @@ class App extends React.Component { {/* add a ternary to show hero if no movie search and if movie is search, no hero */} - - + + ) } diff --git a/src/components/Button.js b/src/components/Button.js new file mode 100644 index 0000000..4b7942d --- /dev/null +++ b/src/components/Button.js @@ -0,0 +1,13 @@ +import React from 'react'; + +class Button extends React.Component { + render(){ + return ( +
+ +
+ ); + } +} + +export default Button; \ No newline at end of file diff --git a/src/components/Displayresults.js b/src/components/Displayresults.js index c8bf38c..62a41e0 100644 --- a/src/components/Displayresults.js +++ b/src/components/Displayresults.js @@ -1,4 +1,5 @@ import React from 'react'; +import Button from './Button' class Displayresults extends React.Component { constructor(){ @@ -33,7 +34,7 @@ class Displayresults extends React.Component { render(){ return ( - +

{this.props.movie.Title} ({this.props.movie.Year})

Click For Movie Info diff --git a/src/components/Results.js b/src/components/Results.js index f971f51..a80232d 100644 --- a/src/components/Results.js +++ b/src/components/Results.js @@ -1,5 +1,6 @@ import React from 'react'; import Displayresults from './Displayresults' +import Button from './Button' class Results extends React.Component { render(){ return ( diff --git a/style.css b/style.css index 4a4003c..6d9ee1d 100644 --- a/style.css +++ b/style.css @@ -10,7 +10,7 @@ body{ .welcome-heading{ display:flex; justify-content: center; - text-align:center + text-align:center; } form{ @@ -27,6 +27,16 @@ p.scroll-heading, h3.scroll-heading{ text-align:center; } +h1.scroll-heading{ + display: flex; + justify-content: center; +} + +span{ + display:flex; + justify-content: center; +} + .hero-image { height: 400px; width: 100%; @@ -43,14 +53,13 @@ p.scroll-heading, h3.scroll-heading{ .hero-video{ display:flex; justify-content: center; - width: 100% + width: 100%; } .results{ display: flex; flex-direction: column; - } @@ -58,8 +67,9 @@ p.scroll-heading, h3.scroll-heading{ border-radius: 10% / 50%; } -.load-button{ - margin: auto; +button .load-button{ + + } @media screen and (min-width: 500px) { From 2a3730bb254262ecd85da10329652e71d2545b88 Mon Sep 17 00:00:00 2001 From: jamal westfield Date: Sun, 30 Sep 2018 14:28:33 +0100 Subject: [PATCH 6/9] pagination working and buttons styled --- src/components/App.js | 25 +++++++++++-------------- src/components/Displayresults.js | 5 ++++- src/components/Results.js | 2 +- src/components/Search.js | 1 - style.css | 15 +++++++++++++-- 5 files changed, 29 insertions(+), 19 deletions(-) diff --git a/src/components/App.js b/src/components/App.js index f38678e..8d3709e 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -10,7 +10,6 @@ class App extends React.Component { this.handleClick = this.handleClick.bind(this) this.handlePrevClick = this.handlePrevClick.bind(this) this.receiveSearch = this.receiveSearch.bind(this) - // this.componentDidMount = this.componentDidMount.bind(this) this.fetchMovies = this.fetchMovies.bind(this) this.state ={ @@ -20,10 +19,7 @@ class App extends React.Component { } } - // componentDidMount(){ - // this.fetchMovies("") - // } - + fetchMovies(userSearch){ fetch(`http://www.omdbapi.com/?apikey=8d5ab09&s=${userSearch}&page=${this.state.page}`) .then(response => response.json()) @@ -49,17 +45,15 @@ class App extends React.Component { this.setState({ page: this.state.page + 1 - }) - this.fetchMovies(this.state.userSearch,this.setState.page) - window.scrollTo(0,1000) + }, () => this.fetchMovies(this.state.userSearch,this.setState.page)) + window.scrollTo(0,1050) } handlePrevClick(){ this.setState({ page: this.state.page - 1 - }) - this.fetchMovies(this.state.userSearch, this.setState.page) - window.scrollTo(0,500) + },() => this.fetchMovies(this.state.userSearch, this.setState.page)) + window.scrollTo(0,1050) } @@ -73,9 +67,12 @@ class App extends React.Component { {/* add a ternary to show hero if no movie search and if movie is search, no hero */} - - - + + +
+ + +
) } diff --git a/src/components/Displayresults.js b/src/components/Displayresults.js index 62a41e0..f3f69b6 100644 --- a/src/components/Displayresults.js +++ b/src/components/Displayresults.js @@ -1,5 +1,5 @@ import React from 'react'; -import Button from './Button' + class Displayresults extends React.Component { constructor(){ @@ -28,11 +28,14 @@ class Displayresults extends React.Component { Genre: `Genre: ${body.Genre}`, Runtime: `Runtime: ${body.Runtime}`, + })) } render(){ + + return (
diff --git a/src/components/Results.js b/src/components/Results.js index a80232d..59f0625 100644 --- a/src/components/Results.js +++ b/src/components/Results.js @@ -1,6 +1,6 @@ import React from 'react'; import Displayresults from './Displayresults' -import Button from './Button' + class Results extends React.Component { render(){ return ( diff --git a/src/components/Search.js b/src/components/Search.js index 80fe462..7b32617 100644 --- a/src/components/Search.js +++ b/src/components/Search.js @@ -20,7 +20,6 @@ constructor(){ //capture user input submit event.preventDefault() this.props.receiver(this.state.text) - } diff --git a/style.css b/style.css index 6d9ee1d..3c2f919 100644 --- a/style.css +++ b/style.css @@ -67,9 +67,20 @@ span{ border-radius: 10% / 50%; } -button .load-button{ - + +.buttons{ + margin-top: 15px; + display: flex; + justify-content: center; +} + +.load-button__next:hover{ + transform: scale(1.1); +} + +.load-button__prev:hover{ + transform: scale(1.1); } @media screen and (min-width: 500px) { From ba98c01cb7e282033cf487dd0f843b7ba1efa6c3 Mon Sep 17 00:00:00 2001 From: jamal westfield Date: Sun, 30 Sep 2018 15:18:15 +0100 Subject: [PATCH 7/9] latest --- style.css | 40 ++++++++++++++++++++++++++++++++++++++-- 1 file changed, 38 insertions(+), 2 deletions(-) diff --git a/style.css b/style.css index 3c2f919..2c086ed 100644 --- a/style.css +++ b/style.css @@ -1,9 +1,18 @@ +html{ + box-sizing: border-box; + font-family: Arial, Helvetica, sans-serif; +} + body{ background: black; color: white; + margin: 30px 50px; + line-height: 1.4; } - +.container{ + display: grid; +} @@ -20,13 +29,22 @@ form{ .hero-heading { text-align:center; - color:lightblue; + color:red; } p.scroll-heading, h3.scroll-heading{ text-align:center; } +h3.scroll-heading{ + font-size: 10px; +} + +p.scroll-heading{ + text-decoration: underline; + font-size: 18px; +} + h1.scroll-heading{ display: flex; justify-content: center; @@ -73,14 +91,31 @@ span{ margin-top: 15px; display: flex; justify-content: center; + padding: 0.6rem 1.3rem; + text-transform: uppercase; + color: #0e2f44; + font-size: 0.8rem; + + margin: 10px 0; + padding: 5px 15px; + text-decoration: none; + } .load-button__next:hover{ transform: scale(1.1); + background-color: #0e2f44; + color: #fff; + transition: 0.4s; + text-decoration: underline; } .load-button__prev:hover{ transform: scale(1.1); + background-color: #0e2f44; + color: #fff; + transition: 0.4s; + text-decoration: underline; } @media screen and (min-width: 500px) { @@ -96,6 +131,7 @@ span{ } .posters{ + width: 300px; margin:auto; From 6f0935b7e641d934636ac2bc1dc6266a1b3f1300 Mon Sep 17 00:00:00 2001 From: jamal westfield Date: Sun, 30 Sep 2018 18:33:01 +0100 Subject: [PATCH 8/9] styles and favourites added but not working --- index.html | 1 + src/components/App.js | 4 ++- src/components/Displayresults.js | 12 ++++---- src/components/Search.js | 8 +++-- style.css | 50 ++++++++++++++++++++++++++++++-- 5 files changed, 63 insertions(+), 12 deletions(-) diff --git a/index.html b/index.html index 0038acd..ba34633 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,7 @@ + Hello World diff --git a/src/components/App.js b/src/components/App.js index 8d3709e..29f970f 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -63,7 +63,9 @@ class App extends React.Component { return (

The Internet's Biggest Collections Of Movies

- + {/* add a ternary to show hero if no movie search and if movie is search, no hero */} diff --git a/src/components/Displayresults.js b/src/components/Displayresults.js index f3f69b6..7ec3859 100644 --- a/src/components/Displayresults.js +++ b/src/components/Displayresults.js @@ -5,17 +5,18 @@ class Displayresults extends React.Component { constructor(){ super() this.fetchFilmInfo = this.fetchFilmInfo.bind(this) - + this.handleClick = this.handleClick.bind(this) this.state ={ info: {}, MovieInfoHeading: '' } } + handleClick(){ + } fetchFilmInfo(){ - fetch(`http://www.omdbapi.com/?apikey=8d5ab09&i=${this.props.movie.imdbID}`) .then(response => response.json()) .then(body => @@ -27,9 +28,6 @@ class Displayresults extends React.Component { Director: `Director: ${body.Director}`, Genre: `Genre: ${body.Genre}`, Runtime: `Runtime: ${body.Runtime}`, - - - })) } @@ -47,6 +45,10 @@ class Displayresults extends React.Component {

{this.state.Director}

{this.state.Genre}

{this.state.Runtime}

+ + + Add To Favourites +
); } diff --git a/src/components/Search.js b/src/components/Search.js index 7b32617..b5cbcfa 100644 --- a/src/components/Search.js +++ b/src/components/Search.js @@ -25,13 +25,15 @@ constructor(){ render(){ return ( - +
- +
+ ); } } -export default Search; \ No newline at end of file +export default Search; + diff --git a/style.css b/style.css index 2c086ed..0717a9f 100644 --- a/style.css +++ b/style.css @@ -10,11 +10,16 @@ body{ line-height: 1.4; } -.container{ - display: grid; -} +li{ + list-style-type: none; + +} +ul{ + display:flex; + justify-content: flex-end; +} .welcome-heading{ display:flex; @@ -30,6 +35,7 @@ form{ .hero-heading { text-align:center; color:red; + text-shadow: #fff; } p.scroll-heading, h3.scroll-heading{ @@ -43,6 +49,7 @@ h3.scroll-heading{ p.scroll-heading{ text-decoration: underline; font-size: 18px; + text-shadow: red; } h1.scroll-heading{ @@ -55,6 +62,10 @@ span{ justify-content: center; } +.add-to{ + font-size: 10px; +} + .hero-image { height: 400px; width: 100%; @@ -118,11 +129,18 @@ span{ text-decoration: underline; } +.heart-icon{ + display:flex; + justify-content: center; + font-size: 30px; +} + @media screen and (min-width: 500px) { h1.scroll-heading{ display: flex; justify-content: center; + color: lightgrey; } span{ @@ -139,8 +157,22 @@ span{ .posters:hover{ transform: scale(1.1); + } + .results:hover{ + + background:#fff; + box-shadow: 0 0 10px rgba(255, 255, 255, 1), + 0 0 20px rgba(255, 255, 255, 1), + 0 0 30px rgba(255, 255, 255, 1), + 0 0 0 75px rgba(255, 255, 255, 0.05), + 0 0 0 60px rgba(255, 255, 255, 0.05), + 0 0 0 45px rgba(255, 255, 255, 0.05), + 0 0 0 30px rgba(255, 255, 255, 0.05), + 0 0 0 75px rgba(255, 255, 255, 0.05) + + } .hero-landing{ display:flex; justify-content: center; @@ -168,5 +200,17 @@ p{ } +.heart-icon{ + font-size: 45px; + color: lightgrey; +} + +.heart-icon:hover{ + color: red; + transform: scale(1.1); +} + + + } \ No newline at end of file From 0fe83513a6798511b99b9cc57dbf36467f0f5852 Mon Sep 17 00:00:00 2001 From: jamal westfield Date: Sun, 30 Sep 2018 20:10:07 +0100 Subject: [PATCH 9/9] latest and working video autoplay --- src/components/App.js | 1 + src/components/Displayresults.js | 12 +++++++----- src/components/Hero.js | 2 +- style.css | 19 +++++++++++++++++-- 4 files changed, 26 insertions(+), 8 deletions(-) diff --git a/src/components/App.js b/src/components/App.js index 29f970f..19f254e 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -47,6 +47,7 @@ class App extends React.Component { page: this.state.page + 1 }, () => this.fetchMovies(this.state.userSearch,this.setState.page)) window.scrollTo(0,1050) + } handlePrevClick(){ diff --git a/src/components/Displayresults.js b/src/components/Displayresults.js index 7ec3859..645f3f1 100644 --- a/src/components/Displayresults.js +++ b/src/components/Displayresults.js @@ -9,6 +9,7 @@ class Displayresults extends React.Component { this.state ={ info: {}, MovieInfoHeading: '' + } } @@ -28,6 +29,7 @@ class Displayresults extends React.Component { Director: `Director: ${body.Director}`, Genre: `Genre: ${body.Genre}`, Runtime: `Runtime: ${body.Runtime}`, + star: })) } @@ -40,11 +42,11 @@ class Displayresults extends React.Component {

{this.props.movie.Title} ({this.props.movie.Year})

Click For Movie Info -

{this.state.Plot}

-

{this.state.imdbRating}

-

{this.state.Director}

-

{this.state.Genre}

-

{this.state.Runtime}

+

{this.state.Plot}

+

{this.state.imdbRating}{this.state.star}

+

{this.state.Director}

+

{this.state.Genre}

+

{this.state.Runtime}

Add To Favourites diff --git a/src/components/Hero.js b/src/components/Hero.js index 836245c..eb96b04 100644 --- a/src/components/Hero.js +++ b/src/components/Hero.js @@ -38,7 +38,7 @@ class Hero extends React.Component {
- +
); diff --git a/style.css b/style.css index 0717a9f..11a36fc 100644 --- a/style.css +++ b/style.css @@ -36,7 +36,13 @@ form{ text-align:center; color:red; text-shadow: #fff; + animation: blinker 2s linear infinite; } +@keyframes blinker { + 50% { + opacity: 0; + } + } p.scroll-heading, h3.scroll-heading{ text-align:center; @@ -60,8 +66,12 @@ h1.scroll-heading{ span{ display:flex; justify-content: center; + color:lightgrey; } +.movie-info{ + color: lightgrey; +} .add-to{ font-size: 10px; } @@ -82,8 +92,7 @@ span{ .hero-video{ display:flex; justify-content: center; - width: 100%; - + width: 100%; } .results{ @@ -135,6 +144,12 @@ span{ font-size: 30px; } +.fa-star:before { + content: "\f005"; + color: gold; +} + + @media screen and (min-width: 500px) { h1.scroll-heading{