API tools faq
paste
Guest User

Untitled

a guest
Oct 30th, 2013
41
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 4.46 KB | None | 0 0
raw download clone embed print report diff
  1. <html>
  2.     <head>
  3.         <title>Ma super calculatrice</title>
  4.         <style>
  5.             body
  6.             {
  7.                 background-color: black;
  8.             }
  9.  
  10.             #calculatrice
  11.             {
  12.                 border: 2px solid black;
  13.                 border-radius: 15px;
  14.                 margin-left: auto;
  15.                 margin-right: auto;
  16.                 width: 400px;
  17.                 height: 600px;
  18.                 background-color: white;
  19.                 margin-top: 50px;
  20.                 padding: 10px;
  21.             }
  22.  
  23.             #calculatrice form
  24.             {
  25.                 font-size: 30px;
  26.                 font-weight: bold;
  27.                 margin-top: 20px;
  28.             }
  29.  
  30.             #calculatrice input
  31.             {
  32.                 width: 36%;
  33.                 height: 50px;
  34.                 margin-left: 10px;
  35.                 font-size: 30px;
  36.                 font-weight: bold;
  37.                 border: 2px solid black;
  38.                 text-align: center;
  39.             }
  40.  
  41.             #calculatrice .input_operateur
  42.             {
  43.                 width: 50px;
  44.             }
  45.  
  46.             #calculatrice #btn_valider
  47.             {
  48.                 position: absolute;
  49.                 margin-left: -85px;
  50.                 margin-top: 470px;
  51.                 width: 60px;
  52.                 cursor: pointer;
  53.             }
  54.  
  55.             #calculatrice #btn_valider:hover
  56.             {
  57.                 color: red;
  58.             }
  59.  
  60.             #calculatrice .btn_calculatrice
  61.             {
  62.                 width: 50px;
  63.                 height: 50px;
  64.                 border: 2px solid black;
  65.                 float: left;
  66.                 margin-left: 35px;
  67.                 margin-top: 20px;
  68.                 text-align: center;
  69.                 font-size: 40px;
  70.                 cursor: pointer;
  71.             }
  72.  
  73.             #calculatrice .btn_calculatrice:hover
  74.             {
  75.                 color: white;
  76.                 background-color: black;
  77.             }
  78.  
  79.             #calculatrice .btn_calculatrice:active
  80.             {
  81.                 color: red;
  82.             }
  83.  
  84.             #content
  85.             {
  86.                 margin-top: 50px;
  87.             }
  88.  
  89.             #result
  90.             {
  91.                 margin-left: 3%;
  92.                 width: 92%;
  93.                 text-align: center;
  94.                 font-size: 40px;
  95.                 border: 2px solid black;
  96.                 height: 50px;
  97.             }
  98.         </style>
  99.     </head>
  100.     <body>
  101.         <div id='calculatrice'>
  102.  
  103.             <div id='result'>
  104.                 <?php
  105.  
  106.                 function operation($a, $b, $operateur)
  107.                 {
  108.                     if($operateur == "%2B")
  109.                     {
  110.                         return $a + $b;
  111.                     }
  112.                     elseif($operateur == "-")
  113.                     {
  114.                         return $a - $b;
  115.                     }
  116.                     elseif($operateur == "x" )
  117.                     {
  118.                         return $a * $b;
  119.                     }
  120.                     elseif($operateur == "%2F" || $operateur == "%25")
  121.                     {
  122.                         if($b != 0)
  123.                         {
  124.                             return $a / $b;
  125.                         }
  126.                         else
  127.                         {
  128.                             return "erreur";
  129.                         }
  130.                     }
  131.                     else
  132.                     {
  133.                         return "opérateur indéfinie";
  134.                     }
  135.                 }
  136.  
  137.                 if(isset($_GET['submit']))
  138.                 {
  139.                     if(isset($_GET['nombre1']) && isset($_GET['nombre2']) && isset($_GET['operateur']))
  140.                     {
  141.                         $nombre1 = $_GET['nombre1'];
  142.                         $nombre2 = $_GET['nombre2'];
  143.                         $operateur = $_GET['operateur'];
  144.                         $result = $_GET['result'];
  145.  
  146.                         $result = operation($nombre1, $nombre2, $operateur);
  147.  
  148.                         echo $result;
  149.                     }
  150.                 }
  151.                 ?>
  152.             </div>
  153.  
  154.             <form method="get" action="#">
  155.                 <input class='input_number' name='number1' id='number1'/>
  156.                 <input class='input_operateur' name='operateur' id='operateur'/>
  157.                 <input class='input_number'name='number2' id='number2'/>
  158.                 <input id='btn_valider' type='submit' value='='></input>
  159.             </form>
  160.  
  161.             <div id='content'>
  162.                 <div class='btn_calculatrice' onclick='remplirNumber(7)'>7</div>
  163.                 <div class='btn_calculatrice' onclick='remplirNumber(8)'>8</div>
  164.                 <div class='btn_calculatrice' onclick='remplirNumber(9)'>9</div>
  165.                 <div class='btn_calculatrice' onclick='remplirNumber("+")'>+</div>
  166.  
  167.                 <div class='btn_calculatrice' onclick='remplirNumber(4)'>4</div>
  168.                 <div class='btn_calculatrice' onclick='remplirNumber(5)'>5</div>
  169.                 <div class='btn_calculatrice' onclick='remplirNumber(6)'>6</div>
  170.                 <div class='btn_calculatrice' onclick='remplirNumber("-")'>-</div>
  171.  
  172.                 <div class='btn_calculatrice' onclick='remplirNumber(1)'>1</div>
  173.                 <div class='btn_calculatrice' onclick='remplirNumber(2)'>2</div>
  174.                 <div class='btn_calculatrice' onclick='remplirNumber(3)'>3</div>
  175.                 <div class='btn_calculatrice' onclick='remplirNumber("x")'>x</div>
  176.  
  177.                 <div class='btn_calculatrice' onclick='remplirNumber(0)'>0</div>
  178.                 <div class='btn_calculatrice' onclick='remplirNumber(",")'>,</div>
  179.                 <div class='btn_calculatrice' onclick='remplirNumber("%")'>%</div>
  180.                 <div class='btn_calculatrice' onclick='remplirNumber("/")'>/</div>
  181.             </div>
  182.         </div>
  183.     </body>
  184.  
  185.     <script>
  186.         function remplirNumber(n)
  187.         {
  188.             var champ1 = document.getElementById("number1");
  189.             var champ2 = document.getElementById("number2");
  190.             var operateur = document.getElementById("operateur");
  191.             if(typeof n == "number" || n == ',')
  192.             {
  193.                 if(operateur.value.length == 0)
  194.                     champ1.value += n;
  195.                 else
  196.                     champ2.value += n;
  197.             }
  198.             else
  199.                 operateur.value = n;       
  200.         }
  201.     </script>
  202. </html>
Advertisement
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!