<!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"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" /> <title>Fetch API</title> </head> <body> <div class="container"> <h1>Fetch API</h1> <form id="coords-form"> <label> bbox: x1 <input type="number" id="x-center-form" name="x1" value="-122.1497"/> </label> <label> bbox: x2 <input type="number" id="y-center-form" name="x2" value="37.6311"/> </label> <label> bbox: y1 <input type="number" id="y-center-form" name="y1" value="-122.1203"/> </label> <label> bbox: y2 <input type="number" id="y-center-form" name="y2" value="37.6458"/> </label> <br/><br/> <label> x point: <input type="number" id="x-form" name="x" value="-122.1419"/> </label> <label> y point: <input type="number" id="y-form" name="y" value="37.6383"/> </label> <br/><br/> <button type="submit" id="submit-btn">submit form</button> </form> <br><br> <div id="output"></div> </div> <script src="app.js"></script> </body> </html>