diff --git a/Movie_App/index.html b/Movie_App/index.html
new file mode 100644
index 0000000..35455b6
--- /dev/null
+++ b/Movie_App/index.html
@@ -0,0 +1,23 @@
+
+
+
+
+
+
+ Movies!
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Movie_App/script.js b/Movie_App/script.js
new file mode 100644
index 0000000..72ab652
--- /dev/null
+++ b/Movie_App/script.js
@@ -0,0 +1,63 @@
+const APIURL ="https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=04c35731a5ee918f014970082a0088b1&page=1";
+const IMGPATH = "https://image.tmdb.org/t/p/w1280";
+const SEARCHAPI ="https://api.themoviedb.org/3/search/movie?&api_key=04c35731a5ee918f014970082a0088b1&query=";
+
+const main = document.getElementById('main');
+const form = document.getElementById('form');
+const search = document.getElementById('search');
+
+getMovie(APIURL);//initially get movie
+
+async function getMovie(url) {
+ const resp = await fetch(url);
+ const respData = await resp.json();
+
+ /* respData.results.forEach(movie => {
+ const img = document.createElement('img');
+ img.src = IMGPATH + movie.poster_path;
+ document.body.appendChild(img);
+ });*/
+ console.log(respData);
+ showMovies(respData.results);
+}
+
+function showMovies(movies) {
+ // clear main
+ main.innerHTML = "";
+
+ movies.forEach((movie) => {
+ const { poster_path, title, vote_average, overview } = movie;
+
+ const movieEl = document.createElement("div");
+ movieEl.classList.add("movie");
+
+ movieEl.innerHTML = `
+ 
+
+
${title}
+ ${vote_average}
+
+
+
Overview:
+ ${overview}
+
+ `;
+
+ main.appendChild(movieEl);
+ });
+}
+
+form.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ const searchTerm = search.value;
+
+ if (searchTerm) {
+ getMovie(SEARCHAPI + searchTerm);
+
+ search.value = "";
+ }
+});
\ No newline at end of file
diff --git a/Movie_App/style.css b/Movie_App/style.css
new file mode 100644
index 0000000..e7188f2
--- /dev/null
+++ b/Movie_App/style.css
@@ -0,0 +1,110 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;500;600&display=swap");
+
+*{
+ box-sizing: border-box;
+}
+
+body{
+ margin: 0;
+ font-family: 'Poppins', sans-serif ;
+ background-color: #22254b;
+}
+
+header{
+ background-color: #373b69;
+ display: flex;
+ justify-content: space-between;
+ padding: 1.5rem;
+}
+
+.search{
+ justify-content: flex-end;
+}
+
+header input{
+ padding: 0.9rem;
+ border-radius: 40px;
+ background-color: transparent;
+ font-family: inherit;
+ border: 2px solid #22254b;
+ color: rgb(238, 229, 229) ;
+ text-decoration: none;
+}
+
+header input:focus{
+ outline: none;
+ background-color: rgb(20, 28, 36);
+}
+
+header input::placeholder{
+ color: rgb(226, 202, 202)
+}
+
+main{
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-evenly;
+
+}
+.Heading{
+ text-align: center;
+ font-size: 3rem;
+ color: aliceblue;
+ margin-top: -1rem;
+ font-weight: 200;
+ margin-left: 3rem;
+
+}
+
+.movie{
+ background-color: #373b69;
+ border-radius: 3px;
+ box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);
+ overflow: hidden;
+ position: relative;
+ margin: 1rem;
+ width: 220px;
+}
+.movie img{
+ object-fit: cover;
+ height: 300px;
+ width: 100%;
+}
+
+.movie-info{
+ color: antiquewhite;
+ display: flex;
+ justify-content: space-between;
+ padding: 0.4rem;
+ align-items: center;
+ letter-spacing: 0.5px;
+}
+
+.movie-info h3{
+ margin: 0;
+}
+
+.movie-info span{
+ background-color: #22254b;
+ padding: 0.2rem 0.4rem;
+ border-radius: 3px;
+}
+
+.overview{
+ position: absolute;
+ background-color: rgb(20, 28, 36);
+ color: antiquewhite;
+ padding: 1rem 1rem;
+ max-height: 100%;
+ overflow: auto;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ transform: translateY(100%);
+ transition: transform 0.2s ease-in;
+ font-size: small;
+}
+
+.movie:hover .overview{
+ transform: translateY(0);
+}
\ No newline at end of file