diff --git a/README.md b/README.md index 788ab5a..0d3d3bf 100644 --- a/README.md +++ b/README.md @@ -1,22 +1,14 @@ -# 📊 Project: Simple API 2 +# 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. -### 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 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); +}