Resilient-Labs · Fadma1234 · Oct 4, 2025 · Oct 7, 2025 · Nov 7, 2025 · Nov 10, 2025
diff --git a/README.md b/README.md
@@ -1,22 +1,14 @@
-# 📊 Project: Simple API 2
+# Project: Names of movies in which Owen Wilson says "wow."
+<img width="1920" alt="image" src="https://github.com/user-attachments/assets/ba348d77-9c78-42e6-9a38-a0c5b8f79436" />
 
-### Goal: Display data returned from an api
+This project provides the client-side logic for a web application that interacts with the Owen Wilson "Wow" API. It allows users to input a specific movie title, which is used to construct a fetch request to the API's random endpoint. The code then processes the returned JSON data, dynamically updating the webpage's DOM elements to display a relevant movie poster, the character's name, the specific line spoken, the associated audio file for playback, and the sequence count of that "wow" within the film, effectively showcasing user-driven API consumption and dynamic content rendering.
 
-### How to submit your code for review:
+### Tech Stack
+- HTML
 
-- 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!
+- CSS
+
+- JavaScript
 
-Example:
-```
-I completed the challenge: 5
-I feel good about my code: 4
-I'm not sure if my constructors are setup cleanly...
-```
+### Live Demo
+Click the link on the right under About to see the live demo.
diff --git a/index.html b/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<meta name="description" content="This is where your description goes">
+	<meta name="keywords" content="one, two, three">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Simpleapi2</title>
+
+	<!-- external CSS link -->
+	<!-- <link rel="stylesheet" href="css/normalize.css"> -->
+	<link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+	<main>
+		<h1>Retrieve all names of movies in which Owen Wilson says "wow."</h1>
+		<h2>Enter movie name</h2>
+		<input class="lo" type="text" name="" value="">
+		<button class="lo"type="button" name="button">Get movie</button>
+
+
+		<h3>character</h3>
+		<h4>full line</h4>
+          <audio controls src=""></audio>
+          <h5>current wow in movie</h5>
+          <img src="" alt="">
+
+	</main>
+	<script type="text/javascript" src="main.js"></script>
+</body>
+
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,33 @@
+//psuedo code
+//found my working key and tested it on postman https://owen-wilson-wow-api.onrender.com/wows/random?results=5
+//build my code starting with my event listener to make my function run
+//create my function
+//create my variables inside my function 
+//console log my variables to make sure evrything is working before I move on
+//create my fetch to get my json object back
+//get my data readable using then
+//console log the data to see what it gives back in console to use it in my code in get the right data I need
+//create a catch to run when an error comes in
+document.querySelector('button').addEventListener('click',getV);
+
+
+function getV(){
+    const movie = document.querySelector('input').value;
+const url = `https://owen-wilson-wow-api.onrender.com/wows/random?movie=${movie}`;
+
+fetch(url)
+.then(res => res.json())
+.then(data =>{
+    console.log(data)
+
+
+            document.querySelector('h3').innerText=data[0].character;
+            document.querySelector('img').src=data[0].poster;
+            document.querySelector('h4').innerText=data[0].full_line;
+            document.querySelector('audio').src=data[0].audio;
+            document.querySelector('h5').innerText=data[0].current_wow_in_movie;  
+})
+
+
+
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,128 @@
+/* used google hepl to style my project */
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+/* Set basic font and background properties for the entire page */
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  background-color: #121212; /* Dark background */
+  color: #e0e0e0; /* Light text */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+}
+
+/* Style the main container to center and constrain content */
+main {
+  background-color: #1f1f1f;
+  padding: 2rem;
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+  width: 90%;
+  max-width: 600px;
+  text-align: center;
+}
+
+/* Style the main heading */
+h1 {
+  font-size: 2rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+  color: #ffc107; /* Gold accent color */
+}
+
+/* Style the subheadings */
+h2 {
+  font-size: 1.2rem;
+  margin-bottom: 1.5rem;
+  color: #bdbdbd;
+}
+
+/* Style the input field and button for a modern look */
+.lo {
+  font-size: 1rem;
+  padding: 0.75rem 1rem;
+  border-radius: 8px;
+  border: 2px solid #333;
+  transition: all 0.3s ease;
+}
+
+/* Style the input field */
+input.lo {
+  width: calc(100% - 130px); /* Adjust width to fit next to the button */
+  background-color: #333;
+  color: #e0e0e0;
+  margin-right: 10px;
+}
+
+/* Style the button */
+button.lo {
+  background-color: #ffc107;
+  color: #121212;
+  font-weight: bold;
+  cursor: pointer;
+  border: none;
+}
+
+/* Add hover effects for interactivity */
+input.lo:focus {
+  border-color: #ffc107;
+  outline: none;
+  background-color: #444;
+}
+
+button.lo:hover {
+  background-color: #ffca2c;
+  transform: translateY(-2px);
+}
+
+/* Style the iframe for a clean embedded look */
+iframe {
+  display: block;
+  width: 100%;
+  height: 250px; /* Adjust height as needed */
+  margin: 2rem 0;
+  border-radius: 8px;
+  background-color: #333;
+  border: none;
+}
+
+/* Style the dynamic content sections */
+h3, h4, h5 {
+  font-size: 1rem;
+  margin-top: 1rem;
+  color: #bdbdbd;
+  text-transform: uppercase;
+}
+
+h4 {
+  font-style: italic;
+  font-size: 1.1rem;
+  color: #fff;
+  margin-top: 0.5rem;
+}
+
+h5 {
+  font-size: 0.9rem;
+  color: #757575;
+}
+
+/* Style the audio player */
+audio {
+  width: 100%;
+  margin-top: 1rem;
+}
+
+/* Style the image container */
+img {
+  max-width: 100%;
+  height: auto;
+  margin-top: 1.5rem;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
+}