How would I get my code to let the user submit a breed of dog and return pictures of the specific breed
Question
i've been teaching myself to code for 3 months so forgive me if my question is hard to understand. I added a search bar in my app (I think my html code for the search bar is correct but I would appreciated it someone took a look at it) and I was trying to find out how I can make my app load a single random image for a specific breed, based on a user input, and also make the app account for the happy case when the breed is found, as well as the unhappy case when it is not.
heres a link straight to it but the code can also be ran through this post.What do I need to add to my js?
`
'use strict'; function getDogImage() { fetch('https://dog.ceo/api/breed/hound/images/random') .then(response => response.json()) .then(responseJson => displayResults(responseJson)) .catch(error => alert('Something went wrong. Try again later.')); } function displayResults(responseJson) { console.log(responseJson); //replace the existing image with the new one $('.results-img').replaceWith( `<img src="${responseJson.message}" class="results-img">` ) //display the results section $('.results').removeClass('hidden'); } function watchForm() { $('form').submit(event => { event.preventDefault(); getDogImage(); }); } $(function() { console.log('App loaded! Waiting for submit!'); watchForm(); });
* { box-sizing: border-box; } body { font-family: 'Roboto', sans-serif; } .container { max-width: 600px; margin: 0 auto; } .hidden { display: none; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Dog API Example</title> <link rel="shortcut icon" href=""> <link rel="stylesheet" href="index.css"> </head> <body> <div class="container"> <h1>Dog API: A Simple Example</h1> <form> <label for="breed">Breed</label> <input type="search" name="phone" id="breed" placeholder="Enter Breed" title="dog breeds"/> <input type="submit" value="Get a dog pic!"> </form> <section class="results hidden"> <h2>Look at this dog!</h2> <img class="results-img" alt="placeholder"> </section> </div> <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script> <script src="index.js"></script> </body> </html>
1 answers
solution1
0 2019-09-16 02:03:51
So, what you need to do is
- read the entered breed from #breed element
- pass that to
getDogImage - accept an argument in
getDogImage...lets call itbreed - use this entered breed as the value after
breedin the URL path ... eg.../api/breed/dingo/images
See following, tested and working, code
'use strict'; function getDogImage(breed) { fetch(`https://dog.ceo/api/breed/${breed}/images/random`) .then(response => response.json()) .then(responseJson => displayResults(responseJson)) .catch(error => alert('Something went wrong. Try again later.')); } function displayResults(responseJson) { console.log(responseJson); //replace the existing image with the new one $('.results-img').replaceWith( `<img src="${responseJson.message}" class="results-img">` ) //display the results section $('.results').removeClass('hidden'); } function watchForm() { $('form').submit(event => { event.preventDefault(); getDogImage($('#breed').val()); }); } $(function() { console.log('App loaded! Waiting for submit!'); watchForm(); });
* { box-sizing: border-box; } body { font-family: 'Roboto', sans-serif; } .container { max-width: 600px; margin: 0 auto; } .hidden { display: none; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Dog API Example</title> <link rel="shortcut icon" href=""> <link rel="stylesheet" href="index.css"> </head> <body> <div class="container"> <h1>Dog API: A Simple Example</h1> <form> <label for="breed">Breed</label> <input type="search" name="phone" id="breed" placeholder="Enter Breed" title="dog breeds"/> <input type="submit" value="Get a dog pic!"> </form> <section class="results hidden"> <h2>Look at this dog!</h2> <img class="results-img" alt="placeholder"> </section> </div> <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script> <script src="index.js"></script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
JS how to return the dogs that match a select breed?
Algorithm to select pet breed / cars / bikes / etc from database based on user answers
How can I return user to a specific div working with current code
How would i clear an EmailJS form after the user hits submit?
How do i get my code to return the result on time
let user get direction to specific location from his location in my website
How would I validate my Scrolling List with my current code?
How would I save my Javascript objects with JSON/PHP/Mysql, to re-load them upon user return?
Meteor: Multiple submit forms or any event that would let me extract data from my template?
How would I get a specific portion of a regex expression?
Related Tags