diff --git a/my code/17-movie-app/index.html b/my code/17-movie-app/index.html
new file mode 100644
index 0000000..df585da
--- /dev/null
+++ b/my code/17-movie-app/index.html
@@ -0,0 +1,28 @@
+
+
+
+
+
+
+
+ 17 movie app
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/my code/17-movie-app/script.js b/my code/17-movie-app/script.js
new file mode 100644
index 0000000..b941892
--- /dev/null
+++ b/my code/17-movie-app/script.js
@@ -0,0 +1,96 @@
+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="';
+
+async function fetchURL(url) {
+ const res = await fetch(url);
+ const data = await res.json();
+
+ return data;
+}
+
+fetchURL(API_URL).then((data) => {
+ displayData(data.results);
+});
+
+const form = document.getElementById("form");
+const search = document.getElementById("search");
+let searchVal = "";
+form.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ searchVal = search.value;
+
+ fetchURL(SEARCH_API + searchVal).then((data) => {
+ displayData(data.results);
+ });
+});
+
+function displayData(data) {
+ const wrapper = document.getElementById("wrapper");
+ wrapper.innerHTML = "";
+
+ data.forEach((movie) => {
+ const { title, overview, poster_path, vote_average } = movie;
+
+ const divContainer = document.createElement("div");
+ divContainer.classList.add("movie-container");
+
+ const posterContainer = document.createElement("div");
+ posterContainer.classList.add("poster-container");
+
+ const img = document.createElement("img");
+ img.src = IMG_PATH + poster_path;
+
+ const info = document.createElement("div");
+ info.classList.add("info-container");
+
+ const movieTitle = document.createElement("span");
+ movieTitle.classList.add("title");
+ movieTitle.append(document.createTextNode(title));
+
+ const rating = document.createElement("span");
+ rating.classList.add("rating");
+ rating.append(document.createTextNode(vote_average));
+ if (+vote_average >= 8) {
+ rating.style.color = "lightgreen";
+ } else if (+vote_average >= 5) {
+ rating.style.color = "orange";
+ } else {
+ rating.style.color = "red";
+ }
+
+ const overviewContainer = document.createElement("div");
+ overviewContainer.classList.add("overview-container");
+
+ const overviewTitle = document.createElement("span");
+ overviewTitle.classList.add("overview-title");
+ overviewTitle.append(document.createTextNode("Overview"));
+
+ const p = document.createElement("p");
+ p.append(document.createTextNode(overview));
+
+ overviewContainer.append(overviewTitle);
+ overviewContainer.append(p);
+
+ info.append(movieTitle);
+ info.append(rating);
+
+ posterContainer.append(img);
+
+ divContainer.append(posterContainer);
+ divContainer.append(info);
+ divContainer.append(overviewContainer);
+
+ wrapper.append(divContainer);
+
+ divContainer.addEventListener("mouseover", () => {
+ overviewContainer.classList.add("lift");
+ });
+ divContainer.addEventListener("mouseout", () => {
+ overviewContainer.classList.remove("lift");
+ });
+ });
+}
diff --git a/my code/17-movie-app/style.css b/my code/17-movie-app/style.css
new file mode 100644
index 0000000..8831684
--- /dev/null
+++ b/my code/17-movie-app/style.css
@@ -0,0 +1,95 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
+
+* {
+ margin: 0;
+ padding: 0;
+}
+
+body {
+ background-color: #22254b;
+ font-family: "Poppins", sans-serif;
+}
+
+nav {
+ background-color: #373b69;
+ padding: 20px;
+ text-align: end;
+}
+
+input#search {
+ background-color: transparent;
+ padding: 15px 20px;
+ color: #fff;
+ border: 2px solid #22254b;
+ border-radius: 40px;
+ font-size: 16px;
+ outline: none;
+ font-family: "Poppins", sans-serif;
+}
+
+input#search:focus {
+ background-color: #22254b;
+}
+
+input#search::-ms-clear {
+ display: none;
+}
+
+.movie-container {
+ display: inline-block;
+ width: 300px;
+ height: 550px;
+ overflow: hidden;
+ border-radius: 5px;
+ box-shadow: 0 4px 10px rgb(0 0 0 / 40%);
+ background-color: #373b69;
+ margin: 15px;
+ position: relative;
+}
+
+.poster-container img {
+ width: 100%;
+}
+
+.info-container {
+ padding: 10px 15px;
+ display: flex;
+ justify-content: space-between;
+ font-weight: 600;
+}
+
+.title {
+ color: #fff;
+ font-size: 18px;
+ margin-right: 10px;
+}
+
+.rating {
+ padding: 5px 8px;
+ display: inline-block;
+ font-size: 16px;
+ background-color: rgba(0, 0, 0, 0.4);
+ border-radius: 3px;
+ height: fit-content;
+}
+
+.overview-container {
+ position: absolute;
+ top: 100%;
+ width: calc(100% - 60px);
+ transition: transform 0.15s linear;
+ padding: 30px;
+ background-color: #fff;
+ font-size: 17px;
+}
+
+.overview-title {
+ font-size: 20px;
+ font-weight: 600;
+ margin-bottom: 20px;
+ display: inline-block;
+}
+
+.overview-container.lift {
+ transform: translateY(-100%);
+}