Advertisement
fabi0

Untitled

May 11th, 2014
225
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 2.67 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <!--
  3. To change this license header, choose License Headers in Project Properties.
  4. To change this template file, choose Tools | Templates
  5. and open the template in the editor.
  6. -->
  7. <html>
  8.     <head>
  9.         <title>TODO supply a title</title>
  10.         <meta charset="UTF-8">
  11.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  12.  
  13.         <style type="text/css">
  14.             .wrap {
  15.                 width: 1280px;
  16.                 margin:0 auto;
  17.             }
  18.             .box {
  19.                 width: 300px;
  20.                 height: 300px;
  21.                 background: #43A6DF;
  22.                 color:white;
  23.                 margin:4px;
  24.                 padding:6px;
  25.             }
  26.             p {
  27.                 color: white;
  28.                 text-align: center;
  29.                 font-size: 20px;
  30.                 font-weight: bold;
  31.             }
  32.  
  33.             .inp {
  34.                 border: 1px solid cadetblue;
  35.                 background: white;
  36.                 color:black;
  37.                 height:40px;
  38.                 padding:3px;
  39.                 width: 292px;
  40.                 font-size: 30px;
  41.             }
  42.             .subbtn {
  43.                 background: #2E3539;
  44.                 height: 30px;
  45.                 color: white;
  46.                 text-align: center;
  47.                 border: 1px solid black;
  48.                 width: 298px;
  49.                 margin-top:10px;
  50.             }
  51.             .answer p {
  52.                 margin-top: 20px;
  53.                 font-size: 32px;
  54.             }
  55.         </style>
  56.         <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  57.         <script type="text/javascript">
  58.             $(document).ready(function() {
  59.                 $(".subbtn").click(function() {
  60.                     var _input = $(".inp").val();
  61.                     if (_input < 0) {
  62.                        _input = _input * (-1);
  63.                    }
  64.                    if ((_input % 2) === 1) {
  65.                        $(".answer").html('<p>The number ' + _input + ' is odd.</p>');
  66.  
  67.                     } else {
  68.                         $(".answer").html('<p>The number ' + _input + ' is even.</p>');
  69.                     }
  70.                 });
  71.             });
  72.         </script>
  73.     </head>
  74.     <body>
  75.         <div class="wrap">
  76.             <div class="box">
  77.                 <p>Write an expression that checks if given integer is odd or even.</p>
  78.                 <input type="text" name="input1" id="input1" class="inp" />
  79.                 <input type="submit" value="Check" name="submit1" class="subbtn"/>
  80.                 <div class="answer"></div>
  81.             </div>
  82.         </div>
  83.     </body>
  84. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement