├── .gitignore
├── public
    ├── images
    │   ├── imdb.png
    │   ├── meta.png
    │   ├── rotten.png
    │   └── background.png
    └── css
    │   └── style.css
├── views
    ├── partials
    │   ├── footer.ejs
    │   └── header.ejs
    ├── error.ejs
    ├── homepage.ejs
    └── movieInfo.ejs
├── Readme.md
├── package.json
└── app.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | Procfile
3 | 


--------------------------------------------------------------------------------
/public/images/imdb.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsarvindhere/MoviesInfo/HEAD/public/images/imdb.png


--------------------------------------------------------------------------------
/public/images/meta.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsarvindhere/MoviesInfo/HEAD/public/images/meta.png


--------------------------------------------------------------------------------
/public/images/rotten.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsarvindhere/MoviesInfo/HEAD/public/images/rotten.png


--------------------------------------------------------------------------------
/public/images/background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsarvindhere/MoviesInfo/HEAD/public/images/background.png


--------------------------------------------------------------------------------
/views/partials/footer.ejs:
--------------------------------------------------------------------------------
1 | <footer class="footer navbar-fixed-bottom mt-auto py-3">
2 |     <div class="container">
3 |       <p class="text-muted">&copy; 2020 Arvind Rana</p>
4 |     </div>
5 |   </footer>
6 | </body>
7 | </html>


--------------------------------------------------------------------------------
/Readme.md:
--------------------------------------------------------------------------------
1 | # MoviesInfo
2 | Get Information about any Movie with a Single Click!
3 | 
4 | ## Getting Started
5 | 
6 | This Simple website was created using Node.js, Express.js and EJS (Embedded JS Templates). To get the Movies Data, OMDB Api was used.
7 | 
8 | You can see the live website here - https://moviesinfo-wpm0.onrender.com/
9 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "movies",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "app.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "author": "",
10 |   "license": "ISC",
11 |   "dependencies": {
12 |     "axios": "^0.19.2",
13 |     "body-parser": "^1.19.0",
14 |     "ejs": "^3.1.3",
15 |     "express": "^4.17.1"
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/views/error.ejs:
--------------------------------------------------------------------------------
 1 | <%- include ("partials/header") %>
 2 | 
 3 | <div class="home jumbotron">
 4 | 
 5 |     <div class="title container">
 6 |     <h1 class="display-4">OOPSIE!!</h1>
 7 |     <p class="lead">Sorry! We don't have Information About this Movie.</p>
 8 | 
 9 |     <form action="/back" method="post" style="text-align: center; padding: 2rem;">
10 |         <button type="submit" class="btn btn-dark">Search Another Movie</button>
11 |     </form>
12 |     
13 | </div>
14 |   </div>
15 | 
16 |   
17 | 
18 | <%- include ("partials/footer") %>


--------------------------------------------------------------------------------
/views/homepage.ejs:
--------------------------------------------------------------------------------
 1 | <%- include ("partials/header") %>
 2 | 
 3 | <div class="home jumbotron">
 4 | 
 5 |     <div class="title container">
 6 |     <h1 class="display-4">MoviesInfo</h1>
 7 |     <p class="lead">A Simple Website on which you can get details of a Movie by typing its name in the Search Box below.</p>
 8 |     
 9 | </div>
10 |   </div>
11 | 
12 |   
13 |   <div class="container-fluid">
14 |   <form action="/" method="post">
15 |     <div class="input-group mb-3">
16 |     <input type="text" class="form-control" placeholder="Movie Name" name="movieName">
17 |     <div class="input-group-append">
18 |       <button class="btn btn-outline-secondary" type="submit">See Details</button>
19 |     </div>
20 |   </div>
21 |   </form>
22 |   </div>
23 | 
24 | <%- include ("partials/footer") %>


--------------------------------------------------------------------------------
/views/partials/header.ejs:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |     <head>
 4 |         <meta charset="utf-8">
 5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |         <title>MovieInfo - Get Information About any Movie</title>
 7 |         <meta name="description" content="A Simple Website that you can use to get information about any Movie!">
 8 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |         <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;700&display=swap" rel="stylesheet">
10 |         <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
11 |         <link rel="stylesheet" href="/css/style.css">
12 |     </head>
13 |     <body>
14 |         <!--[if lt IE 7]>
15 |             <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
16 |         <![endif]-->
17 |         
18 |             


--------------------------------------------------------------------------------
/public/css/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: "poppins";
 3 | }
 4 | 
 5 | .title{
 6 |     text-align: center;
 7 |     
 8 | }
 9 | 
10 | .title h1 {
11 |     font-weight: 700;
12 |    
13 | }
14 | 
15 | 
16 | .container-fluid {
17 |     max-width: 80%;
18 |   }
19 | .home {
20 |     color:  white;
21 |     background-image: linear-gradient(to right,rgb(0, 0, 0, .9), rgb(0, 0, 0, .9)), url(/images/background.png);
22 |     background-size: cover;
23 |     background-position: center;
24 | }
25 | 
26 | footer {
27 |     text-align: center;
28 | }
29 | 
30 | .card-title {
31 |     font-weight: 700;
32 |     text-align: center;
33 |     font-size: 4rem;
34 | }
35 | 
36 | .movie-card {
37 |     padding: 2rem;
38 | }
39 | 
40 | 
41 | .rating-text {
42 |     font-size: 2rem;
43 | }
44 | 
45 | .rating-card {
46 |     margin-bottom: 1rem;
47 | }
48 | 
49 | .movie-plot {
50 |     margin-bottom: 2rem;
51 | }
52 | 
53 | .rating-image {
54 |     height: 50px;
55 | 
56 | }
57 | 
58 | @media (max-width: 1317px) {
59 | 
60 |     .card-title {
61 |         
62 |         font-size: 2rem;
63 |     }
64 | 
65 |     .rating-image {
66 |         height: 35px;
67 |     
68 |     }
69 | 
70 |  }
71 | 
72 | 


