API tools faq
paste
Advertisement
sgbtechsoluation

WT ASS6

sgbtechsoluation
Jan 11th, 2022
712
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 8.42 KB | None | 0 0
raw download clone embed print report
  1. Assignment 6a
  2.  
  3. <html>
  4.     <head>
  5.         <script src="jquery-3.6.0.js"></script>
  6.     </head>
  7.     <body style="background-color: grey;">
  8.         <h2 id="h">Plz press some keys in the text box</h2>
  9.         <input type="text" id="result"/><br/><br/>
  10.         <button id="b">10</button>
  11.         <script>
  12.             c=10;
  13.             s="";
  14.             $('#result').keypress(function(event)
  15.             {
  16.                 c=c-1;
  17.                 key=String.fromCharCode(event.which);
  18.                 s=s+key;
  19.                 $('#b').html(c);
  20.                 event.preventDefault();
  21.                 if(c==0)
  22.                 {
  23.                     $('#h').html("Pressed chars are displayed in text box with bold and green color");
  24.                     $('#b').remove();
  25.                     $('#result').val(s);
  26.                     $('#result').css({'font-weight':'bold','color':'green'});
  27.                 }
  28.             });
  29.         </script>        
  30.     </body>
  31. </html>
  32.  
  33. Assignmnet6b
  34.  
  35. <!DOCTYPE html>
  36. <!--
  37. To change this license header, choose License Headers in Project Properties.
  38. To change this template file, choose Tools | Templates
  39. and open the template in the editor.
  40. -->
  41. <html>
  42.     <head>
  43.         <script src="jquery-3.6.0.js"></script>
  44.         <style>
  45.             #ball{position :relative;}
  46.             #box{width :600px;height :600px; background-color: peachpuff; border: 1px solid blue;}
  47.         </style>
  48.     </head>
  49.     <body>
  50.         <div id="box">
  51.             <img id="ball" alt="BALL" src="ball.PNG" width="50" height="50"/>
  52.         </div>
  53.         <button id="b1" style="color: black;position: absolute;top: 50px;left: 1000px;font-size: 2.3em;">TOP</button>
  54.         <button id="b2" style="color: black;position: absolute;top: 150px;left: 1000px;font-size: 2.3em;">LEFT</button>
  55.         <button id="b3" style="color: black;position: absolute;top: 250px;left: 1000px;font-size: 2.3em;">BOTTOM</button>
  56.         <button id="b4" style="color: black;position: absolute;top: 350px;left: 1000px;font-size: 2.3em;">RIGHT</button>
  57.         <script>
  58.             var t=0,l=0,r=0,b=0;
  59.             function calt()
  60.             {
  61.                 t=t+1;
  62.                 $('#b1').html("TOP : "+t);
  63.                 if(t==15)
  64.                 {
  65.                     $('#b1').html("Winner!");
  66.                     $('#b1').css('color','red');
  67.                     $('#ball').css('position','static');
  68.                     event.preventDefault();
  69.                 }
  70.             }
  71.             function call()
  72.             {
  73.                 l=l+1;
  74.                 $('#b2').html("LEFT : "+l);
  75.                 if(l==15)
  76.                 {
  77.                     $('#b2').html("Reached the count,Winner!");
  78.                     $('#b2').css('color','red');
  79.                     $('#ball').css('position','static');
  80.                     event.preventDefault();
  81.                 }
  82.             }
  83.             function calb()
  84.             {
  85.                 b=b+1;
  86.                 $('#b3').html("BOTTOM : "+b);
  87.                 if(b==15)
  88.                 {
  89.                     $('#b3').html("Reached the count,Winner!");
  90.                     $('#b3').css('color','red');
  91.                     $('#ball').css('position','static');
  92.                     event.preventDefault();
  93.                 }
  94.             }
  95.             function calr()
  96.             {
  97.                 r=r+1;
  98.                 $('#b4').html("RIGHT : "+r);
  99.                 if(r==15)
  100.                 {
  101.                     $('#b4').html("Reached the count,Winner!");
  102.                     $('#b4').css('color','red');
  103.                     $('#ball').css('position','static');
  104.                     event.preventDefault();
  105.                 }
  106.             }
  107.             function bounce()
  108.             {
  109.                 $('#ball').fadeOut().fadeIn(2000);
  110.                 $('#ball').animate({left:'300px',top:'0px'},'slow','linear',calt);
  111.                 $('#ball').fadeOut().fadeIn(2000);
  112.                 $('#ball').animate({left:'0px',top:'300px'},'slow','linear',call);
  113.                 $('#ball').fadeOut().fadeIn(2000);
  114.                 $('#ball').animate({left:'300px',top:'600px'},'slow','linear',calb);
  115.                 $('#ball').fadeOut().fadeIn(2000);
  116.                 $('#ball').animate({left:'600px',top:'300px'},'slow','linear',calr);
  117.                 bounce();
  118.             }
  119.             bounce();
  120.  
  121.                     </script>
  122.     </body>
  123. </html>
  124.  
  125. Assignment6c
  126.  
  127. <html>
  128.     <head>
  129.         <script src="jquery-3.6.0.js"></script>
  130.     </head>
  131.     <body>
  132.         <h2>Are You Vegetarian or Non-Vegetarian?</h2>
  133.         <pre><input type="radio" name="r1" value="veg" id="v"/>Vegetarian</pre>
  134.         <pre><input type="radio" name="r1" value="nonveg" id="n"/>Non-Vegetarian</pre>
  135.         <div></div>
  136.         <script>
  137.             $('#v').click(function()
  138.             {
  139.                 $('div').empty().html("<a href='veg.html'>Visit Veg Site</a>");
  140.             });
  141.             $('#n').click(function()
  142.             {
  143.                 $('div').empty().html("<a href='nonveg.html'>Visit Nonveg Site</a>");
  144.             });
  145.         </script>
  146.     </body>
  147. </html>
  148.  
  149. veg.html
  150.  
  151. <html>
  152.     <head>
  153.         <script src="jquery-3.6.0.js"></script>
  154.     </head>
  155.     <body>
  156.         <h1>Recipe      :   Price</h1>
  157.         <pre>Chapati    :    20/-</pre>
  158.         <pre>Alu-parota :    20/-</pre>
  159.         <pre>Zera-rice  :    20/-</pre>
  160.         <pre>Pannir     :    20/-</pre>
  161.         <div></div>
  162.         <script>
  163.             function msg()
  164.             {
  165.                 alert("Your food is served , Enjoy it");
  166.             }
  167.             function f1()
  168.             {
  169.                 $('button').remove();
  170.                 setTimeout(msg,1000);
  171.             }
  172.             $('pre').click(function()
  173.             {
  174.                 v=($(this).html()).match(/[a-z A-Z -]+/);
  175.                 $('div').html("<button id='b'></button>");
  176.                 $('#b').html("you have placed order for : "+v);
  177.                 setTimeout(f1,4000);
  178.             })
  179.         </script>
  180.     </body>
  181. </html>
  182.  
  183. nonveg.html
  184.  
  185. <html>
  186.     <head>
  187.         <script src="jquery-3.6.0.js"></script>
  188.     </head>
  189.     <body>
  190.         <h1>Recipe      :   Price</h1>
  191.         <pre>Chicken    :    20/-</pre>
  192.         <pre>Fish-fry :    20/-</pre>
  193.         <pre>Egg-rice  :    20/-</pre>
  194.         <pre>Egg-masala     :    20/-</pre>
  195.         <div></div>
  196.         <script>
  197.             function msg()
  198.             {
  199.                 alert("Your food is served , Enjoy it");
  200.             }
  201.             function f1()
  202.             {
  203.                 $('button').remove();
  204.                 setTimeout(msg,1000);
  205.             }
  206.             $('pre').click(function()
  207.             {
  208.                 v=($(this).html()).match(/[a-z A-Z -]+/);
  209.                 $('div').html("<button id='b'></button>");
  210.                 $('#b').html("you have placed order for : "+v);
  211.                 setTimeout(f1,4000);
  212.             })
  213.         </script>
  214.     </body>
  215. </html>
  216.  
  217. Assignmnet6d
  218.  
  219. <html>
  220.     <head>
  221.         <script src="jquery-3.6.0.js"></script>
  222.     </head>
  223.     <body>
  224.     <center><h2>Time Table</h2></center>
  225.     <table align="center" cellpadding="10" cellspacing="5" border="2">
  226.         <tr class="c1">
  227.             <th>Day/Time</th>
  228.             <th>8-9</th>
  229.             <th>9-10</th>
  230.             <th>10-11</th>
  231.             <th>11-12</th>
  232.         </tr>
  233.         <tr>
  234.             <th>Mon</th>
  235.             <th>WT</th>
  236.             <th>CD</th>
  237.             <th> - </th>
  238.             <th>CC</th>
  239.         </tr>
  240.         <tr>
  241.             <th>Tue</th>
  242.             <th> - </th>
  243.             <th>WT</th>
  244.             <th>CD</th>
  245.             <th>CC</th>
  246.         </tr>
  247.         <tr class="c3">
  248.             <th>Wed</th>
  249.             <th> - </th>
  250.             <th>CC</th>
  251.             <th>WT</th>
  252.             <th> - </th>
  253.         </tr>
  254.         <tr>
  255.             <th>Thu</th>
  256.             <th>OE</th>
  257.             <th>CD</th>
  258.             <th>WT</th>
  259.             <th> - </th>
  260.         </tr>
  261.         <tr>
  262.             <th>Fri</th>
  263.             <th>OE</th>
  264.             <th>CD</th>
  265.             <th>WT</th>
  266.             <th> - </th>
  267.         </tr>
  268.     </table>
  269.     <button id="1" style="position: absolute;top: 215px;left: 1000px;font-weight: bold;">Change Wed</button>
  270.     <script>
  271.         $('#1').click(function()
  272.         {
  273.             $('.c1').siblings('.c3').css({'background-color':'red','color':'yellow','font-style':'italic'});
  274.         });
  275.         </script>      
  276.     </body>
  277. </html>
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!