API tools faq
paste
Advertisement
samimwebdev

Class-15 (weather APP) Html Code

samimwebdev
Jan 3rd, 2022
262
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 2.69 KB | None | 0 0
raw download clone embed print report
  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>Weather App</title>
  8.  
  9.     <link
  10.      rel="stylesheet"
  11.      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
  12.      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
  13.      crossorigin="anonymous"
  14.    />
  15.     <link
  16.      rel="stylesheet"
  17.      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
  18.    />
  19.   </head>
  20.  
  21.   <body>
  22.     <div class="container">
  23.       <div class="jumbotron">
  24.         <h1 class="text-center">Welcome to Weather Application</h1>
  25.  
  26.         <p class="text-muted text-center">
  27.           Now you can search weather of your city
  28.         </p>
  29.         <div id="messageWrapper"></div>
  30.  
  31.         <div class="w-form">
  32.           <form id="form">
  33.             <div class="form-group">
  34.               <label for="country">Country</label>
  35.  
  36.               <input
  37.                type="text"
  38.                class="form-control"
  39.                id="country"
  40.                placeholder="type your country to get your weather"
  41.              />
  42.               <small id="emailHelp" class="form-text text-muted"
  43.                >try your country first tow word for Ex:"BD"</small
  44.              >
  45.             </div>
  46.             <div class="form-group">
  47.               <label for="city">City</label>
  48.               <input
  49.                type="text"
  50.                class="form-control"
  51.                id="city"
  52.                aria-describedby="emailHelp"
  53.                placeholder="type your city to get your weather"
  54.              />
  55.             </div>
  56.  
  57.             <button type="submit" class="btn btn-primary" id="button">
  58.               Get Weather
  59.             </button>
  60.           </form>
  61.         </div>
  62.       </div>
  63.       <div class="row">
  64.         <div class="col-md-6 mx-auto">
  65.           <div class="card">
  66.             <div class="card-header text-center" id="w-city"></div>
  67.  
  68.             <ul class="list-group">
  69.               <li class="list-group-item text-center">
  70.                 <span class="d-block">
  71.                   <img alt="" id="w-icon" src="">
  72.                 </span>
  73.                 <span id="w-feel"></span>
  74.               </li>
  75.  
  76.               <li class="list-group-item" id="w-temp"></li>
  77.               <li class="list-group-item" id="w-pressure"></li>
  78.               <li class="list-group-item" id="w-humidity"></li>
  79.             </ul>
  80.           </div>
  81.         </div>
  82.       </div>
  83.     </div>
  84.     <script src="main.js"></script>
  85.   </body>
  86. </html>
  87.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!