├── Screenshot 2022-11-08 001503.png
├── readme
├── readme.txt
├── index.html
├── script.js
└── style.css
/Screenshot 2022-11-08 001503.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sudharsanan123/Movie-reviewing-web-app/HEAD/Screenshot 2022-11-08 001503.png
--------------------------------------------------------------------------------
/readme:
--------------------------------------------------------------------------------
1 | @sudharsanan123
2 | This web page is build using on Html,Css,Javascript
3 |
4 | This show's about the movie and small discreption is added when hover the mouse over the movie
5 |
6 |
--------------------------------------------------------------------------------
/readme.txt:
--------------------------------------------------------------------------------
1 | @sudharsanan123
2 | This web page is build using on Html,Css,Javascript
3 |
4 | This show's about the movie and small discreption is added when hover the mouse over the movie
5 |
6 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Movie App
8 |
9 |
10 |
15 |
16 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | const API_URL = 'https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=3fd2be6f0c70a2a598f084ddfb75487c&page=1'
2 | const IMG_PATH = 'https://image.tmdb.org/t/p/w1280'
3 | const SEARCH_API = 'https://api.themoviedb.org/3/search/movie?api_key=3fd2be6f0c70a2a598f084ddfb75487c&query="'
4 |
5 | const main = document.getElementById('main')
6 | const form = document.getElementById('form')
7 | const search = document.getElementById('search')
8 |
9 | // Get initial movies
10 | getMovies(API_URL)
11 |
12 | async function getMovies(url) {
13 | const res = await fetch(url)
14 | const data = await res.json()
15 |
16 | showMovies(data.results)
17 | }
18 |
19 | function showMovies(movies) {
20 | main.innerHTML = ''
21 |
22 | movies.forEach((movie) => {
23 | const { title, poster_path, vote_average, overview } = movie
24 |
25 | const movieEl = document.createElement('div')
26 | movieEl.classList.add('movie')
27 |
28 | movieEl.innerHTML = `
29 | 
30 |
31 |
${title}
32 | ${vote_average}
33 |
34 |
35 |
Overview
36 | ${overview}
37 |
38 | `
39 | main.appendChild(movieEl)
40 | })
41 | }
42 |
43 | function getClassByRate(vote) {
44 | if(vote >= 8) {
45 | return 'green'
46 | } else if(vote >= 5) {
47 | return 'orange'
48 | } else {
49 | return 'red'
50 | }
51 | }
52 |
53 | form.addEventListener('submit', (e) => {
54 | e.preventDefault()
55 |
56 | const searchTerm = search.value
57 |
58 | if(searchTerm && searchTerm !== '') {
59 | getMovies(SEARCH_API + searchTerm)
60 |
61 | search.value = ''
62 | } else {
63 | window.location.reload()
64 | }
65 | })
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap');
2 |
3 |
4 | :root {
5 | --primary-color: #888ccb;
6 | --secondary-color: #868bc2;
7 | }
8 |
9 |
10 | * {
11 | box-sizing: border-box;
12 | }
13 |
14 | body {
15 | background-color: var(--primary-color);
16 | font-family: 'Poppins', sans-serif;
17 | margin: 0%;
18 | }
19 |
20 | header {
21 | padding: 1rem;
22 | display: flex;
23 | justify-content: flex-end;
24 | background-color: var(--secondary-color);
25 | }
26 |
27 |
28 |
29 | .search {
30 | background-color: transparent;
31 | border: 2px solid var(--primary-color);
32 | border-radius: 51px;
33 | font-family: inherit;
34 | font-size: 1rem;
35 | padding: 0.6rem 1rem;
36 | color: #fff;
37 | }
38 |
39 | .search::placeholder {
40 | color: #7378c5;
41 | }
42 |
43 | .search:focus {
44 | outline: none;
45 | background-color: var(--primary-color);
46 | }
47 |
48 | main {
49 | display: flex;
50 | flex-wrap: wrap;
51 | justify-content: center;
52 | }
53 |
54 | .movie {
55 | width: 300px;
56 | margin: 1rem;
57 | background-color: var(--secondary-color);
58 | box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);
59 | position: relative;
60 | overflow: hidden;
61 | border-radius: 3px;
62 | }
63 |
64 | .movie img {
65 | width: 100%;
66 | }
67 |
68 | .movie-info {
69 | color: #eee;
70 | display: flex;
71 | align-items: center;
72 | justify-content: space-between;
73 | padding: 0.5rem 1rem 1rem;
74 | letter-spacing: 0.5px;
75 | }
76 |
77 | .movie-info h3 {
78 | margin-top: 0;
79 | }
80 |
81 | .movie-info span {
82 | background-color: var(--primary-color);
83 | padding: 0.25rem 0.5rem;
84 | border-radius: 3px;
85 | font-weight: bold;
86 | }
87 |
88 | .movie-info span.green {
89 | color: lightgreen;
90 | }
91 |
92 | .movie-info span.orange {
93 | color: orange;
94 | }
95 |
96 | .movie-info span.red {
97 | color: red;
98 | }
99 |
100 | .overview {
101 | background-color: #fff;
102 | padding: 2rem;
103 | position: absolute;
104 | left: 0;
105 | bottom: 0;
106 | right: 0;
107 | max-height: 100%;
108 | transform: translateY(101%);
109 | overflow-y: auto;
110 | transition: transform 0.3s ease-in;
111 | }
112 |
113 | .movie:hover .overview {
114 | transform: translateY(0);
115 | }
116 |
--------------------------------------------------------------------------------