SHARE
TWEET

segi-empat.html

gunawantw May 14th, 2019 (edited) 98 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.    
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7.  
  8.     <!-- <link rel="stylesheet" href="bootstrap-4-3-1/css/bootstrap.min.css" > -->
  9.     <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  10.    
  11.     <title>Hello, world!</title>
  12. </head>
  13. <body>
  14.  
  15.     <div class="jumbotron text-center" style="margin-bottom:0">
  16.         <h1>SEGI EMPAT</h1>
  17.         <p>Program menghitung keliling dan luas Segi Empat!</p>
  18.     </div>
  19.  
  20. <div class="container" style="width:300px;">
  21.  
  22.     <form>
  23.     <div class="input-group input-group-sm mb-3" style="margin-top:12px">
  24.         <div class="input-group-prepend">
  25.             <span class="input-group-text" style="width: 100px">Panjang (cm)</span>
  26.         </div>
  27.         <input type="text" class="form-control" name="var_panjang">
  28.     </div>
  29.                  
  30.     <div class="input-group input-group-sm mb-3" style="margin-top:12px">
  31.         <div class="input-group-prepend">
  32.             <span class="input-group-text" style="width: 100px">Lebar (cm)</span>
  33.         </div>
  34.         <input type="text" class="form-control" name="var_lebar">
  35.     </div>
  36.        
  37.     <div>
  38.         <button type="button" class="btn btn-primary" onclick="hitung()">Hitung!</button>
  39.     </div>
  40.  
  41.     <div class="input-group input-group-sm mb-3" style="margin-top:12px">
  42.         <div class="input-group-prepend">
  43.             <span class="input-group-text" style="width: 100px">Keliling (cm)</span>
  44.         </div>
  45.         <input type="text" class="form-control" name="var_keliling">
  46.     </div>
  47.    
  48.     <div class="input-group input-group-sm mb-3" style="margin-top:12px">
  49.         <div class="input-group-prepend">
  50.             <span class="input-group-text" style="width: 100px">Luas (cm<sup>2</sup>)</span>
  51.         </div>
  52.         <input type="text" class="form-control" name="var_luas">
  53.     </div>
  54.    
  55.     </form>
  56.  
  57. </div>
  58.  
  59. </body>
  60. <script>
  61. function hitung() {
  62.    
  63.     form = document.forms[0];
  64.     panjang = parseInt(form.var_panjang.value);
  65.     lebar = parseInt(form.var_lebar.value);
  66.    
  67.     keliling = 2 * ( panjang + lebar )
  68.     luas = panjang * lebar;
  69.  
  70.     form.var_keliling.value = keliling;
  71.     form.var_luas.value = luas;    
  72. }
  73. </script>
  74. </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
 
Top