Resilient-Labs · ishelvirakeira · Oct 7, 2025 · Oct 7, 2025 · Oct 7, 2025 · Oct 7, 2025
diff --git a/README.md b/README.md
@@ -2,21 +2,15 @@
 
 ### Goal: Use data returned from one api to make a request to another api and display the data returned
 
-### How to submit your code for review:
-
-- Fork and clone this repo
-- Create a new branch called answer
-- Checkout answer branch
-- Push to your fork
-- Issue a pull request
-- Your pull request description should contain the following:
-  - (1 to 5 no 3) I completed the challenge
-  - (1 to 5 no 3) I feel good about my code
-  - Anything specific on which you want feedback!
-
-Example:
-```
-I completed the challenge: 5
-I feel good about my code: 4
-I'm not sure if my constructors are setup cleanly...
-```
+This Movie/Wiki API project allows users to enter the title of any movie and fetch information about it from two APIs: IMDB API which provides the movie's title, poster image and release year and Wikipedia API which provides a short summary of the movie and a link to the full Wikipedia page. The information is displayed in the DOM. 
+
+Find the live demo at https://ishelvirakeira.github.io/complex-api-bootcamp/
+
+Example of a movie: 
+
+<img width="530" height="430" alt="Barbie" src="https://github.com/user-attachments/assets/843b74eb-07b9-46a4-8cf2-000973ce129c" />
+
+
+Tools used: HTML, CSS, JavaScript, Postman, APIs
+
+I learned how to fetch data from multiple APIs and combine information from different sources to create a well-structured user experience.
diff --git a/index.html b/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang = "en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Complex Movie/Wiki API</title>
+        <link rel="stylesheet" href="style.css">
+    </head>
+    <body>
+
+        <h1>Find A Movie To Watch</h1>
+        <input type="text" name="text" placeholder="Enter a movie title">
+
+        <button type="button" name="button">Get Movie</button>
+        <h2>Movie Title</h2>
+
+        <img src="" alt="">
+        <p>Release Year:<div class="releaseYear"></div></p>
+        <p>Plot:<div class="summary"></div></p>
+        <div class="results"></div>
+
+
+        <script type="text/javascript" src="main.js"></script>
+
+    </body>
+
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,54 @@
+//fetch movie info and Wikipedia summary
+
+document.querySelector('button').addEventListener('click', getMovie);
+function getMovie(){
+    const title = document.querySelector('input').value;
+    const url= `https://imdb.iamidiotareyoutoo.com/search?q=${encodeURIComponent(title)}`;//learned the encode part from Karim
+//movie result
+    fetch(url)
+    .then(res => res.json())
+    .then(data => {
+        console.log(data)
+        document.querySelector('h2').innerText = data.description[0]["#TITLE"];
+        //getting the image poster in the DOM
+        document.querySelector('img').src = data.description[0]["#IMG_POSTER"];
+        //getting the release year in the DOM
+        document.querySelector('.releaseYear').innerText = data.description[0]["#YEAR"];
+
+        //fetch from Wikipedia the title of the movie and get the summary of that movie in the DOM
+        const wikiUrl = `https://en.wikipedia.org/api/rest_v1/page/summary/${encodeURIComponent(data.description[0]["#TITLE"])}`;
+
+        fetch(wikiUrl)
+        .then(res => res.json())
+        .then(wikiData =>{
+            console.log(wikiData);
+            document.querySelector('.summary').innerText = wikiData.extract;
+            document.querySelector('.results').innerHTML = `<a href="${wikiData.content_urls.desktop.page}">Read more on Wikipedia</a>`;
+
+
+        })
+
+        .catch(err=>{
+            console.log(`error ${err}`);
+        })
+
+    })
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/style.css b/style.css
@@ -0,0 +1,121 @@
+* {
+  box-sizing: border-box;
+
+}
+
+body {
+  font-family: 'Arial', sans-serif;
+  background: rgb(230, 230, 204);
+  color: orange;
+  text-align: center;
+  padding: 20px;
+  font-size: 30px;
+}
+
+h1 {
+  margin-bottom: 20px;
+  font-size: 2rem;
+  color: rgb(211, 162, 71);
+  text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
+}
+
+input[type="text"] {
+  padding: 10px 15px;
+  font-size: 1rem;
+  border-radius: 5px;
+  margin-right: 10px;
+  width: 250px;
+  max-width: 80%;
+}
+
+button {
+  padding: 10px 20px;
+  font-size: 19px;
+  border: none;
+  border-radius: 5px;
+  background-color: rgb(214, 165, 74);
+  color: rgb(114, 110, 110);
+  cursor: pointer;
+
+}
+
+button:hover {
+  background-color: rgb(183, 183, 143);
+}
+
+h2 {
+  margin: 20px 0 10px 0;
+  font-size: 20px;
+  color:rgb(129, 101, 50);
+}
+
+img {
+  max-width: 500px;
+  height: auto;
+  border-radius: 10px;
+  margin: 15px 0;
+  box-shadow: 0px 0px 15px rgba(0,0,0,0.5);
+}
+
+/* Release year and plot */
+.releaseYear, .summary {
+  display: block;
+  margin: 10px 0;
+  font-size: 1rem;
+  color: rgb(82, 82, 39);
+  line-height: 2;
+}
+
+.results a {
+  color: #433e31;
+  text-decoration: none;
+  font-weight: bold;
+}
+
+.results a:hover {
+  text-decoration: underline;
+}
+.results{
+    padding: 20px;
+
+}
+
+/* Responsiveness */
+@media (max-width: 768px) {
+  input[type="text"] {
+    width: 60%;
+    margin-bottom: 10px;
+  }
+
+  button {
+    width: 35%;
+    margin-bottom: 15px;
+  }
+
+  img {
+    max-width: 250px;
+  }
+
+  h1 {
+    font-size: 1.8rem;
+  }
+}
+
+@media (max-width: 480px) {
+  input[type="text"], button {
+    width: 90%;
+    margin-bottom: 10px;
+  }
+
+  img {
+    max-width: 200px;
+  }
+
+  h1 {
+    font-size: 20px;
+  }
+
+  .summary, .releaseYear {
+    font-size: 15px;
+  }
+}