Dave Gwynne-Evans

All generations.

Generate a web page that Allows a user to submit a comma-separated coordinate obtain an altitude from the given coordinate Display that altitude in the box next to the coordinate

<!DOCTYPE html> <html> <head> <title>Altitude</title> <script type="text/javascript" src="jquery-3.1.1.min.js"></script> <style> label { display: inline-block; width: 100px; text-align: right; margin-right: 5px; } </style> <script> $(document).ready(function(){ $('#btn').click(function(){ var that = $(this); var formdata = $('#altitude-form').serialize(); $.ajax({ type: 'POST', url: 'altitude_handler.php', data: formdata, dataType: 'text', success: function(result) { $('#content').text(result); } }); }); }); </script> </head> <body> <div class="container"> <h1>Altitude</h

obtain an altitude from a given coordinate

function getAltitude (lat, lng) { let api = `http://maps.googleapis.com/maps/api/elevation/json?locations=${lat},${lng}&sensor=false`; $.get(api, function (data) { if (data.status == 'OK') { // response(data.results[0].elevation); console.log(data.results[0].elevation); } else { console.log(data.status); } }); }

Generate a web page that Allows a user to submit a comma-separated coordinate obtain an altitude from the given coordinate Display that altitude in the box next to the coordinate

<!DOCTYPE html> <html> <head> <style> .container{ display: flex; justify-content: space-around; } .container div{ flex: 0 1 20%; } </style> </head> <body> <div class="container"> <div> <p> Coordinates: </p> <input type="text" id="coordinates" value=""> </div> <div> <p> Altitude </p> <input type="text" id="altitude" value=""> </div> <div> <button id="submit">Submit</button> </div> </div> </body> </html>

Want to kickstart your project?Use the new AI Studio to create your code