API tools faq
paste
joelnazarene

weather

joelnazarene
May 6th, 2019
70
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 2.80 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3.  
  4.   <script src="linkers/weather.js"></script>
  5.   <style>
  6.   body {
  7.   background-image:url("http://cdn.animalhi.com/3840x2160/20180510/5af4ca563ad2f.jpg") ;
  8.   height: 100%;
  9.  
  10.   /* Center and scale the image nicely */
  11.   background-position: center;
  12.   background-repeat: no-repeat;
  13.   background-size: cover;
  14.   color: white;
  15.  
  16. }
  17. text{
  18.  
  19. color:red;
  20.  
  21.  
  22. }
  23.  
  24. button{
  25.  
  26. background-color:black;
  27. width:50;
  28. height:40;
  29. border-radius:25px;
  30. border : 0px;
  31. font-size: 25px;
  32. color: white;
  33. }
  34.  
  35. button:hover{
  36.  
  37. background-color:black;
  38. height:60;
  39. width :50;
  40.  box-shadow: 0 0 25px 0 WHITE, 0 20px 25px 0 rgba(0, 0, 0, 0.2);
  41.  transition: all 1s;
  42.  color: white;
  43. }
  44.  
  45. #myProgress {
  46.   width: 100%;
  47.   background-color: black;
  48.   border-radius:25px;
  49. }
  50.  
  51. #myBar {
  52.   width: 1%;
  53.   height: 30px;
  54.  
  55.   background-color: white;
  56.  border-radius:25px;
  57. }
  58.  
  59. input{
  60.  
  61. border-radius:25px;
  62. height:30;
  63.  
  64. }
  65. select{
  66. border-radius:25px;
  67. height:30;
  68. }
  69.  
  70. option{
  71.  
  72. height:30;
  73. border-radius:25px;
  74.  
  75. }
  76. input:hover{
  77.  
  78. border-radius:25px;
  79. width:250;
  80. transition: all 1s;
  81. }
  82. select:hover{
  83. border-radius:25px;
  84. width:250;
  85.  transition: all 1s;
  86. }
  87.  
  88. option:hover{
  89.  
  90. width:250;
  91. border-radius:25px;
  92.  transition: all 1s;
  93. }
  94. </style>
  95. </head>
  96.  
  97. <body>
  98.   <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  99.  
  100.   <center>  
  101.     <label>Enter keyword</label>
  102.     <input id="city" type="text" placeholder="type here" autofocus/>
  103.      <br>
  104.      Choose:<select name="cars" id="op">
  105.   <option value="1">IEEE</option>
  106.   <option value="2">SCIENCE OPEN</option>
  107.   <option value="3">SCIENCE DIRECT</option>
  108.   <option value="4">ARXIV</option>
  109.   <option value="5">PAPERITY</option>
  110.   <option value="6">DOAJ</option>
  111.   <option value="7">COMBINED RESULT</option>
  112.   <option value="8">ASK ANYTHING</option>
  113.   <option value="9">WEB SCRAPE QUERY</option>
  114. </select><br>
  115.  
  116.     number of abstracts
  117.     <input type="number" id='ab' name="quantity" min="1" max="10">
  118. <br>  
  119.     <button  id='btn' onclick="get_weather()">Go!</button><br><br><br>
  120. <br>  </center>
  121.     <div id="myProgress">
  122.     <div id="myBar"></div>
  123.     </div>
  124.      <script>
  125.      var el = document.getElementById("btn");
  126. el.addEventListener("click", function(){alert("please wait until loading is finished")}, false);
  127. el.addEventListener("click", function(){move()}, false);
  128.     function move() {
  129.      var elem = document.getElementById("myBar");  
  130.      var x = document.getElementsByName("cars")[0].value;
  131.      z=0.09;
  132.      if(x == "7"){
  133.      var z= 0.04/(x)}
  134.      var width = 1;
  135.     var id = setInterval(frame, 10);
  136.      function frame() {
  137.       if (width >= 100) {
  138.         clearInterval(id);
  139.         } else {
  140.          width=width+z;
  141.          elem.style.width = width + '%';
  142.      }
  143.      }
  144.     }
  145.      </script>
  146.   </div>
  147.  
  148. <body>
  149. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
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!