From fb8202cd7622d8754edaf0ab043af562ff16a6e5 Mon Sep 17 00:00:00 2001 From: Fadma1234 Date: Sat, 4 Oct 2025 16:10:36 -0400 Subject: [PATCH 1/6] 'done' --- index.html | 34 ++++++++++++++ main.js | 33 ++++++++++++++ style.css | 128 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 195 insertions(+) create mode 100644 index.html create mode 100644 main.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..d9128e1 --- /dev/null +++ b/index.html @@ -0,0 +1,34 @@ + + + + + + + + + Simpleapi2 + + + + + + + +
+

Retrieve all names of movies in which Owen Wilson says "wow."

+

Enter movie name

+ + + + +

character

+

full line

+ +
current wow in movie
+ + +
+ + + + \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 0000000..c842559 --- /dev/null +++ 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; +}) + + + +} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..c67f554 --- /dev/null +++ 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); +} From ff3b9268f7a083336684efa5bbe0592e4b78bd31 Mon Sep 17 00:00:00 2001 From: Fadma Belkhouraf Date: Tue, 7 Oct 2025 14:30:35 -0400 Subject: [PATCH 2/6] Update README.md --- README.md | 27 +++++++++------------------ 1 file changed, 9 insertions(+), 18 deletions(-) diff --git a/README.md b/README.md index 788ab5a..d4d8b33 100644 --- a/README.md +++ b/README.md @@ -1,22 +1,13 @@ -# 📊 Project: Simple API 2 +# 📊 Project:Retrieve all names of movies in which Owen Wilson says "wow." ### Goal: Display data returned from an api -### How to submit your code for review: +### **Tech Stack:** +- **HTML** - For the structure. +- **CSS** - For styling. +- **JavaScript** - For API requests and displaying data. -- 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... -``` +### **How to View:** +1. Download or clone this repo. +2. Open `index.html` in your browser. +3. Click the link on the right under **About** to see the live demo. From 6138146ca442267ab648bb0ecde4be86b4486710 Mon Sep 17 00:00:00 2001 From: Fadma Belkhouraf Date: Fri, 7 Nov 2025 12:05:33 -0500 Subject: [PATCH 3/6] Add image to project README Added an image to the README for better visualization. --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index d4d8b33..85d42c1 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,5 @@ -# 📊 Project:Retrieve all names of movies in which Owen Wilson says "wow." +# Project:Retrieve all names of movies in which Owen Wilson says "wow." +image ### Goal: Display data returned from an api From ad68cad577f4000d2115e177b6378186e3cef02c Mon Sep 17 00:00:00 2001 From: Fadma Belkhouraf Date: Mon, 10 Nov 2025 12:29:53 -0500 Subject: [PATCH 4/6] Update README.md --- README.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 85d42c1..880b259 100644 --- a/README.md +++ b/README.md @@ -3,12 +3,12 @@ ### Goal: Display data returned from an api -### **Tech Stack:** -- **HTML** - For the structure. -- **CSS** - For styling. -- **JavaScript** - For API requests and displaying data. - -### **How to View:** -1. Download or clone this repo. -2. Open `index.html` in your browser. -3. Click the link on the right under **About** to see the live demo. +### Tech Stack +- HTML + +- CSS + +- JavaScript + +### Live Demo +Click the link on the right under About to see the live demo. From f6c37adcb7697ef08277b810a14dad8c2b7f0c6b Mon Sep 17 00:00:00 2001 From: Fadma Belkhouraf Date: Fri, 14 Nov 2025 18:12:36 -0500 Subject: [PATCH 5/6] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 880b259..e48f109 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ -# Project:Retrieve all names of movies in which Owen Wilson says "wow." +# Project:names of movies in which Owen Wilson says "wow." image -### 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. ### Tech Stack - HTML From 4af9279fe8b5b543a468ba920629fe5ceaae238c Mon Sep 17 00:00:00 2001 From: Fadma Belkhouraf Date: Fri, 14 Nov 2025 18:13:02 -0500 Subject: [PATCH 6/6] Fix README title formatting --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index e48f109..0d3d3bf 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# Project:names of movies in which Owen Wilson says "wow." +# Project: Names of movies in which Owen Wilson says "wow." image 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.