jquery - Mars Rover Images AJAX Request -
`
function displayimages(response) { $('#roverimages').empty(); for(var =0; < 9; i++){ var li = $('<li>'); var image = $('<img src=' + response.photos[i].img_src + '>').addclass( "image-popup" ); li.append(image); $("#roverimages").append(li); } }<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>nasapi</title> <link rel="stylesheet" type="text/css" href="assets/css/reset.css"> <link rel="stylesheet" type="text/css" href="assets/css/style.css"> <link rel="shortcut icon" href="assets/images/favicon.png" type="image/x-icon"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- latest compiled , minified css --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-bvyiisifek1dgmjrakycuhahrg32omucww7on3rydg4va+pmstsz/k68vbdejh4u" crossorigin="anonymous"> </head> <body> <!-- jumbotron --> <div id="header" class="jumbotron"> <div class="container"> <!-- <p><a href="https://en.wikipedia.org/wiki/spirit_(rover)" target="_blank"><img src="assets/images/rover.png" class="rover"></a></p> --> <!-- <p class="txtrover">mer-a spirit rover</p> --> <h1 class="txtjumbo" id="txttitle">nasapi</h1> <p class="txtjumbo">welcome our nasa api web app!</p> <p> <a id="button" href="#" class="btn btn-primary btn-lg">mer rovers</a><button id="apodbutton" class="btn btn-lg btn-primary">astronomy picture of day</button> </p> <p class="quote">“it’s fixer-upper of planet make work.” - elon musk, ceo of spacex</p> <p id="mp3_player"> <audio src="assets/music/interstellar.mp3" preload="auto" /> </p> </div> </div> <!-- end jumbotron --> <!-- main --> <div class="main" id="main-layout"> <div class="row"> <div id="roverrow" class="col-lg-3 col-md-3"> <h1 class="main-text">choose rover</h1> <h4 class="main-text-sol">sol</h4> <div id="sol-date" class="main-text-sol-day">0</div> <input id="sol-selector" type="range" value=1 max=1656 min=1 /> <p><img src="assets/images/curiosity.jpg" alt="curiosity rover" class="curiosityimage"> <button id="curiosity" class="btn btn-lg btn-primary btn-center">curiosity rover</button> </p> <p><img src="assets/images/spirit.jpg" alt="spirit rover" class="spiritimage"> <button id="spirit" class="btn btn-lg btn-primary btn-center">spirit rover</button> </p> <p><img src="assets/images/opportunity.jpg" alt="opportunity rover" class="opportunityimage"> <button id="opportunity" class="btn btn-lg btn-primary btn-center">opportunity rover</button> </p> </div> <div id="getroverimages" class="col-lg-9 col-md-9"> <h1 class="main-text">nasa api documentation</h1> <ul id="roverimages"> </ul> </div> <!-- end main --> <!-- apod section --> <div id="apod" class="apod"> <div class="container"> <h1 id="apod-text" class="apod-text">astronomy picture of day</h1> <p><div><input id="date" type="text" class="form-control" placeholder="yyyy-mm-dd"></div><button id="buttonsubmit" class="btn btn-lg btn-primary btn-block">submit</button></p> <div id="result"></div> </div> </div> <script src="assets/music/audiojs/audio.min.js"></script> <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js"></script> <!-- latest compiled , minified javascript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-tc5iqib027qvyjsmfhjomalkfuwvxzxupncja7l2mcwnipg9mgcd8wgnicpd7txa" crossorigin="anonymous"></script> <script type="text/javascript" src="assets/javascript/app.js"></script> </body> </html>very new coding & trying make simple web app makes ajax request nasas mars rover api images each mars rovers curiosity, spirit, , opportunity. code seems work hard coding exact sol date. question how can app work toggle created (just used 1 http://www.cssportal.com/style-input-range/) user can toggle through sol days , choose 1 want app more interactive.
function roverdata(name) { var sol = 200; //$("#sol"); $.ajax({ url: 'https://api.nasa.gov/mars-photos/api/v1/rovers/' + name.tolowercase() +'/photos?sol='+ sol +'&api_key=u8vy57tt0ukbmxetrwoifrbm7cmdi2esturqaj72', method: "get", }) .done(function(response) { console.log(response); displayimages(response); }); } $("#curiosity").on("click", function() { roverdata("curiosity"); }); $("#spirit").on("click", function() { roverdata("spirit"); }); $("#opportunity").on("click", function() { roverdata("opportunity"); }); $("#sol-selector").on('change', function() { $("#sol-date").text($(this).val()) }) function soldays(response) { $("#sol-date").attr('max', res.photo_manifest.max_sol); }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
you can access vaue of range input $('#sol').val().
function roverdata(name, sol) { console.log(name.tolowercase(), sol); $.ajax({ url: 'https://api.nasa.gov/mars-photos/api/v1/rovers/' + name.tolowercase() + '/photos?sol=' + sol + '&api_key=u8vy57tt0ukbmxetrwoifrbm7cmdi2esturqaj72', method: "get", }) .done(function(response) { console.log(response); displayimages(response); }); } $("#show").on("click", function() { roverdata($('#rover').val(), $('#sol').val()); });<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="range" id="sol" min="1" max="500" value="200"> <select id="rover"> <option value="curiosity">curiosity</option> <option value="spirit">spirit</option> <option value="opportunity">opportunity</option> </select> <input id="show" value="show" type="button" />
Comments
Post a Comment