diff --git a/movie-app/index.html b/movie-app/index.html
new file mode 100644
index 0000000..b607834
--- /dev/null
+++ b/movie-app/index.html
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+ Movie App
+
+
+
+
+
+
+
+
+
diff --git a/movie-app/script.js b/movie-app/script.js
new file mode 100644
index 0000000..469f141
--- /dev/null
+++ b/movie-app/script.js
@@ -0,0 +1,65 @@
+const API_URL = 'https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=3fd2be6f0c70a2a598f084ddfb75487c&page=1'
+const IMG_PATH = 'https://image.tmdb.org/t/p/w1280'
+const SEARCH_API = 'https://api.themoviedb.org/3/search/movie?api_key=3fd2be6f0c70a2a598f084ddfb75487c&query="'
+
+const main = document.getElementById('main')
+const form = document.getElementById('form')
+const search = document.getElementById('search')
+
+// Get initial movies
+getMovies(API_URL)
+
+async function getMovies(url) {
+ const res = await fetch(url)
+ const data = await res.json()
+
+ showMovies(data.results)
+}
+
+function showMovies(movies) {
+ main.innerHTML = ''
+
+ movies.forEach((movie) => {
+ const { title, poster_path, vote_average, overview } = movie
+
+ const movieEl = document.createElement('div')
+ movieEl.classList.add('movie')
+
+ movieEl.innerHTML = `
+ 
+
+
${title}
+ ${vote_average}
+
+
+
Overview
+ ${overview}
+
+ `
+ main.appendChild(movieEl)
+ })
+}
+
+function getClassByRate(vote) {
+ if(vote >= 8) {
+ return 'green'
+ } else if(vote >= 5) {
+ return 'orange'
+ } else {
+ return 'red'
+ }
+}
+
+form.addEventListener('submit', (e) => {
+ e.preventDefault()
+
+ const searchTerm = search.value
+
+ if(searchTerm && searchTerm !== '') {
+ getMovies(SEARCH_API + searchTerm)
+
+ search.value = ''
+ } else {
+ window.location.reload()
+ }
+})
\ No newline at end of file
diff --git a/movie-app/style.css b/movie-app/style.css
new file mode 100644
index 0000000..6dda33f
--- /dev/null
+++ b/movie-app/style.css
@@ -0,0 +1,109 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap');
+
+:root {
+ --primary-color: #22254b;
+ --secondary-color: #373b69;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+body {
+ background-color: var(--primary-color);
+ font-family: 'Poppins', sans-serif;
+ margin: 0;
+}
+
+header {
+ padding: 1rem;
+ display: flex;
+ justify-content: flex-end;
+ background-color: var(--secondary-color);
+}
+
+.search {
+ background-color: transparent;
+ border: 2px solid var(--primary-color);
+ border-radius: 50px;
+ font-family: inherit;
+ font-size: 1rem;
+ padding: 0.5rem 1rem;
+ color: #fff;
+}
+
+.search::placeholder {
+ color: #7378c5;
+}
+
+.search:focus {
+ outline: none;
+ background-color: var(--primary-color);
+}
+
+main {
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.movie {
+ width: 300px;
+ margin: 1rem;
+ background-color: var(--secondary-color);
+ box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);
+ position: relative;
+ overflow: hidden;
+ border-radius: 3px;
+}
+
+.movie img {
+ width: 100%;
+}
+
+.movie-info {
+ color: #eee;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0.5rem 1rem 1rem;
+ letter-spacing: 0.5px;
+}
+
+.movie-info h3 {
+ margin-top: 0;
+}
+
+.movie-info span {
+ background-color: var(--primary-color);
+ padding: 0.25rem 0.5rem;
+ border-radius: 3px;
+ font-weight: bold;
+}
+
+.movie-info span.green {
+ color: lightgreen;
+}
+
+.movie-info span.orange {
+ color: orange;
+}
+
+.movie-info span.red {
+ color: red;
+}
+
+.overview {
+ background-color: #fff;
+ padding: 2rem;
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ max-height: 100%;
+ transform: translateY(101%);
+ transition: transform 0.3s ease-in;
+}
+
+.movie:hover .overview {
+ transform: translateY(0);
+}