--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
 1 | const express = require("express");
 2 | const bodyParser = require("body-parser");
 3 | const https = require("https");
 4 | const axios = require("axios");
 5 | 
 6 | 
 7 | const app = express();
 8 | 
 9 | app.use(bodyParser.urlencoded({extended : true}));
10 | app.use(express.static('public'));
11 | app.set('view engine', 'ejs');
12 | 
13 | 
14 | app.get("/", function(req,res){
15 | 
16 |     
17 |     res.render('homepage');
18 | });
19 | 
20 | app.post("/", function(req,res){
21 |     const movieName = req.body.movieName;
22 |     const url = "https://www.omdbapi.com/?apikey=86f9dde7&t="+movieName;
23 |     axios.get(url).then(response => {
24 | 
25 |         if(response.data.Response === "True"){
26 |             res.render('movieInfo', {
27 |                 movieTitle : response.data.Title, 
28 |                 moviePlot : response.data.Plot, 
29 |                 moviePoster : response.data.Poster,
30 |                 imdbRating : typeof response.data.Ratings[0] === 'undefined'? "-/-" :response.data.Ratings[0].Value ,
31 |                 rottenRating : typeof response.data.Ratings[1] === 'undefined'? "-/-" :response.data.Ratings[1].Value ,
32 |                 metacriticRating: typeof response.data.Ratings[2] === 'undefined'? "-/-" :response.data.Ratings[2].Value ,
33 |                 genre : response.data.Genre,
34 |                 director : response.data.Director,
35 |                 language : response.data.Language,
36 |                 awards : response.data.Awards,
37 |                 rated : response.data.Rated
38 |             });
39 |         } else{
40 |             res.render('error');
41 |         }
42 | 
43 |         
44 |     })
45 | 
46 | });
47 | 
48 | app.post("/back", function(req,res){
49 |     res.redirect("/");
50 | })
51 | 
52 | app.listen(process.env.PORT || 3000, function(){
53 |     console.log("Server Started at Port 3000");
54 | });


--------------------------------------------------------------------------------
/views/movieInfo.ejs:
--------------------------------------------------------------------------------
 1 | <%- include ("partials/header") %>
 2 | <div class="fluid-container">
 3 | 
 4 |     <form action="/back" method="post" style="text-align: center; padding: 2rem;">
 5 |         <button type="submit" class="btn btn-dark">Search Another Movie</button>
 6 |     </form>
 7 | 
 8 | 
 9 |     <div class="movie-card card mb-3">
10 |         <div class="row no-gutters">
11 |           <div class="col-lg-4">
12 |             <img src="<%=moviePoster %>" class="card-img" alt="<%= movieTitle %>">
13 |           </div>
14 | 
15 | 
16 |           <div class="col-lg-8">
17 |             <div class="card-body">
18 |               <h5 class="card-title"><%= movieTitle %></h5>
19 |               <p class="movie-plot card-text text-center" ><%= moviePlot %></p>
20 |               <!-- Other Info -->
21 | 
22 |               <ul class="list-group list-group-flush" style="text-align: center; font-style: italic;">
23 |                 <li class="list-group-item">Genre &mdash; <%=genre%></li>
24 |                 <li class="list-group-item">Director &mdash; <%=director%></li>
25 |                 <li class="list-group-item">Language &mdash; <%=language%></li>
26 |                 <li class="list-group-item">Awards &mdash; <%=awards%></li>
27 |                 <li class="list-group-item">Rated &mdash; <%=rated%></li>
28 |               </ul>
29 | 
30 |               <!-- Ratings -->
31 | 
32 |               <div class="row" style="text-align: center;">
33 |                 <div class="col-sm-4">
34 |                   <div class="rating-card card">
35 |                     <div class="card-body">
36 |                       <h5 class="card-title"><img class="rating-image" src="/images/imdb.png" alt="IMDB"></h5>
37 |                       <p class=" rating-text card-text"><%=imdbRating%></p>
38 |                     </div>
39 |                   </div>
40 |                 </div>
41 |                 <div class="col-sm-4">
42 |                   <div class="rating-card card">
43 |                     <div class="card-body">
44 |                       <h5 class="card-title"><img class="rating-image" src="/images/rotten.png" alt="IMDB"></h5>
45 |                       <p class=" rating-text card-text"><%=rottenRating%></p>
46 |                     </div>
47 |                   </div>
48 |                 </div>
49 | 
50 |                 <div class="col-sm-4">
51 |                     <div class="rating-card card">
52 |                       <div class="card-body">
53 |                         <h5 class="card-title"><img class="rating-image" src="/images/meta.png" alt="IMDB"></h5>
54 |                         <p class="rating-text card-text"><%=metacriticRating%></p>
55 |                       </div>
56 |                     </div>
57 |                   </div>
58 |               </div>
59 | 
60 | 
61 |             </div>
62 |           </div>
63 | 
64 | 
65 | 
66 |         </div>
67 |       </div>
68 | 
69 | </div>
70 | 
71 | 
72 | 
73 | 
74 | 
75 | <%- include ("partials/footer") %>
76 | 


--------------------------------------------------------------------------------