SHARE
TWEET

Untitled

a guest Sep 11th, 2019 89 in 19 days
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Test Page</title>
  8.     <script src="https://code.jquery.com/jquery-3.4.1.min.js"
  9.     integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  10.     crossorigin="anonymous"></script>
  11. </head>
  12. <body>
  13.  
  14.    
  15.     <div class="jumbotron" id="container-title">
  16.         <h1 class="display-4" id="title">Beach Box</h1>
  17.         <p class="lead" id="subtitle">Organizing a weekend at the beach has never been easier!</p>
  18.  
  19.         <br><br>
  20.  
  21.         <p id="address-banner">Enter an address below to get started</p>
  22.  
  23.         <!-- User text input goes here -->
  24.         <p id="text-box">
  25.             <input id="user-input" type="text" placeholder="Address">
  26.             <button type="button" class="btn btn-primary" id="btn-submit">Submit</button>
  27.         </p>
  28.         <br>
  29. </div>
  30.     <div id = "weatherContainer">
  31.         <p>Conditions:</p>
  32.         <p1>Temperature:</p1>
  33.  
  34.     </div>
  35.        
  36.  
  37.  
  38.     <!-- link to jQuery -->
  39. <script
  40. src="https://code.jquery.com/jquery-3.4.1.js"
  41. integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  42. crossorigin="anonymous"></script>
  43.  
  44.     <!----link to weather js -->
  45. <!--<script type ="text/javascript" src="javascript/app.js"></script>-->
  46.    
  47.     <script>
  48.    
  49.     $(document).ready(function(){
  50.     $('#btn-submit').click(function(){
  51.         var userInput = $('#user-input').val();
  52.  
  53.         if (userInput != '') {
  54.  
  55.             $.ajax({
  56.  
  57.                 url: 'http://api.openweathermap.org/data/2.5/weather?q=' + userInput + '&units=imperial' + '&APPID=9b40e26591d4e0f348c8b86121312754',
  58.                 type: 'GET',
  59.                 dataType: 'jsonp',
  60.                 success:function(weather){
  61.                     console.log(weather)
  62.                     $('body').append(`<p>The weather is ${weather}`)
  63.                 }
  64.             });
  65.  
  66.         } else{ ("#error").html ('Field cannot be empty');
  67.  
  68.         }
  69.  
  70.     });
  71.  
  72. });</script>
  73.  
  74. </body>
  75. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top